Latest web development tutorials

HTML5 form elements

The new HTML5 form elements

The following new HTML5 form elements:

  • <Datalist>
  • <Keygen>
  • <Output>

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

HTML5 <datalist> element

<Datalist> element specifies a list of input field options.

<Datalist> attribute specifies the form or input field should have autocomplete. When users start typing in the autocomplete field, the browser should display options to fill in this field:

Use <input> element of a list of attributes and <datalist> element binding.

OperaSafariChromeFirefoxInternet Explorer


<Input> element uses the <datalist> 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"

HTML5 <keygen> element

Role <keygen> element is to provide a reliable method to authenticate a user.

<Keygen> tag is used to form a predetermined key pair generator field.

When submitting a form, it generates two keys, one private, one public.

Private key (private key) is stored in the client, public key (public key) were sent to the server. The public key can be used to authenticate the user after the client certificate (client certificate).

OperaSafariChromeFirefoxInternet Explorer


With keygen field form:

<Form action = "demo_keygen.asp" method = "get"> Username: <input type = "text" name = "usr_name"> Encryption: <keygen name = "security"> <Input type = "submit"> </ Form>

try it"

HTML5 <output> element

<Output> element is used for different types of output, such as calculations or script output:

OperaSafariChromeFirefoxInternet Explorer


The results appear in the <output> element:

<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 = "ab"> </ output> </ Form>

try it"

HTML5 New Form Elements

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