More input attributes

You've already studied various attributes of the input element such as disabled, required, height, width, readonly, size, and so on. In this topic, you are going to learn about more input attributes that enhance the form's behavior. Remember that the input element is the most significant element of HTML forms. It also has a wide variety of attributes, which means you can create various forms with different behavior and structure using these attributes.

The multiple attribute

The multiple attribute of the input element is a boolean attribute. It specifies that a user can select one or more values for the input field. For example, if the input field is of the file type, you can add or upload one or more files in the input field. The multiple attributes are applied to only two input types: file and email.

The syntax goes like this:

<input type="file" multiple>

Here is an example:

<form action="">
  <label for="files">Attach files:</label>
  <input type="file" id="files" name="files" multiple />
</form>

Here is the output:

The placeholder attribute

The placeholder attribute of the input field is used to specify the short hint that describes the expected value from the user in the input field. This hint appears as muted text, that is, as soon as you begin to write in the input field, it'll disappear. There are two elements that accept this attribute: input and textarea.

The syntax goes like this:

<input placeholder="placeholder">

Here is an example:

<form action="">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" placeholder="Enter your name." />
</form>

Here is the output:

The autofocus attribute

The autofocus attribute of the HTML input element specifies that an element has the focus once the page is loaded. Here, the focus means the controls are directed to the specific input, and this control only gets the focus when the page is loaded and the cursor starts blinking in that input field.

The syntax goes like this:

<input type="text" autofocus>

Here is an example:

<form action="">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" /><br /><br />
  <label for="code">Enter your code:</label>
  <input type="number" name="code" id="code" autofocus />
</form>

Here is the output:

The autocomplete attribute

As the name suggests, the autocomplete attribute is used to add the autocomplete functionality to an input element. This attribute allows the browser to predict the values based on previously entered values. This attribute is useful for details like name, contact number, address, and so on. The value of the autocomplete attributes are: on and off.

The syntax goes like this:

<input type="text" autocomplete="on">

Here is an example:

<form action="">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" autocomplete="on" /><br /><br />
  <label for="dob">Date of birth:</label>
  <input type="date" name="date" id="date" autocomplete="off" /><br /><br />
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" autocomplete="on" /><br /><br />
  <button type="submit">Submit</button>
</form>

To see the output in function, first, fill out the form and reload the browser page and then try again to fill out the form. The fields with autocomplete="on" will suggest the previously entered values.

The list attribute

You can use the list attribute to display the list of pre-defined options for an input element. The list attribute is bound to the datalist element through the id of the datalist element. That means the value of the list attribute must be the same as that of the id of the datalist element. The pre-defined options won't be visible if this condition is not satisfied.

The syntax goes like this:

<input list="value">
<datalist id="value">

Here is an example:

<form action="">
  <label for="language">Select language:</label>
  <input list="languages" id="language" />
  <datalist id="languages">
    <option value="C++"></option>
    <option value="JavaScript"></option>
    <option value="Java"></option>
    <option value="Python"></option>
    <option value="Rust"></option>
    <option value="Scala"></option>
  </datalist>
</form>

Here is the output:

The step attribute

The step attribute of the input element adds the legal steps to the input field. It means that the user cannot enter any value in the input field but must follow the step intervals. For example, if step="5" for an input field, the legal intervals are -15, -10, -5, 0, 5, ... and so on. The user won't be able to enter any value other than these intervals

The syntax goes like this:

<input type="number" step="value">

Here is an example:

<form action="">
  <label for="steps">Steps:</label>
  <input type="number" name="steps" id="steps" step="6" />
</form>

Here is the output:

Conclusion

You now know about all the attributes supported by the input attribute. In this section, you learned how to add an initial hint to the input field using the placeholder attribute. To add more than one value or file you can use multiple attribute. If you want to focus on a specific attribute as the page loads, you can use the autofocus attribute. When the autocomplete attribute is used on the input element, it shows previously entered values as suggestions to the user, and finally, to set step intervals to the input value, use the step attribute.