HTML5 Simple Entry Series (vi)

Objective

A few have already HTML5 the main new elements and characteristics of the simple introduction, LZ has been hesitant to put other elements also write out, because in fact, nothing can be written, it is their own use to look at the line. But in order to get started series complete, hesitated repeatedly, or decided to simply write some other elements (see other in-depth html5,lz do not write here, because LZ also did not master, here is an in-depth analysis of HTML5, you can see).

HTML5 new element Introduction input type

The new input type elements are:

• Email
• Url
• Number
• Range
• Date pickers (date, month, week, Time, DateTime, datetime-local)
• Search
• Color

These elements are optional values for the type attribute of the input tag, and we'll simply introduce it.

Email

E- mail: <input type="email" name="user_email"/>

In general, when the form is submitted, we need to write a complex regular expression to verify the email, the law is not allowed to submit. HTML5 the label directly can complete the calibration work, save us some work.

If we add the multiple attribute, we will allow us to use ', ' to split multiple mailboxes for verification, one that is not valid and not allowed to commit.

The type of support for the multiple property is file, allowing us to upload multiple attachments at once (you can only upload one attachment at a time without using this property).

wr.

The URL and email are basically the same, but the multiple attribute is not supported.

Number

<input type="number" min="1 " max=" step="2" value="6">

Type= "Number", which indicates that this is a numeric type of input box.

min= "1", indicating that the number entered cannot be less than 1

max= "100", indicating that the number entered cannot be greater than 100

Value= "6", indicating that the default value is 6

Step= "2", combined with the Min value, the value of the input box can only increment or decrement by 2, the default value is 1.

In addition, step indicates the accuracy of the input box (said accuracy may not be accurate), the default value (1) And example cases, is not allowed to enter a small value, to allow the input of decimals, you can change the step to 0.1,0.01, etc., so LZ called it precision.

To change the step to 0.2, the effect is as follows

Range

The range type is basically the same as number, except that the display effect is a slider bar.

Date pickers ((date, month, week, Time, DateTime, datetime-local))

There's really nothing to say ~

Week: <input type="Week" name="date" />

Search

The search input type is used for searching fields, such as in-site search or Google search. The search field looks like a regular text field.

Color

The color input type is used to specify colors. This input type allows you to select colors from the Color picker.

New Form elements

The new form elements include:

• DataList
• Keygen
• Output

DataList

The DataList element specifies a list of options for the input field, created by the option element within the DataList.

The difference between it and the select tag is that select is a visible element, and DataList is invisible by default, and it needs to be bound to an input field to show it. It saves us the work of using Input+div to implement the drop-down frame effect.

When you bind a DataList to an input field, the input field's List property references the ID of the DataList:

<input type="URL"list="url_list"Name="Link"/><datalist id="url_list"> <option label="Google"Value="http://www.google.com"/> <option label="Microsoft"Value="http://www.microsoft.com"/></datalist>

Note that the value of DataList option is required, and if it is empty, the drop-down box ignores the option.

Keygen

The keygen element is a key pair generator (Key-pair generator), currently, there are not many browsers supporting this element, and LZ did not go into the experiment, skip it.

Output

When the output element gets to the focus, triggering the Onforminput event (binding a JS event), the automatic operation. LZ local test did not see the effect ~ ~ ~ slightly disappointed.

New properties of the HTML5 new form property:

• AutoComplete
• Novalidate

The new input property:

• AutoComplete
• Autofocus
• Form
• Form overrides (FormAction, Formenctype, FormMethod, Formnovalidate, Formtarget)
• Height and width
• List
• MIN, Max and step
• Multiple
• Pattern (regexp)
• Placeholder
• Required

AutoComplete

The AutoComplete property specifies that the form or input field should have auto-complete functionality. Simple is to record the user's input box record, the next automatic reminder.

<form 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"/&GT;&LT;BR/></form>

See the effect, you know what the situation is. The AutoComplete property of the form specifies that the label elements of the package inherit the AutoComplete attribute, while the element specifically states that the priority of not using the AutoComplete attribute is higher than the inherited attribute, and the email shown in the example is not automatically alerted.

Novalidate

The Novalidate property specifies that the form or input field should not be validated when the forms are submitted.

The default checksum behavior of a label or form using the Novalidate attribute is invalidated, such as an input box with an email type that does not validate

<form novalidate="true">E-mail: <input type="email " name="user_email "/><input type="submit" /></form>

Autofocus

The Autofocus property specifies that the domain automatically receives focus when the page loads.

Form

The form property specifies one or more forms that the input domain belongs to (using a space-delimited list).

<form id="User_form">First name:<input type="text"Name="fname"/><input type="Submit"/></form>Last Name:<input type="text"Name="lname"form="User_form"/>

That is, the lname input box is an element of the form User_form and will be submitted together.

Form Overrides

The form Override property (form override attributes) allows you to override some of the property settings of a FORM element.

Form Override properties are:

• FormAction-Override the form's Action property
• Formenctype-Rewrite the Enctype property of the form
• FormMethod-Override the form's Method property
• Formnovalidate-Rewrite the Novalidate property of the form
• Formtarget-Override the target property of the form

These properties are useful for creating different submit buttons.

In the past, we used JS to replace the corresponding properties of the form before the different buttons were submitted, and the HTML5 was implemented by this property, eliminating the need to write the corresponding code.

Height and width

These two properties apply only to the input label of the image type, because in HTML5, the input tag of the image type is clicked and the click coordinates of the image are passed to the background.

List

On the top we use the List property when we are going to DataList elements, and we don't say much here.

MIN, Max and step

These three properties are mentioned in the input tag of number type. Skip over.

Multiple

said in the Input tab of the email type, skip. It also supports the input tag of the file type.

Pattern,placeholder, required

 <form> country code:  <input type= " text  "  name= " country_code  "  Pattern= " [a-z]{3}  "  Placeholder= " three letter country code  "  Span style= "color: #000000;" > required  = required   "/> <input type="  submit  Span style= "color: #800000;" > "/> </form> 

Defines a required entry with a default hint that conforms to a regular expression , to see how the effect works as follows

Other New tagsDetails & Summary

<details>
<summary>title</summary>
<p>
<input type= "text" Name= "FN" value= "Test.doc"/>
</p>
<p>
<label>
<input type= "checkbox" Name= "V" checked/>chkvalue
</label>
</p>
</details>

When you click Summary, the detail content will be expanded, with the following effects:

Meter and Progress

<p> Show Metrics:</p>
<meter value= "3" min= "0" max= "ten" low= "4" >3/10</meter><br/>
<meter value= "0.8" high= "0.6" >80%</meter><br/>
<meter value= "0.5" high= "0.8" >50%</meter><br/>

<progress value= "max=" >40%</progress>

The meter tag defines a scalar measurement within a known range or a fractal value. Also known as gauge (scale).

Examples: disk usage, correlation of query results, and so on.

Note: The meter label should not be used to indicate progress (in the progress bar). If you mark the progress bar, use the progress label.

The meter supports the High/low property, and when the current value is below low or higher than high, the display color changes to indicate a warning.

Summary

LZ saw some of the other people summarize some of the content, including some high-level content, if necessary, please visit here

So far, the basic content of the HTML5 is almost over. The current plan is to do some detailed introduction to canvas after the festival.

HTML5 Simple Entry Series (vi)