HTML Input Attributes

In HTML there are different types of input attributes which can be used.

The important and frequently used type attributes are:

1] value Attribute

2] readonly Attribute

3] disabled Attribute

4] size Attribute

5] maxlength Attribute

6] autocomplete Attribute

7] autofocus Attribute

8] required Attribute

9] placeholder Attribute

10] multiple Attribute

11] min and max Attribute

12] height and width Attribute

1] value Attribute:

The values attribute is used to specify the initial value of the input element. Suppose if you want to show the default value in textbox like "Rajendra" you can use the value attribute.

Example
<input type="text" value="Rajendra">

In the above example it will display the Rajendra as a value in textbox.

2]readonly Attribute:

readonly attribute specifies the textbox as readonly. readonly attribute does not allow you to change the value in textbox. User will not allow to enter the new value in textbox. If you want to have fixed value for textbox you can use readonly attribute.

Example
<input type="text" name="Rajendra" readonly>

In the above example textbox holds the Rajendra value we have used readonly attribute so you can not change the value of textbox.

3] disabled Attribute:

The disabled attribute specifies that the input field is disabled.

You can not enter anything or you can not change the value in text field.

Example
<input type="text" name="Rajendra" disabled>

Here, you can not change the value of textbox because disabled attribute will not allow you to change the value.

What is the difference between readonly and disabled:

Both are not allowing user to change the textbox values.

readonly input can post the value to the server side script.

disabled input will not post the value to the server side script.

4] size Attribute:

The size attribute specify the size in characters for the input field.

Example
<input type="text" size="40">

In the above example we specifies the size of the input element. It allows 40 characters as input.

5] maxlength Attribute:

The maxlength attribute specify the maximum characters to be allowed in text field.

Example
<input type="text" maxlength="20">

In the above example it allow only 20 characters as a input.

6] autocomplete Attribute:

The autocomplete attribute specifies whether a form field should have autocomplete on or off.

When autocomplete is on the browser automatically completes the input values based on values that the user has entered before.

The autocomplete attrbute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range and color.

Example
<form action="save.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Here autocomplete="on" specifies the autocomplete is on and autocomplete="off" specifies the autocomplete is off.

7] autofocus Attribute:

autofocus attribute is specifies the default focus on webpage. If you want to focus the particular element on page load you can use the autofocus attribute.

Example
<form action="save.php">
  First name:<input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>

In the above example first name field have autofocus, on page load the focus gets on first name field.

8] required Attribute

required attribute specifies the input field must be filled with value before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio and file.

Example
<form action="save.php">
  First name:<input type="text" name="fname" required><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>

In this example if you want to submit the form without filling First name it will not allow you until you fill the First name value.

9] placeholder Attribute:

placeholder attribute specifies the hint that show the user. It is the short description about the input field. The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

Example
<input type="text" placeholder="Please enter name">

In the above example it is hint for the user, it indicate that please enter the name in input field.

10] multiple Attribute:

multiple attribute specifies that the user can enter more than one value in the <input> field.

The multiple attribute works with the input types: email and file.

Example
Select images: <input type="file" name="userfile" multiple>

Here, user can select multiple images to upload.

11] min and max Attribute

The min and max attributes specifies the minimum and maximum values for the input field. The min and max attributes work with the input types: number, date, datetime-local, month, time and week.

Example
<input type="number" name="items" min="1" and max="8">

Here, user can enter the number between 1 and 8.

12] height and width Attribute

The height and width specify the height and width of an <input type="image"> element.

Define the image for the input button.

Example
<input type="image" src="save.png" alt="save" width="48" height="48">