HTML input attributes

HTML input attributes make the input elements more useable. There are many attributes related to the input element. The attributes provide the additional information about the input elements.

name

name attribute represents the unique name for an input element.

<form action="files/process.php" method="post">
 Name:<input type="text" name="fullname"><br>
 Email:<input type="email" name="email">
</form>

Try </>

name attribute is used to manipulate the data.

value

The value attribute represents the initial content for the input element. The user can interact with the input and can modify the value.

<form action="process.php" method="post">
 <p>Name:<input type="text" name="fname" value="David"></p>
 <p>Email:<input type="email" name="email" value="[email protected]"></p>
</form>

Try </>

type

There are many types of an input element. The type may be text, number.

Email:<input type="email" name="email">

Try </>

autocomplete

autocomplete attribute suggests different options to the user. Here suggested options were stored in the browser from previously entered values.

PIN:<input type="password" autocomplete="off">	

Try </>

autofocus

autofocus focuses the cursor to the respective input field in which this attribute is used.

<p>cursor focuses itself in the respective input field due to autofocus attribute</p> 
<input type="number"  autofocus>	

Try </>

checked

checked attribute checks one option in a list of options by default .

<p>checked attribute gives default value to the input</p>
<input type="radio" value="Male" checked>Male

Try </>

disabled

disabled attribute makes the input field uneditable and unprocessable.

Last name:<input type="text" disabled>

Try </>

form

form attribute associates the input field with a form. In this method, an id is specified for the <form>. Then, the value of id attribute is used in the form attribute of the input field.

<p>form attribute in the input element associates it with the form</p>
Password: <input type="password"  form="cform">

Try </>

The <input> element contains the id of form element.

list

List attribute links the input field to a list of predefined options. See the followig example to understand.

<input list="data">
<datalist id="data"> </datalist>

Try </>

max

max specifies the maximum value in an input field.

Age: <input type="number" max="150">

Try </>

The value greater than max value will not be accepted (151 is not accept able).

maxlength

maxlength attribute specifies the maximum number of characters in an input field.

Username: <input type="text" maxlength="20" >

Try </>

The user can not enter value that has more than 20 characters.

min

min attribute restricts the input field to a minimum value below which value is not acceptable.

Age: <input type="number" min="0">

Try </>

The above example indicates that a user can not enter negative values (value>0). The value less than the minimum value will not be accepted. Practice min attribute.

minlength

minlength represents the minimum number of characters that must be entered by the user.

Password: <input type="password" minlength="8" >

Try </>

The password must have at least 8 characters otherwise the password is not acceptable. Explore more about minlength attribute.

placeholder

This attribute hints the user about what kind of data is to enter in the input field.

First name: <input type="text" placeholder="john">

Try </>

Learn more about placeholder attribute.

readonly

readonly makes an input field uneditable. The user can read only. But the content is still focusable.

<input type="text"  readonly>

Try </>

There is a difference between readonly and disabled attribute. The disabled element is not focusable.

size

size attribute represents the number of characters to show. In other words, it defines the visual length of input field.

<p><input type="text"></p>
<input type="text" size="30" >

Try </>

The default size of input field is 30. Learn more about size attribute.

step

step attribute indicates the increment in the numerical value of input field.

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

Try </>

Explore more about step attribute .

accept

It gives hints to the browser about what kind of data will be uploaded.

<input type="file" accept="image\*"><!--It accepts only image files-->

Try </>

image keyword represents that image files are accepted. Explore more about accept attribute.