Mobile Web Wearable Web

HTML5 Forms

The HTML5 forms provide a convenient way to create consistent screens in your application for accepting user input. In the past, the Web form allowed you to accept user input before transmitting it to a server. With HTML5, you can now improve the user experience without having to use JavaScript by adding simple features, for example, email validity checks and date pickers, and using more advanced functionality, such as security checks and input value pattern definitions.

New HTML5 Elements

The following table lists the new elements available for your forms in HTML5. For a complete source code, see elements.html.

Table: New HTML5 elements
Element Description Example
datalist

Defines a set of option elements that represent predefined options for other controls. The element is used together with the input element to predefine its value.

In Tizen, the value selected in the datalist element can be edited.

<input type="text" list="search">
<datalist id="search">
   <option value="Tomato">Tomato</option>
   <option value="banana">banana</option>
   <option value="Watermelon">Watermelon</option>
</datalist>
keygen

Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the name attribute, saves it in the user's computer and Web server, and activates the next procedure when the 2 values match.

<label>user:<input type="text" name="user_name"></label>
<label>keygen:<keygen name="keygen"></label>
meter

Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.

<meter value="75" min="0" max="100" low="60" high="80" optimum="81">
   75/100
</meter>
output

Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the form element.

<fieldset onsubmit="return false"
          oninput="foobar.value = parseInt(foo.value) * parseInt(bar.value)">
   <input type="number" id="foo" name="foo"> *
   <input type="number" id="bar" name="bar"> =
   <output for="foo bar" name="foobar"></output>
</fieldset>
progress

Represents the progress of a task.

<progress value="75" max="100">
   75/100
</progress>

New Input Element Types

The following table lists the new input element types available for your forms in HTML5. Many of the new elements activate a specific keyboard suitable for the type of value the user is expected to enter (for example, an email or URL). For a complete source code, see types.html.

Table: New input element types
Type Description Example
color

Select an HSL color from the color picker. The value format is HEX (#0099ff).

<input type="color"
       value="#ff0000">
<input type="datetime"
       value="2012-12-12T03:30Z">
<input type="email"
       required>
<input type="number"
       step="3">
<input type="range"
       min="1" max="10">
<input type="tel">
<input type="url">
date

Enter a date with no time zone (yyyy-mm-dd).

datetime

Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ).

datetime-local

Enter a date and time with no time zone (yyyy-mm-ddTtt:mm).

email

Enter an email address with the email keyboard.

If the required attribute is used, the system checks whether the input format is in line with the ABNF regular expression (1*(atext / ".") "@" ldh-str 1*("." ldh-str)).

month

Enter a year and month with no time zone (yyyy-mm).

number

Enter numbers with the number keyboard.

range

Select a value from the slider.

search

No specific functionality is defined for this element in the HTML5 specifications.

tel

Enter a phone number with the number keyboard.

time

Enter a time with no time zone (tt:mm:ss).

url

Enter a URL with the URL keyboard.

week

Enter a year and week with no time zone (yyyy-week).

New Input Element Attributes

The following table lists the new input element attributes available for your forms in HTML5. For a complete source code, see attributes.html.

Table: New input element attributes
Attribute Description Example
autocomplete

Prefilling feature, which helps the users by, for example, prefilling the user's address based on earlier user input.

The text used by the user before (such as an input element) is listed in a datalist form. The attribute can be used in all form elements, and is activated if the value is "on" and deactivated if the value is "off".

<input type="range" min="1" max="10">
<input type="tel" pattern="[0-9]+" required>
<input placeholder="You know what to do, huh?">
<input type="number" step="3">
min and max

Allowed range of values for the element.

pattern

Regular expression against which the control's value is checked.

The attribute can be used to check the validity of the form data. During service, a guide requiring the input format from the user is necessary.

placeholder

Short hint intended to aid the user with the data entry.

The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement.

required

Boolean attribute which, when specified, defines that the element is mandatory.

step

Granularity expected of the value, limiting the allowed values.

Go to top