W3C introduced many new tags in the fifth version of HTML standard. As for now I will just discuss the new form tags that were introduced in this version. Keeping in view the common problems in forms that most of the web developers face, they introduced these tags. Following are the three new tags under the <form> and <input> tags.
These tags are supported by almost every browser except Internet Explorer. These tags support all the global attributes and event attributes in HTML.
1. The <datalist> Tag
The <datalist> tag is used where you want to provide a predefined options for a list type of <input> element. It is also used to provide an “autocomplete” feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data. To use this tag you have to use the <input> element’s list attribute to bind it together with a <datalist> element. To declare an option you just have to use an <option> tag inside the <datalist> and set its value attribute. As shown in the example below.
<option value=”Internet Explorer”>
With Autocomplete List
2. The <output> Tag
The <output> tag represents the result of a calculation. As shown in the example below. It has three attributes.
name: Specifies the relationship between the result of the calculation, and the elements used in the calculation
for: Specifies one or more forms the output element belongs to
form: Specifies a name for the output element
<input type=”range” id=”a” value=”50″>100
+<input type=”number” id=”b” value=”50″>
=<output name=”x” for=”a b”></output>
3. The <keygen> Tag
The <keygen> tag is used for encryption. It specifies a key-pair generator field used for forms.
When the form is submitted, the private key is stored locally, and the public key is sent to the server.
It has the following attributes.
autofocus: Specifies that a <keygen> element should automatically get focus when the page loads
challenge: Specifies that the value of the <keygen> element should be challenged when submitted
form: Specifies one or more forms the <keygen> element belongs to
keytype: Specifies the security algorithm of the key
name: Defines a name for the <keygen> element
disabled: Specifies that a <keygen> element should be disabled
<form action=”demo_keygen.asp” method=”get”>
Username: <input type=”text” name=”usr_name”>
Encryption: <keygen name=”security”>