Search within TutorialsPark

HTML5 Form Elements 2.0

HTMl5 offers several new for for form elements

Form Element List

New HTML5 specifications added a few Form elements in addition to existing form elements.

The following are the new webform Elements2.0.

Keygen(crytpographic keys)

Calculation(with output).

Progress bar.

Meter Measurement.



What's your email :

1. HTML5 keygen is used to create cryptographic keys.A pair of Private Key and Public Key are which are used in web-based certification for secure transactions.

2. Public key is send to the server while private key is saved by the browser in user's key store.

3. The Public and Private keys enable the browser to communicate with the server without SSL Encryption.

Note:Browser support is very uncertain for this element. Internet Explorer(Microsoft) has no intention to support Keygen.

Keygen Example

Give it a TRY! »


Divider / =

1.The output element is used for performing mathematical calculations and generating the output.

2.The calculations are performed on the input fields displayed on webpage.

3.The for attribute is used to specify the fields involved in the calculation.

Output Example

Give it a TRY! »

Progress Bar


1. The progress element is used to denote the gradual completion progress of a Task.

2. Its used to track progress of a multipage form or other multistage tasks.

3. It has two attributes max and value, max is final limit of the task whereas value is the task completed relative to total task.

4. Javascript can be used to control the value of progress bar.

Note: All attributes are optional,and the max value should be non-zero.

Syntax :

Example: Progress Bar.

Give it a TRY! »

Meter(Gauge) Element

My Internet speed is 189 mbps 189 mbps. My car speed is 100 kmph

1.The meter element is used to display a specific value within a known range.It looks similar to progress element but there are semantic differences.

2.The attributes min and max define the minimum and maximum,and value attribute defines the current value.

3.The attributes optimum,low and high segment the range into defined sections.

Note: All attributes except value are optional.

Syntax :

Example Radio.

Give it a TRY! »


Select your favourite car brand:

1.Select element lets you create a list of options to select from.Its a cooler alternative to Radiobuttons or checkboxes.

2.Various form attributes like disabled,selected,value,label can be applied to it.However, all attributes are optional in this element.

Note: All attributes are optional.

Syntax :

Select Menu Example.

Give it a TRY! »

Optgroup menu.

Top World Economies:

1. Optgroup element is used to divide the options within different labels.It creates a kind of a Submenu within main menu.

2. The optgroup label cannot be selected as an option.Additionally, using disabled attribute whole group of options can be disabled.

Note: All attributes are optional.

Syntax :

Select Menu Example.

Give it a TRY! »