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.

Example

<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.

Example

<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.

Example

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.

Example

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

Try </>

autofocus

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

Example

<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 .

Example

<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.

Example

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.

Example

<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 example to understand.

Example

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

Try </>

max

max specifies the maximum value in an input field.

Example

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.

Example

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 accept able.

Example

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.

minlength

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

Example

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

Try </>

The password must have at least 8 characters otherwise the password is not accept able.

placeholder

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

Example

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

Try </>

readonly

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

Example

<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.

Example

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

Try </>

The default size of input field is 30.

step

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

Example

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

Try </>

Accept

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

Example

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

Try </>

image keyword represents that image files are accepted.



Was this article helpful?

 

Email:

Message:

Get the newsletter