HTML INPUT ATTRIBUTES

In this article, we'll explain the types of attributes that can be used in the html input element.

They are:

  • VALUE HTML INPUT ATTRIBUTES:

The value attribute holds a value in the form of a text. When creating an HTML form, it is important that you include the value attribute and leave it as blank [value=" "]. This will make it possible for the web browser to collect the inputted value from a user and send it back to the web server to be stored.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="name" value="John"><br>
  <label for="contact">Contact:</label><br>
  <input type="text" id="contact" name="contact" value="+234 80 567 324x3"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
  • READONLY ATTRIBUTE

In the read-only attribute, the user cannot change the written text in the value attribute. After submission, the read-only attribute value will also be sent back to the web server for storage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
    <form action="#">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="name" value="John" readonly><br>
  <label for="contact">Contact:</label><br>
  <input type="text" id="contact" name="contact" value="+234 80 567 3243"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
  • SIZE ATTRIBUTE

The size attribute value is used in specifying the desired width of an input field type. The width of an input field can either be increased or reduced using the size attribute.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="name" value="John" size="30"><br>
  <label for="contact">Contact:</label><br>
  <input type="text" id="contact" name="contact" value="+234 80 567 3243" size="50"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
  • AUTOCOMPLETE ATTRIBUTE

The autocomplete attribute displays options for the web user to choose from when filling a form. This feature only happens when the autocomplete attribute is set to on.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#" autocomplete="on">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="name" value="Peter"><br>
  <label for="contact">Contact:</label><br>
  <input type="text" id="contact" name="contact" value="+234 80 567 3243"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
  • THE LIST ATTRIBUTE

The list attribute holds a variety of programmed options for the web user to pick from.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <form action="#">
  <input list="Editors" name="code editors">
  <datalist id="Editors">
    <option value="Atom">
    <option value="Vim">
    <option value="Emac">
    <option value="VS Code">
  </datalist>
  <input type="submit" value="Submit">
</form>
</body>
</html>
  • AUTOFOCUS ATTRIBUTE

The autofocus attribute is used to give maximum attention to a particular input field sonas to draw the user's attention. This attribute is useful for highlighting CATs and important texts.l

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#">
  <label for="name">First name:</label><br>
  <input type="text" id="name" name="name" value="Peter"><br>
  <label for="contact">Contact:</label><br>
  <input type="text" id="contact" name="contact" value="+234 80 567 3243"><br><br>
  <input type="submit" value="Submit" autofocus="on">
</form>
</body>
</html>
  • REQUIRED ATTRIBUTE

The required attribute tells the web browser that an input field ought to be filled. When the user fails to put on a value, it will prompt the user to revisit the input field and enter a value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#">
  <label for="email">Email address:</label><br>
  <input type="text" id="email" name="email" required><br><br>
  <input type="submit" value="Submit" autofocus="on">
</form>
</body>
</html>
  • PLACEHOLDER ATTRIBUTE

The placeholder attribute is a hint of the expected value to be entered in an input field.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#">
  <label for="email">Email address:</label><br>
  <input type="text" id="email" name="email" required placeholder="you@gmail.com"><br><br>
  <input type="submit" value="Submit" autofocus="on">
</form>
</body>
</html>
  • MAX LENGTH ATTRIBUTE

The maximum length attribute puts a restriction on the number of characters a web user can enter into a field.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <form action="#">
  <label for="email">Email address:</label><br>
  <input type="text" id="email" name="email" placeholder="you@gmail.com"><br><br>
  <label for ="password">Password:</label><br>
  <input type="text" id="password" name="password" maxlength="5" size="5">
  <br><br>
   <input type="submit" value="Submit">
</form>
</body>
</html>