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.

Examples

<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).

Examples

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:

Examples

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