HTML5 Forms
HTML5 New Input Types
HTML5 has a number of new form input types. These new features provide better input control and validation:
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Input Type - email
type of email should contain input fields for the email address.
When the form is submitted, it will automatically verify the value of the email field.
E-mail: <input type="email" name="user_email" />
Input Type - url
url type is used for input fields should contain a URL address.
When the form is submitted, it will automatically verify the value of the url field.
Homepage: <input type="url" name="user_url" />
Input Type - number
Type number input field should contain a value.
You can also set the limit for acceptable numbers:
Points: <input type="number" name="points" min="1" max="10" />
Please use the following property to a predetermined number of types defined:
| Attributes | value | description |
|---|---|---|
| max | number | The maximum allowed by regulations |
| me | number | The minimum allowed by regulations |
| step | number | Lawfully number intervals (if step = "3", the legal numbers -3,0,3,6 etc.) |
| value | number | The default value specified |
Input Type - range
range for the type of the input field should contain a range of digital values.
range type is shown as a slide bar.
You can also set the limit for acceptable numbers:
<input type="range" name="points" min="1" max="10" />
Please use the following property to a predetermined number of types defined:
| Attributes | value | description |
|---|---|---|
| max | number | The maximum allowed by regulations |
| me | number | The minimum allowed by regulations |
| step | number | Lawfully number intervals (if step = "3", the legal numbers -3,0,3,6 etc.) |
| value | number | The default value specified |
Input Type - Date Pickers (date picker)
HTML5 has a new input types for selecting multiple dates and times:
- date - select day, month, year
- month - Select the month, year
- week - Week and selected in
- time - Select the time (hour and minute)
- datetime - Select the time, day, month, year (UTC time)
- datetime-local - to select the time, date, month, year (local time)
The following example allows you to select a date from the calendar:
Date: <input type="date" name="user_date" />
Input type - search
search for the type of search domains, such as site search or Google search.
search field as regular text field.
The new HTML5 form elements
HTML5 has a number of forms involved elements and attributes.
- datalist
- keygen
- output
datalist element
datalist element specifies a list of options input field.
Option list is by elements inside the datalist created.
For the datalist bound to the input field, use the input field list of property references id datalist:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
keygen element
Keygen element acting to provide a reliable way to verify the user.
keygen element is a key pair generator (key-pair generator). When the form is submitted, it generates two keys, a private key, a public key.
Private key (private key) is stored in the client, public key (public key) were sent to the server. The public key can be used to verify the user after the client certificate (client certificate).
Currently, browser support for this bad element is not sufficient to make it a useful safety standards.
<form action="demo_form.php" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
output element
The output element for different types of output, such as calculation or script output:
<output id="result" onforminput="resCalc()"></output>
HTML5 New Form Properties
The new form properties:
- autocomplete
- novalidate
New input attributes:
- autocomplete
- autofocus
- form
- form overrides (form action, formenctype, form method, formnovalidate, form target)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
autocomplete attribute
autocomplete attribute specifies that the form or input field should have autocomplete.
** Notes: ** autocomplete apply to <form>labels, as well as the following types of <input>tags: text, search, url, telephone , email, password, datepickers, range and color.
When a user starts typing in the autocomplete field, the browser should display options to fill in the field:
<form action="demo_form.php" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
** Note: ** In some browsers, you may need to enable auto-complete feature to pick up the property.
The autofocus attribute
The autofocus attribute specified when the page loads, the domain automatically focus.
** Notes: ** autofocus attribute applies to all <input>types of labels.
User name: <input type="text" name="user_name" autofocus="autofocus" />
form attributes
attribute specifies a form input field belongs to one or more forms.
** Notes: ** form property applies to all <input>types of labels.
The form attribute must refer to the form owner's id:
<form action="demo_form.php" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
** Note: ** refer to more than one form, use a space-separated list.
Form rewrite property
Form rewrite property (form override attributes) allows you to override some of the attributes set for the form element.
Form rewrite attributes are:
- formaction - Overrides the form action attribute
- formenctype - Overrides the form enctype attribute
- formmethod - Overrides the form method attribute
- formnovalidate - Overrides the form of property novalidate
- formtarget - Overrides the form target attribute
** Note: ** Form rewrite properties apply to the following types of <input>labels: submit and image.
<form action="demo_form.php" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.php" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
** Note: ** These attributes submit button is useful for creating different.
height and width attributes
The height and width attributes for predetermined image height and width of the image of the input type.
** Notes: ** height and width properties only apply to the type of image <input>labels.
<input type="image" src="img_submit.gif" width="99" height="99" />
property list
The list attribute datalist predetermined input field. datalist input field is a list of options.
** Notes: ** list properties apply to the following types of <input>tags: text, search, url, telephone , email, date pickers, number, range and color.
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="tencent" value="http://www.qq.com" />
<option label="alibaba" value="http://www.alibaba.com" />
</datalist>
min, max, and step attributes
min, max, and step attributes for defining (constraint) of input types contain numbers or dates.
max attribute specifies the maximum allowed input field.
min attribute specifies the minimum value allowed for the input field.
The step attribute specifies the legal number input field interval (if step = "3", the legal numbers -3,0,3,6 etc.).
** Note: ** min, max, and step attributes for the following types of <input>tags: date pickers, number and range.
The following example shows a numeric field, the field accepts a value between 0 and 10, with a step 3 (legal numbers 0,3,6 and 9):
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple properties
a plurality of selectable predetermined multiple attribute value input field.
** Notes: ** multiple properties apply to the following types <input>: email, and file.
Select images: <input type="file" name="img" multiple="multiple" />
novalidate property
novalidate property provisions should not validate form input fields or when submitting the form.
** Notes: ** novalidate property applies to <form>and the following types of <input>tags: text, search, url, telephone , email, password, date pickers, range and color.
<form action="demo_form.php" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
The pattern attribute
attribute pattern for verifying a predetermined input field pattern (pattern).
Mode (pattern) is a regular expression.
** Notes: ** pattern properties apply to the following types of <input>tags: text, search, url, telephone , email and password.
The following example shows a three-letter containing only text field (no numbers or special characters):
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
The placeholder attribute
placeholder attribute provides a hint (hint), describe the expected value of the input field.
** Notes: ** placeholder properties apply to the following types of <input>tags: text, search, url, telephone , email and password.
Tip (hint) is displayed in the input field is empty appears, disappears when the field gets focus:
<input type="search" name="user_search" placeholder="Search" />
required attributes
required attribute specifies that an input field must be filled (not empty) before submitting.
** Notes: ** required attributes for the following types of <input>tags: text, search, url, telephone , email, password, date pickers, number, checkbox, radio and file.
Name: <input type="text" name="usr_name" required="required" />
HTML5 Global Properties
Added HTML5 properties.
| Attributes | description |
|---|---|
contenteditable |
Whether the provisions of element content can be edited. |
contextmenu |
The provisions of the context menu elements. Context menu displayed when the user clicks on the element. |
data-* |
Data storage for private custom page or application. |
draggable |
Whether the provisions of the element can be dragged. |
dropzone |
Specifies whether to copy, move, or link when you drag the data being dragged. |
hidden |
Not yet or no longer relevant provisions of the elements. |
spellcheck |
Whether the provisions of the elements of spelling and grammar check. |
translate |
Whether provisions should be translated element content. |
HTML5 Events
Event Properties window
Window object for the event triggered (applied to the <body>label):
| Attributes | value | description |
|---|---|---|
| onafterprint | script | Scripts that run after document printing. |
| onbeforeprint | script | The script runs before the document is printed. |
| onbeforeunload | script | Documents uninstall script to run before. |
| onerror | script | Scripts that run when an error occurs. |
| onhaschange | script | When the script runs when the document has changed. |
| onmessage | script | Scripts that run when the message is triggered. |
| onoffline | script | When the script runs when the document offline. |
| ononline | script | When the script runs when the document is on the line. |
| onpagehide | script | When the script runs when the window is hidden. |
| onpageshow | script | When the script runs when the window becomes visible. |
| onpopstate | script | When the script window to change the history of running. |
| onredo | script | When the document execution undo (redo) to run the script. |
| onstorage | script | Scripts that run Web Storage area after the update. |
| onundo | script | In the scripts that run when the document undo execution. |
Form events
The event action triggered in the HTML form (applied to almost any HTML element, but the most common element in the form):
| Attributes | value | description |
|---|---|---|
| OnContextMenu | script | When the scripts that run when the context menu is triggered. |
| onformchange | script | Scripts that run when the form is changed. |
| onforminput | script | When the form to get a script to run when the user input. |
| oninvalid | script | Scripts that run when invalid element when. |
Mouse events
Triggered by a mouse or similar user action events:
| Attributes | value | description |
|---|---|---|
| ondrag | script | Elements are scripts that run when you drag. |
| ondragend | script | The end of the script running in the drag operation. |
| ondragenter | script | When the elements of an effective element has been dragged to drag the script to run when area. |
| ondragleave | script | When the elements left scripts that run when a valid drop target. |
| ondragover | script | When the script element being dragged on the effective operation of the drop target. |
| ondragstart | script | The script began running in the drag operation. |
| ondrop | script | When the script is being dragged element drag and drop operation. |
| onmousewheel | script | When the mouse wheel to scroll being run scripts. |
| onscroll | script | When the script is run when the rolling element scroll bar. |
Media Event
By the event media (such as video, images and audio) triggered (applies to all HTML elements, but common in the media element, such as <audio>, <embed>, <img>, <object>and <video>):
| Attributes | value | description |
|---|---|---|
| oncanplay | script | When the script file is ready to start playing run (at the beginning of the buffer is sufficient). |
| oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 |
| ondurationchange | script | 当媒介长度改变时运行的脚本。 |
| onemptied | script | 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 |
| onended | script | 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 |
| onerror | script | 当在文件加载期间发生错误时运行的脚本。 |
| onloadeddata | script | 当媒介数据已加载时运行的脚本。 |
| onloadedmetadata | script | 当元数据（比如分辨率和时长）被加载时运行的脚本。 |
| onloadstart | script | 在文件开始加载且未实际加载任何数据前运行的脚本。 |
| onpause | script | 当媒介被用户或程序暂停时运行的脚本。 |
| onplay | script | 当媒介已就绪可以开始播放时运行的脚本。 |
| onplaying | script | 当媒介已开始播放时运行的脚本。 |
| onprogress | script | 当浏览器正在获取媒介数据时运行的脚本。 |
| onratechange | script | 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 |
| onreadystatechange | script | 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 |
| onseeked | script | 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 |
| onseeking | script | 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 |
| onstalled | script | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 |
| onsuspend | script | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 |
| ontimeupdate | script | 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 |
| onvolumechange | script | 每当音量改变时（包括将音量设置为静音）时运行的脚本。 |
| onwaiting | script | 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本 |
