HTML5 form element

HTML5 form element

HTML5 new form element

HTML5 has the following new form elements:

• <datalist>
• <keygen>
• <output>

Note: Not all browsers support HTML5 new form elements, but you can use them, and even if the browser does not support form properties, they can still appear as regular form elements.

HTML5 . . . . datalist . . elements

The element specifies a list of options for the input domain.

The properties specify that the form or input domain should have auto-completion. When the user starts typing in the auto-completion domain, the browser should display the options to fill in in the domain:

Use the list properties of the element to bind to the element.

The elements use predefined values:

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Try it out . . .

HTML5 - lt;keygen

The function of the element is to provide a reliable way to authenticate the user.

The label specifies the key pair generator field used for the form.

When the form is submitted, two keys are generated, one private key and one public key.

The private key is stored on the client and the public key is sent to the server. The public key can be used to later validate the user's client certificate.

Form with keygen field:

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

Try it out . . .

HTML5 . . .

The element is used for different types of output, such as computational or script output:

The results of the calculation are displayed in the element of the slt;output:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

Try it out . . .

HTML5 new form element

You can learn more about HTML5 form elements by clicking on the links in the table above!