New Form Elements in HTML5

Introduction

In this article, we are going to see the new HTML5 form elements. HTML5 Offers us various types of new form elements. These elements enhanced the functionality of HTML. We can use HTML5 form tags to get more and advanced productivity. In this article, we will see two types of HTML5 form elements that are introduced in HTML5.

Follow These Steps:

Step1:

Open the Visual Studio 2010
Go File Menu->>New->>Website
Choose Empty Website

Step2:

Go to Solution Explorer
Right-click on the application name
Select New Item
Choose HTML Page

Datalist Element

A Datalist is a new form element in HTML5. This element can be used in conjunction with the <option> elements of HTML5. We have to give the value of the datalist using an option element. Datalist elements provide an auto-complete feature on our web page. Users will see a drop-down list of pre-defined options as they input data. When we type the word in the textbox, this will display the suggested words that match the entered word from the option values. To define a Datalist element we can use a <datalist> tag with its option value. The <datalist> tag is currently only supported in Firefox and Opera browsers.

Example: In this example, we define a datalist element and also give the value of datalist elements with a <option> tag of HTML5.

Here is Code:

<html>
<body>
<form>
<input list="names" name="name" />
<datalist id="names">
<option value="Gaurav Gupta">
<option value="Tarun Aggarwal">
<option value="Kishan Singh">
<option value="Kuldeep">
<option value="Kamal">
<option value="Girish">
<option value="Toni">
</datalist>
</form>
</body>
</html>

Output:

Output Element

The Output element is also a new form element tag in HTML5. It is used to show the result of any calculation that is performed on the page. It works like a script that performs some calculation on the given data. The Output element also performs the calculation and shows the result of that calculation. The Output tag is supported by all the major browsers Opera, Firefox and Chrome but not yet in Internet Explorer. To use the Output form element in our page, we have specified the type of calculation to be performed on the data. The <output> tag is used for this purpose.

There are mainly 3 types of element-specific attributes that must be used with the output element.

For: It creates the relationship between the elements, that are used in the calculation.
Form: It specifies the form identity for which Output elements belong to.
Name: It sets the name for the Output element on which the calculation will be performed.

Example: In this example, we use two textboxes for entering values and performs a subtraction operation on it.

Here is Code:

<html>
<body>
<h1>Example of Output Element</h1>
<form
oninput="p.value=parseInt(l.value)-parseInt(m.value)">
Enter the First Value<input type="range" name="l" />
- Enter the Second Value<input type="number" name="m" />
=<output name="p" for="l m"></output>
</form>
</body>
</html>

Output: