Posts in current category

HTML5 form element


May 03, 2021 13:05 HTML5


Table of contents


HTML5 form element


HTML5 new form element

HTML5 has the following new form elements:

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.

HTML5 form element HTML5 form element HTML5 form element HTML5 form element HTML5 form 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.

HTML5 form element HTML5 form element HTML5 form element HTML5 form element HTML5 form element

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:

HTML5 form element HTML5 form element HTML5 form element HTML5 form element HTML5 form element

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

标签 描述
<datalist> <input>标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> <keygen> 标签规定用于表单的密钥对生成器字段。
<output> <output> 标签定义不同类型的输出,比如脚本的输出。

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