Input attributes in HTML5

In this tutorial input attributes are briefly described. Here will be source codes with examples.

List of input attributes

1) type
The attribute is used for type of input element.
2) value
The value attribute is used for value of input element.
3) placeholder
The placeholder attribute is used for expected value of input element.
4) name
The name attribute is used for the name of the input element.
5) alt
The alt attribute is used for alternate text if image is not shown.
6) autofocus
The autofocus attribute is used for automatically get focus.
7) checked
The checked attribute is used for selecting the given condition.
8) disabled
The disabled attribute is used disable an input field.
9) max
The max attribute is used for specify maximum limit for date in an input field.
10) required
The required attribute is used for an input field which must be filled.
11) readonly
The readonly attribute is used for and input field for readonly which can't modified.
12) align
The align attribute is used for alingment of data in an input field.
13) autocomplete
The autocomplete attribute is used to enabled the autocomplete property for and input field.
14) height
The height attribute is used for the an input field to specify the height.
15) maxlength
The maxlength attribute is used to specify the maximum length of data for an input field.
16) src
The scr attribute is used to specify the url.
17) width
The width attribute is used to specify the width of an input field.


Example of value attribute

Name:  <input type="text" value="Imran">
Button:  <input type="button" value="click here">
This input attribute return the value which is set in value attribute initially.

output of above example

Name:  

Button:  

The readonly and disabled attributes

Name:  <input type="text" value="Imran" readonly>
Name:  <input type="text" value="Imran" disabled>
Syntax to make the file disabled.

output of above example

readonly:  

disabled:  

Explanation readonly and disabled

As in above example two attributes readonly and disabled are give, they can be used in any form. These attributes are used to prevent the user from selection.If you want to changed the disabled form's functionalities then its is only possible by script.While readonly attribute is used to prevent the users from changing the values in the input field in the given form.

The size attribute

fname: <input type="text" size="10">
lname: <input type="text" value="click here" size="20">
size attribute used to give a with to input field which will be shown in the browser.

output of above example

fname:
input field with size 10.

lname:  
input field with size 20.

The placeholder attribute

fname: <input type="text" placeholder="name">
password: <input type="password" placeholder="password" ">
placeholder is value which is shown in the input field which is used as a hint for the user to fill it.

output of above example

fname:
input field with placeholder

password:  
input field with password

The required attribute

name: <input type="text" placeholder="name" required>
password: <input type="password" placeholder="password" required>
required attribute is just like a condition or validation to the form to prevent users from submitting the form having any one field empty.

output of above example

name:  

pass:   










The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


ads