Input attributes

You've already studied different input types that are available in HTML forms. There are attributes used specifically with HTML form tags that can increase the usability of HTML forms — these attributes add behaviors to the input element. Similarly, there are attributes that are used with the input element that enhances the behavior and the overall structure of HTML forms. You are going to learn about them in this topic.

The value attribute

The value attribute of the input tag specifies an initial value for the input field. Depending on different input types, there are some differences in the meaning of the value attribute:

• When the value attribute is present in any kind of button, for example, "Submit" or "Reset", it specifies the text on the button.

• When the value attribute is used with such input fields as "password", "text", etc., it specifies the initial value of the input field, as mentioned above.

• When the value attribute is present in such input fields as "checkbox", "radio", etc., it specifies the value associated with the input field.

The syntax goes like this:

<input value="value">

Here is an example:

<form action="">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username" value="Username"/><br /><br />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" value="password" />
</form>

Here is the output:

The size attribute

The size attribute of the input tag specifies the width of the input field. This width is the visible width which is calculated based on the number of characters. The default value of the size attribute of the input tag is 20. However, you can only use the size attribute with a limited number of input types, for example, search, text, tel, email, url, and password.

The syntax goes like this:

<input size="value">

Here is an example:

<form action="">
  <label for="name">Username:</label>
  <input type="text" name="name" id="name" size="60" /><br /><br />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" size="20" />
</form>

Here is the output:

The readonly attribute

As the name suggests, the readonly attribute specifies that an input field is read-only, which means you won't be able to add or delete any information from such input fields. However, you can highlight the text and copy it from such input fields. The only use of an input field which has the readonly attribute is to send a value while submitting the forms.

The syntax goes like this:

<input type="text" value="value" readonly>

Here is an example:

<form action="">
  <label for="name">Username:</label>
  <input type="text" name="name" id="name" value="John Doe" readonly /><br /><br />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" />
</form>

Here is the output:

The height and width attribute

The height and width attributes of the input tag are used only when the input type is an image. They specify the height and width of an image in pixels (px), but you don't need to specify the unit while adding these attributes. The advantage of these attributes is that the space required for an image is reserved when the browser page is loaded. Without this attribute, the browser won't be able to reserve the space for the image while loading, so the page layout will be affected when the page loads.

The syntax goes like this:

<input type="image" src="image.gif" width="value" height="value">

Here is an example:

<form action="">
  <label for="image">Image - 1:</label>
  <input type="image" src="jbrains.jpg" name="image" id="image" width="50" height="50"/><br /><br />
  <label for="image">Image - 2:</label>
  <input type="image" src="jbrains.jpg" name="image" id="image" width="30" height="30"/><br /><br />
</form>

Here is the output:

The disabled attribute

The disabled attribute of the input tag specifies that the input field is disabled. When this attribute is applied to the input element, the input field will be unclickable and unusable. Unlike the readonly attribute, the value of the disabled attribute is not sent while submitting the form.

The syntax goes like this:

<input type="text" value="value" disabled>

Here is an example:

<form action="">
  <label for="name">Username:</label>
  <input type="text" name="name" id="name" /><br /><br />
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" disabled />
</form>

Here is the output:

Conclusion

In this topic, you studied different attributes of the input element that are used to add specific behavior to the HTML forms. To define a value for the input field you can use the value attribute. When the readonly attribute is used with an input element, any addition or modification within that element is not possible. You also saw how you can manage the sizes of the input field and the images with the size and width / height attributes respectively. The user won't be able to type in the input field when the disabled attribute is present.