HTML5 3-Understanding HTML5

Document directory

• Introduction
• HTML5 new form tag
• New attribute of HTML5 form
• Comprehensive instance
• Summary

Introduction

In the previous HTML form tags, some functions are not well supported, such as text box prompts (previously, only JavaScript and input events can be used in combination) form Verification, date Selection control, Color Selection control, range control, progress bar, Tag Cross-form, and other functions. Of course, we can use JS and DOM elements to implement these general functions. These functions or tags have been widely used in modern web applications, and these public things were not directly supported by HTML standards in the early days. In HTML5, the new standard can directly add these common basic functions to the new form tag, and truly make the form function exceptionally powerful. Let's take a tour of HTML5 smart forms!

The latest operabrowser provides the most perfect support for new forms. Therefore, we recommend that you open this blog or the following example in operabrowser.

HTML5 new form tag

Many input controls are added to the new standard, such as number, URL, email, range, and color. They all come out with the type attribute of the input tag. I will give a brief introduction here.[Use operabrowser to view all of the following examples] 

1) only numbers can be input.

The HTML code is: <input type = "Number" name = "demonumber" min = "1" max = "100" step = "2"/>

Running effect:

Note: This label is actually a common input label, but the type points to the number. It identifies the current tag to accept the number type input. Four additional attributes are added.

Name: Attributes are used to identify the key value when a form is submitted.

Min: Is the minimum value that is input in the current input box for the newly added attribute of the form tag.

Max: That is the maximum value.

Step: Indicates the step size, that is, the step size for increasing or decreasing the number of clicks.

Summary: Min, Max, and step are new attributes added to the form tag. In addition, the type adds a new number type, which accepts numbers. Previously, we had to achieve this effect only by judging when JS loses focus, which is not so convenient to control. Now everything is so simple and concise.

2) Input tags of the new email type

HTML code: <input type = "email" name = "email" Placeholder = "Enter your registered email address"/>

Running effect:

Note: In the preceding HTML code, compared with the previous tag, the difference: TYPE = "email" indicates that the current input tag accepts input from a mailbox. In addition, placeholder = "Please enter the registered email address". I believe that you will be very excited when you see the effect at this time, and you will be very excited before implementing this prompt, you need to listen to the Blur event of the text box, and then judge whether it is empty. If it is empty, assign a gray font to the text box. Now you only need to specify a simple attribute, browsers help us achieve this.

Summary: Before the form is submitted, this text box automatically verifies whether it meets the regular expression of the mailbox. In addition, the placeholder attribute provides a powerful prompt information function.

3) Input tags of the new URL type

I will not go into details here. It is similar to the input tag of the email type. Let's just look at the effect:

HTML code: <input type = "url" Placeholder = "Enter the URL" name = "url"/>

Running effect:

4) New Tel type input tag

HTML code: <input type = "tel" Placeholder = "input phone" name = "phone"/>

Running effect:

5) New range type input tag

HTML code: <input type = "range" min = "0" max = "50" step = "5" name = "rangedemo" value = "0"/>

Running effect:

The addition of tags of this type makes data within the input range very simple and easy, and the user input experience is very good. In addition, this tag can be used with the newly added output tag of the form to achieve a linkage effect. Check the demo source code:

?

1234	<form action="" method="POST" id="form1">        <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />        <output onforminput="value=rangedemo.value">0</output> </form>

Running effect:

6) new input tags for date, time, month, and week

I believe that if you have developed related web projects, you will certainly encounter related JS date controls. And a series of version problems, such as inconvenient use, will never go forever, because... Take a look at the following labels:

HTML code: <input type = "date" name = "datedemo"/>

Running effect:

Other types include month, time, week, datetime-local, and datetime. Try it out.

7) color selection input tag

It is still a little difficult to implement the color selector, and now everything is so simple. Check the Code:

HTML code: <input type = "color"/>

Running effect:

8) the input tag automatically completes the function.

If you have some development experience, you must have completed the related Automatic completion or input the prompt function. This is no longer so complicated. You can use a few labels to automatically implement this function. See the following demo:

?

123456

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" /><datalist id="autoNames">       <optionvalue="Yunlong Tianjing" ></option>       <optionvalue="Houde it" ></option>       <optionvalue="Flydragon" ></option></datalist>

Execution result:

New attribute of HTML5 form

New special attribute of the input tag

• 1) autofocus attributes

Demo: <input type = "text" autofocus = "autofocus"/> This attribute can be used to set the focus after the input tag on the current page is loaded.

• 2) Max, Min, and step are all related to numbers.
• 3) placeholder: displays the information property with a demo on it.
• 4) Multiple: Used for the file upload control. After this attribute is set, multiple files can be uploaded.
• 5) Check attribute: setting the required attribute indicates that the current text box must have data input before submission, which is automatically completed by the browser.

This is as good as JQ validate. In addition, the Regular Expression Pattern validation is added.

Demo: input type = "text" autofocus = "autofocus" required pattern = "\ D +"/>

• 6) Another major improvement is to add the form attribute. That is to say, any label can specify that it belongs to a form, instead of being wrapped in <form> </form>.
• See Demo: <input type = "text" form = "demoform" name = "Demo"/>

New Attributes added to Form labels

• 1) The novalidate attribute specifies that form or input fields should not be verified when a form is submitted.

Demo:<form action="" method="POST" novalidate="true"></form>

• 2) the autocomplete attribute specifies that the form or input field should have the automatic completion function.。
  

Comprehensive instances?

1234567891011121314151617181920

<fieldset>    <legend> Only form demos are allowed: use the latest Opera Browser </legend>    <form action="" method="POST" id="form1">        <input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="Required test" />        <input type="number" name="demoNumber" min="1" max="100" step="2" />        <input type="email" placeholder="Enter your email address" name="mail" />        <input type="url" name="url" placeholder="Enter the correct URL" />        <br />        Date: <input type="datetime" name="time" />        Color:        <input type="color" name="color" /><br />        <br />        <input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />        <output onforminput="value=rangedemo.value">0</output>        <br />        <input type="submit" value="Submit Form" />    </form>    Input label outside the form:    <input type="text" form="form1" name="demo" /></fieldset>

Execution result: 

Because some attributes cannot be submitted to the blog garden background normally, add the source code to the previous image:

Image:

 

Actual running status:

Only form demonstration allowed: use the latest Opera Browser

Input label outside the form:

Summary

Many exciting features are added to the new forms. In fact, the progress is not very big, but it is just to add the commonly used functions to the standard to define, and then the browser helps us implement a lot of features we originally needed to implement with Js. But for developers, this is indeed a good thing.