Lesson 9. New html5 form elements

New HTML5 form Elements

Hey guys!! In this tutorial we will learn about the method of using the new html5 form elements: <datalist>, <keygen> and <output> in HTML5.

HTML5 Form Elements is the most widely used in web application of all types, we have tried to explain each topics in an easy way

In HTML <form> elements are used to pass data to a server and each <form></form> includes multiple sections <input> elements.


<form>Name: <input type=”text” name=”Name”><br>DOB<input type=”date” name=”date”>

<input type=”radio” name=”sex” value=”male”>Male


<input type=”radio” name=”sex” value=”female”>Female

<input type=”submit” value=”click”>



NOTE: SUBMIT button is used to send the input data to the server.


HTML5 Beginners

HTML5 Beginners

A new form elements and attributes

New form elements used inHtml5.

  • <datalist>
  • <keygen>
  • <output>

New attributes for <form> in HTML5

  • autocomplete: in this attribute AUTOCOMPLETE describes whether a form or input field have autocomplete on or off. If an autocomplete is on then the browser automatically fills up the values based on the values user has entered before.


<form action=”demo_form.asp” autocomplete=”on”>
First name:<input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
E-mail: <input type=”email” name=”email” autocomplete=”off”><br>
<input type=”submit”>


Tip: you can use autocomplete for some specific fields. There is no boundation of using it on all over the form.

  • novalidate: it is a non Boolean attribute. It specifies about the input must not be validated when submitted.
<form action=”demo_form.asp” novalidate>
E-mail: <input type=”email” name=”user_email”>
<input type=”submit”>


HTML5 <datalist> Element

The <datalist> element in HTML5 presents a list of pre-defined options for an <input> element. It is mainly used to provide an “auto-complete” drop-down feature with an <input> elements.

<!DOCTYPE html><html><body><form action=”demo_form.asp” method=”get”>

<input list=”devices” name=”devices”>

<datalist id=”devices”>

<option value=”Keyboard”>

<option value=”Mouse”>

<option value=”Monitor”>

<option value=”Ups”>

<option value=”CPU”>


<input type=”submit”>





HTML5 <keygen> Element

The <keygen> element is meant for providing security as well as it is a secure way to authenticate users. It specifies a key-value generator field in a form. Whenever the user submits the forms, two keys are generated:

  • private key: It stores the data locally.
  • public key: It sents the data to the server.

HTML5 <output> Element

The <output> meant for representing the result of different types of output, such as output written by a script.




You Might Also Like


Comments are closed.