New Form Elements – Part 1

In this session we will be learning new form elements, input types and different functionality that come to forms in HTML5.

• What’s new in HTML5:
• New input types.
• New Tags.
• New list elements.
• New Input Types:
• HTML5 has several new input types such as:
  Color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week etc.
• Some browsers might not be able to render the new types yet, but the good news is, you can still use them. They will just be read as standard text input.
• New input field types:
1. Email:
• The new email input type allows the form to validate the email address format without the use of Javascript.
• To check a proper email address format you need to use javascript or any other server side processing language, but using email input tag there is no need of javascript for such validations.
• Usage is shown below:

<input type=”email” name=”email”>

2. Color:
• Color input field allows you to select a color from a color picker.
• Usage is shown below:

<input type=”color” name=”favcolor”>

3. Date:
• Date input field shows a popup calendar and allows the user to select a date.
• Usage is shown below:

<input type=”date” name=”bday”>

4. Range:
• Range input field gives us a control for entering a number whose exact value is not important(like a slider control).
• You can have a slider which goes between the given range.
• Usage is shown below:

<input type=”range” name=”points” min=”1” max=”10”>

• Here, “min” and “max” are the input tag attributes which specify the minimum and maximum value for the input type “range“.
5. Tel:
• Tel is used to define a field for entering a telephone number.
• If the telephone number entered in “tel” input field is not valid, you will get a pop up giving a message.
• Usage is shown below:

<input type=”tel” name=”usrtel”> 

6. Time:
• Time input field is used to define a field for entering time.
• It is same a “date” input field.
• Usage is shown below:

<input type=”time” name=”usrtime”>

7. Url:
• url input field is used to define a field for entering a url/link.
• If you go through the field, you will have a message that pop’s up.
• Usage is shown below:

<input type=”url” name=”homepage”>

• New Form Elements:
1. Datalist:
• Datalist specifies a list of pre-defined options for an input element.
• It provides an autocomplete feature on input elements. Users will see a drop-down list of pre-defined options as they input data.
• You can use the input elements “list” attribute to bind it together with a datalist element.
• Example of datalist is given below:

<input list=”Browsers”> 
<datalist id=”Browsers”>
 <option value=”Internet Explorer”>
 <option value=”Firefox”>
 <option value=”Chrome”>
 <option value=”Opera”>
 <option value=”Safari”>
</datalist>

2. Keygen:
• Keygen is an advanced feature of HTML5.
• It provides a secure way to authenticate users.
• The keygen tag specifies a key-pair generator field in a form.
• When the form is submitted, two keys are generated, one private and one public.
• The private key is stored locally and the public key is send to the server.
• The public key could be used to generate a client certificate to authenticate the user in future.
• Example of keygen is given below:

<form action=”demo.php” method=”get”>
 User:       <input type=”text” name=”usr_name”>
 Encryption: <keygen name=”security”>
 <input type=”submit”>
</form>

3. Output:
• Now we have an output tag which performs a calculation and show the result in an output element.
• Example of output element is shown below:

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

We have learned about some of the new input elements and form elements theoretically and will see them practically in next section.