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