HTML5 Project NOTE 2: Offline system form Design

In this offline system, the form is undoubtedly the view part of the offline system, as the most front-end, with the customer's operation of the most closely related piece, so we need to understand the HTML5 's forms API, it has the following features:

The form still uses the form element as a container in which we can set the basic commit nature;

When a user or developer submits a page, the form is still used to send the value of the control in the form to the server side;

Follow the previous form controls and how they are used, and constantly develop and add new controls and functionality;

You can use a script to manipulate form controls;

HTML5 contains a number of new API and element types, as follows:

New input Controls:

Type	Use
Input Type=datetime	Time and date input box
Input type=datetime-local	local time and date input box
Input Type=date	Date Input Box
Input Type=month	Month input Box
Input Type=time	Time input Box
Input Type=week	Week input Box
Input Type=number	Value input Box
Input Type=tel	Phone Number Entry Box
Input Type=email	e-mail Address text box
Input Type=url	URL Address text box
Input Type=search	Used to search for text boxes
Input Type=range	A numeric selector of a specific range, displayed as a progress bar
Input Type=color	Color Picker (this is not used)

Here are a lot of these elements we will use in the Offline report form, you can copy to the Chrome browser inside to try:

Date format text box:

<p>

<label for= "Date" >date type:</label>

<input type= "Date" id= "date" ><span> see in the new Chrome </span>

</p>

Time Format text box:

<p>

<label for= "Time" >time type:</label>

<input type= "Time" id= "time" ><span> see in the new Chrome </span>

</p>

Month Format text box:

<p>

<label for= "Month" >month type:</label>

<input type= "Month" id= "month" ><span> see in the new Chrome </span>

</p>

Week Format text box:

<p>

<label for= "Week" >week type:</label>

<input type= "Week" id= "Week" ><span> see </span> in the new chrome

</p>

Phone Number Enter text box:

<p>

<label for= "Tel" >tel type:</label>

<input type= "Tel" id= "Week" ><span> see </span> in the new chrome

</p>

numeric type Enter text box:

Value refers to the initial default value, Min is the minimum value, Max is the maximum, step is increment and decrement is a value,

Or a multiple of a value, as below we are 3, so it's just 3, or a multiple of 3:

<p>

<label for= "number" >number type:</label>

<input type= "number" name= "number" id= "number" step= "3" value= "3" min= "0" max= "4" >

<span> See the </span> in the new chrome

</p>

Sliding Bar Range:

Scope: Value: Refers to the initial default value, Min is the minimum value, Max is the maximum value, step is increment and decrement is 1, this side adds a

function to display the progress bar of a range in real time:

<p>

<label for= "range" >range type:</label>

<input type= "range" id= "range" min= "1" max= "" "step=" 1 "value=" "" Onchange= "Changerange (this.value)"/>

<span id= "Showrange" ></span>

<span> Check out the new version of opera or Chrome or Safari </span>

</p>

function Changerange (rangeval) {

$ ("#ShowRange"). html (rangeval+ "%");

}

Placeholder: Default Input box description text:

Placeholder: (Placeholder refers to the default text, when the user does not enter a value, the input control can be Placeholder for descriptive instructions or hints, when the focus or input text, the Placeholder will disappear):

<input type= "text" placeholder= "description of the textbox ..."/>

Autocomplete: auto-complete

Autocomplete= "On", Function: Save input value for future use, autocomplete= "off", do not save,

Autofocus= "Autofocus": Default onboarding Focus

Email text box Email:

<p>

<label for= "Email" >email type:</label>

<input type= "Email" name= "email" id= "email" placeholder= "Please enter the correct mail address"/>

<span> See the </span> in the new chrome

</p>

The Email text box requires the correct email address to be entered, otherwise there will be an error message

URL text box:

<p>

<label for= "url" >url type:</label>

<input type= "url" id= "url" autocomplete= "Off" placeholder= "Please enter the correct URL address" autofocus= "autofocus" >

<span> See the effects in the new version of Chrome </span>

</p>

The URL text box requires that you enter an e-mail address, or there is an error message:

Search box:

Input control with a search box style,

<p>

<label for= "Search" >search type:</label>

<input type= "Search" results= "n" id= "search" >

<span> See the </span> in the new chrome

</p>

The CONSTRAINT VALIDATION API (client authentication API):

HTML5 using the Validitystate object to feedback the validation status of the form

var checkresult = input.validity;

if (checkresult.valid) Console.debug ("Verification Pass");

else Console.debug ("validation failed");

The pass or fail of the validation depends on the eight validation constraints introduced by HTML5, and returns True if all passes, false if one fails.

1, valuemissing

Purpose: Ensure that the values in the form control are filled in

Usage: Set the Required property to true in a form control

Example: <input type= "text" required= "true"/>

2, Typemismatch

Purpose: Ensure that the value within the control is the same as the type of the control (for example, Number,email,url)

Usage: Specify the type eigenvalue of the form page

Example: <input type= "Email"/>

3, Patternmismatch

Purpose: Verifies that the input is a valid format based on the formatting rules set on the form control.

Usage: Set the Pattern property on the form control, and the well gives the appropriate matching rule, title is the custom error message that you want to feed back to the user.

Example: <input type= "text" title = "Please fill in the number, can contain 1-4 decimal places", placeholder = "Please fill in the value ...", pattern = "^[0-9]+ (. [ 0-9]{1,4})? $ "/>

4, Toolong

Purpose: Avoid entering values that contain too many characters.

Usage: Set the MaxLength attribute on the form control.

Example: <input type= "text" maxlength= ">"

5, Rangeunderflow

6, Rangeoverflow

Purpose: Limit the minimum and maximum values of a numeric control.

Usage: Sets the Min/max attribute for the form control and gives the minimum/maximum allowable value.

Example: <input type= "range" name= "Agecheck" min= "All" max= "/>"

7, Stepmismatch

Purpose: Ensure that the input values are set to Min, Max, and step.

Usage: Sets the Step property for the form control, specifying the increment of the value.

Example: <input type= "range" min= "0" max= "step=" 5 ">

8, Customerror

Purpose: A developer's custom error message that deals with the application code's explicit settings and the errors generated by the calculation.

Usage: Call setcustomvalidity (message) to place the form control in the Customerror state.

Example:

<input type= "text" oninput= "Checknumuric (This)"/>

Script:

function Checknumuric (input) {

var checkvalue = Input.value;

var reg =/http (s)?: \ /\/([\w-]+\.) +[\w-]+ (\/[\w-. \/?%&=]*)?/;

if (!reg.test (CheckValue)) input.setcustomvalidity (' You need to enter the correct URL! ‘);

else Input.setcustomvalidity (");

}

Cancel VALIDATION (cancels the validation operation):

1, form element of the Novalidate property, close form validation, can be different areas to do this setting, to some of the submitted data validation, some do not verify.

2. The formnovalidate attribute of the INPUT element can start or stop validation on the element

3. The formnovalidate attribute of the sumbmit element, which can start or stop validation on the entire form, is equivalent to the Novalidate property of the form element

HTML5 Project NOTE 2: Offline system form Design