HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Form Attributes HTML5 Input Types

HTML5 Form elements

HTML5Have several elements and attributes related to forms.

HTML5 New form elements

HTML5 The following new form elements are available:

<datalist>
<keygen>
<output>

Note:Not all browsers support HTML5 A new form element, but you can use them even if the browser does not support form attributes, they can still be displayed as conventional form elements.

HTML5 The <datalist> element

The <datalist> element specifies the list of options for the input field.

<datalist> attribute specifies that the form or input field should have an autocomplete feature. When the user starts typing in the autocomplete field, the browser should display the filled options in the field:

The list attribute of the <input> element is bound to the <datalist> element.

Online Example

The <input> element uses predefined values from <datalist>:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
　　　　
<form action="demo-form.php" method="get">
<input list="languages" name="language">
<datalist id="languages">
　　<option value="C++">
　　<option value="PHP">
　　<option value="Golang">
　　<option value="Python">
　　<option value="Ruby">
</datalist>
<input type="submit">
</form>
<p><strong>Attention:</strong>Internet Explorer　9(earlier IE versions), Safari does not support the datalist tag.</p>
</body>
</html>

Test See ‹/›

HTML5 <keygen> element

The <keygen> element provides a reliable method for verifying users.

<keygen> tag specifies the key pair generator field for the form.

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

The private key (private key) is stored on the client side, and the public key is sent to the server. The public key can be used to verify the client certificate (client certificate) later.

Online Example

Form with keygen field:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<form action="demo_form.php" method="get">
　　Username: <input type="text" name="username">
　　Encryption: <keygen name="security_keygen">
　　<input type="submit">
</form>
<p><strong>Attention:</strong>Internet Explorer does not support the keygen tag.</p>
</body>
</html>

Test See ‹/›

HTML5 <output> element

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

Online Example

Display the calculation result in the <output> element:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<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>
<p><strong>Attention:</strong> Internet Explorer does not support output tag.</p>
</body>
</html>

Test See ‹/›

Html5of the smart form

Example

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5of the smart form oldtoolbag.com</title>
</head>
<body>
<form action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Html5of the smart form</legend>
　　　　　　　　　　　　<label for="email">
　　　　　　　　　　　　　　　　email：<input type="email" name="email" id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="tel">
　　　　　　　　　　　　　　　　tel:<input type="tel" name="tel" id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="url">
　　　　　　　　　　　　　　　　url:<input type="url" name="" id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="number">
　　　　　　　　　　　　　　　　number:<input type="number" name="" id="number" step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="search">
　　　　　　　　　　　　　　　　search:<input type="search" name="" id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="range">
　　　　　　　　　　　　　　　　range:<input type="range" name="" id="range" value="60" min="0" max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="color">
　　　　　　　　　　　　　　　　color:<input type="color" name="" id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="time">
　　　　　　　　　　　　　　　　time:<input type="time" name="" id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="date">
　　　　　　　　　　　　　　　　date:<input type="date" name="" id="date"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="month">
　　　　　　　　　　　　　　　　month:<input type="month" name="" id="month"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="week">
　　　　　　　　　　　　　　　　week:<input type="week" name="" id="week"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<input type="submit" value="Submit"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

Test See ‹/›

HTML5 New Form Elements

Tag	Description
<datalist>	The <input> tag defines an option list. Please use this element in conjunction with the input element to define the possible values for the input.
<keygen>	The <keygen> tag specifies a key pair generator field for forms.
<output>	The <output> tag defines different types of outputs, such as script outputs.

HTML5 Form Attributes HTML5 Input Types