The HTML5 input Tag
For web pages wherein it is necessary for the user to add some details, the HTML5 <input> tag is very important. There are web pages which allow the person browsing it to provide necessary details. In such cases, the HTML5 <input> tag is placed so that the field where the additional information can be typed is determined.
It has to be noted that the use of HTML5 <input> tag has to be in tandem with the <form> element. By doing this, the input controls will be utilized by the user.
The author of the document can put multitude of variations with the use of HTML5 <input> tag. This is a positive thing since different authors need varying information from web users.
When it comes to comparison of HTML4.01 and HTML5, the main difference in use of <input> tag is the way formatting and style is done. For HTML4.01, the align attribute can still be used. On the other hand, this is no longer applicable for HTML5 since CSS is used for adding style.
The HTML5 <input> tag has to be further defined by the author because this is an empty element. This means that it only contains attributes and nothing more. If it is necessary to add name to the <input> elements, the <label> element should be added by the author.
The HTML5 <input> tag is compatible with both the Global Attributes and event Attributes in HTML5. Aside from these there are also a lot of attributes which work with the HTML5 <input> tag. Some are new while others have long been used in HTML4.01 and were adapted in HTML5. Here are the attributes and the description for each:
|
Attribute |
Value |
Description |
|
accept |
audio/* |
It indicates the various kinds of files that are considered acceptable for the server but this is only for type="file" |
|
alt |
text |
It determines the text which can serve as an alternate data for the image but this is only for type="image" |
|
autocomplete |
on |
If it is necessary to add autocomplete feature for the <input> element, this should be added within the HTML document |
|
autofocus |
autofocus |
Adding this allows the web page to have autofocus on the <input> element the moment the user loads the web page |
|
checked |
checked |
This is the key in specifying that it is necessary to select the <input> element when users access the web page. It has to be noted thought that this is for type="checkbox" or type="radio" |
|
disabled |
disabled |
This is used when disabling the functions of the <input> |
|
Form |
form_id |
If there is one or more forms that the <input> element has to be included, this is utilized |
|
Formaction |
URL |
Determines the URL for the file which will be responsible for processing the data that are placed on the <input> element once the user has already clicked on the submit button. This is for type="submit" and type="image") |
|
Formenctype |
application/x-www-form-urlencoded |
This provides details regarding the way that the form-data is encoded once the data from the user is submitted to the server. It is for type="submit" and type="image" |
|
Formmethod |
get |
It is necessary in specifying the HTTP method when it comes to sending data to the action URL. It is for type="submit" and type="image" |
|
Formnovalidate |
formnovalidate |
It is used in specifying that the form elements should not be validated once the data from the user is submitted |
|
Formtarget |
_blank |
This points out to the spot where the response should appear. This has to be seen by the user after submitting the necessary information. It is for type="submit" and type="image" |
|
Height |
pixels |
It allows the author to determine the height of the <input> element but this is solely for type="image" |
|
List |
datalist_id |
This points out to the <datalist> element which holds the pre-set options that can be utilized along with the <input> element |
|
Max |
number |
This sets the maximum value for the <input> element |
|
maxlength |
number |
This sets the maximum number of characters that can be placed in an <input> element |
|
min |
number |
This sets the minimum value for the <input> element |
|
Multiple |
multiple |
It allows the user to put more than a single value within the <input> element |
|
name |
text |
It is used for providing a name for the <input> element |
|
pattern |
regexp |
It determines the common expression to which the <input> element's value is compared to |
|
placeholder |
text |
This provides a hint as to what value or information should be placed in the <input> element |
|
readonly |
readonly |
This provides information that the input field is read-only |
|
required |
required |
This allows user to know that answering the particular input field is necessary before the form can be submitted |
|
size |
number |
It is used in determining the width of an <input> element in characters |
|
src |
URL |
It is used in setting the URL of the image that will be used as a submit button. This is what the users can click. It is applicable only for type="image" |
|
step |
number |
This determines the legal number intervals for a particular input field |
|
type |
button |
This determines the type <input> element that will be displayed |
|
value |
text |
It sets the value for the <input> element |
|
width |
pixels |
This is mainly used for specifying the width of an <input> element but it is only for type="image" |