A Form is one of the most basic and essential features of any web site. The form elements available in HTML includes several new elements and attributes like datalist, keygen, output. In this article, I will cover the new form elements of HTML 5.
HTML 5 Datalist Element
The datalist element specifies a list of options inside the datalist for an input field. Refer the list attributes of the input field to the id of the datalist to bind a datalist to an input field. Datalist element is supported by Opera 9.5.
Example
<html>
<body>
<form action="demo_form.asp" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="YahooWorld" value="http://www.yahoo.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
Output
Webpage:
HTML 5 Keygen Element
This is a secure way to authenticate the users. The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private which is stored on the client and one public is sent to the server.
In future the public key could be used to generate a client certificate to authenticate the user. Opera 10.5 and Chrome 3.0 both support the keygen element.
Example
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
Output
Username: Encryption:
HTML 5 Output Element
The output element is used for different types of output, like calculations or script output. The output element is only supported by Opera 9.5.
Example
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)*Number(numB);
}
</script>
</head>
<body>
<p>Multiplication of two numbers using the output element:</p>
<form onsubmit="return false">
<input id="num_a" /> *
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>
Output
Multiplication of two numbers using the output element:
* =
Hope you have been enjoying this article from the series on HTML 5 so far