H5 new and form-7.13

HTML5

On October 29, 2014, the World Wide Web Consortium announced that after nearly 8 years of hard work, the standard specification has finally been formulated and completed HTML5. It is an upgraded version of HTML4.0, not just as the latest version of the HTML markup language, but also The important thing is that it has formulated a series of standards for Web application development, becoming the first HTML language to use the Web as an application development platform. Compared with traditional technologies, HTML5’s grammatical features are more obvious. It defines a series of new elements, such as new semantic tags, smart forms, multimedia tags, etc., which can help developers create rich Internet applications. It also provides some Javascript APIs. Such as geographic positioning, gravity sensing, hardware access (pages require access to photo albums), etc., native applications can be implemented in the browser, and even combined with Canvas, we can develop web-based games.

As far as the current market is concerned, a qualified "WEB development engineer" not only needs to be able to do "PC-side webpages" and "mobile-side webpages", but also needs to be able to do all kinds of strong interactive and multi-dynamic "HTML5 marketing campaign pages" , And even make "HTML5 mini games" with complex animations and script logic.

HTML add tags

1. Common layout tags

   • section: Indicates a content block on the page, such as chapters, headers, footers or other parts of the page. It can be used in combination with elements such as h1, h2, etc. to represent the document structure.
   • article: Indicates a piece of independent content on the page that is not related to the context. For example, an article.
   • aside: Indicates a part of a page whose content is not closely related to other content on this page, or is not related and exists alone. The aside element is usually displayed as a sidebar or some inserted supplementary content. Usually used to display some definitions in the sidebar, such as directory, index, glossary, etc.; it can also be used to display related advertising, author's introduction, related links, current page content introduction, etc.
   • header: Indicates the title of a content block or a real page in the page.
   • hgroup: Indicates that the title of the entire page or a content block in the page is combined.
   • footer: Indicates the footnote of the entire page or a content block in the page. Generally, it will contain the creator’s name, creation date, and creator’s contact information.
   • nav: Indicates the part of the navigation link on the page.
   • figure: Represents a piece of independent stream content, generally represents an independent unit in the main stream content of the document.

2. Media tags
   videovideo
   audioaudio

For more semantic tags and introduction, please refer to the HTML5 Periodic Table

Interview question: What is web tag semantics

The purpose of tag semantics is to be able to intuitively understand the purpose and function of tags and attributes. Benefits:

1. Make the content of the page structured: the structure is clearer, which is convenient for different screen devices to analyze;

2. Conducive to SEO: Establishing a good relationship with search engines will help crawlers to obtain more effective information;

3. Facilitate team development and maintenance;

multimedia

Before HTML5, the general way to play audio/video on web pages was to use Flash to play, but in most cases, not all users’ browsers have Flash plug-ins installed, which makes it very complicated to process audio/video playback. And the browser of the mobile device does not support the Flash plug-in.

HTML5 adds audio tags and video tags to solve audio and video problems; syntax:

<audio src="素材/小手拍拍.mp3" controls>不支持</audio>
<!--
	附加属性可以更友好控制音频的播放，如：
	autoplay 自动播放
	controls 是否显不默认播放控件
	loop 循环播放
	preload 预加载 同时设置autoplay时此属性失效
-->

<video src="素材/movie.ogg" width="400" height="300" controls></video>
<!--
	同样，通过附加属性可以更友好的控制视频的播放
	autoplay 自动播放
	controls 是否显示默认播放控件
	loop 循环播放
	preload 预加载，同时设置了autoplay，此属性将失效
	width 设置播放窗口宽度
	height 设置播放窗口的高度
-->

<!-- 自动播放需要开启静音属性 -->

Multi-browser support scheme:

<audio>
	<source src="素材/小手拍拍.mp3">
	<source src="素材/小手拍拍.wav">
	<source src="素材/小手拍拍.ogg">
</audio>


<video controls>
	<source src="素材/movie.ogg">
	<source src="素材/movie.mp4">
	<source src="素材/movie.webm">
	您的浏览器不支持
</video>

Form

The tags learned before are more about displaying information to users. If the server needs to verify whether the user exists, then a tag for user input is needed.

The form is mainly responsible for the data collection function in the web page, and it is <form>defined by tags. Information entered by the user to be included in the formtab, click submit, <form>and </form>the data it contains will be submitted to the server.

All user input content is written in a form, such as login registration, search box.

The form is used to fill in information for the visitor in the Web page, so that the client information can be collected, so that the page has an interactive function. Generally, the form is designed in an Html document, and when the user fills in the information, the submit operation is performed, so the content of the form is transmitted from the browser of the client to the server, and processed by processing programs such as ASP or PHP on the server. After that, the information required by the user is transmitted back to the browser of the client, so that the web page is interactive.

Here we only talk about how to use Html tags to design forms.

Form composition

In HTML, a complete form usually consists of three parts: form controls (also called form elements), prompt information, and form fields

Form control:
Contains specific form function items, such as single-line text input box, password input box, check box, submit button, reset button, etc.

Prompt information:
A form usually needs to contain some descriptive text to prompt the user to fill in and operate.

Form field: It is
equivalent to a container, used to hold all form controls and prompt information. You can define the URL address of the program used to process the form data and the method of submitting the data to the server through it. If the form fields are not defined, the data in the form cannot be transmitted to the background server.

<form> label

The format of the form label:

<form action＝"url" method=get|post name="myform" ></form>

• name: the name of the form when it was submitted
• action: the address submitted to
• method: submission method, the default is get

Form control

Each form element can define an nameattribute to specify the name of the control. When the information is submitted, it will be sent to the background as an identifier to distinguish the data filled in by the user.

Single line text input box

<input type="text" name="user" value="请输入用户名" />

// value属性: 输入框的值

Password input box

<input type="password" name="pwd" value="" />
// value属性: 输入的密码

single button

<input type="radio" name="sex" value="0" checked/>
<input type="radio" name="sex" value="1"/>

// 约定: 0代表男,1代表女
// 性别选择 name属性必须相同
// value属性 选中单选框的值
// checked 单选框是否被选中

Checkbox

<input type="checkbox" name="like" checked value="0"/>
<input type="checkbox" name="like" value="1"/>
<input type="checkbox" name="like" value="2"/>

// 约定: 0代表篮球,1代表足球,2代表排球
// value属性: 选中的复选框的值
// checked 是否被选中

File Upload
<input type="file" name="file"/>

Pay attention to the following points when using file type input

1. The method attribute value of the form form must be post
2. Enctype="multipart/form-data" attribute should be added to the form. This attribute indicates that our files are transmitted in binary mode, because the bottom layer of our computer itself is displayed and transmitted in binary.
   By default, the form data will be encoded as "application/x-www-form-urlencoded" and cannot be used for file upload

Drop down box

<select name="city">
	<option value="1">北京</option>
	<option value="2">上海</option>
	<option value="3" selected>广州</option>	
</select>

// value属性用来给<option>指定的那一个选项赋值
// selected 是否被选中

Multi-line text input box

<textarea name="text" id="" cols="30" rows="10"></textarea>

// rows:文字区块的宽度
// cols:文字区块的高

Submit button,
<input type="submit" value="提交"/>
normal button,
<input type="button"/>
reset button
<input type="reset" value="重置"/>

For the above button, value: specifies the text displayed on the button

Picture button
<input type="image" src="URL"/>

<label>label

<label>The label defines the label for the input element.
The label is the description of the input. It does not have any special effects. However, using it together with the input label can enhance the user experience. The user does not have to click the button, but click the text to select it, such as "remember password"

<label for="pwd">记住密码</label>
<input type="checkbox" name="pwd" id="pwd" />

Binding through the label's for pointing to the button's id, the value of the for and id attributes should be the same

<form>
	<label for="male">Male</label>
	<input type="radio" name="sex" id="male" />
</form>

// <label>标签一般和radio、checkbox类型一起使用。

<fieldset>Elemental collection

fieldsetElements can group related elements in the form and are usually legendused together with legendtags. fieldsetThe prompt information defined by the tags fieldsetis a block-level element.

<fieldset>
	<legend>健康信息</legend>
 	身高：<input type="text" />
 	体重：<input type="text" />
</fieldset>

Additional form attributes

getThe submission
parameters are placed in the address for submission, such as: /D:/abc?username=Zhang San&pwd=123&sex=0&experience=0
Unsafe
The length of the parameters of the address bar splicing is limited, generally <4k is
generally used to obtain data. The
postsubmission
address bar is not Display the submitted content, and then display the request body.
Relatively safe
. There is no upper limit on the amount of submitted data.
Generally used to submit and save data.
disabledDisabled
readonlyRead-only. The
placeholderplaceholder provides prompt information that can describe the expected value of the input field. The
autofocuselement should automatically get the focus.

Example form

H5 new input type

1. In other versions of HTML, the form contains very limited elements, and there are not many attributes, especially in the process of data interaction, data verification requires writing a lot of JavaScript code.

2. The above deficiencies have been overcome in HTML5. HTML5 adds many tags and attributes on the basis of the above, which brings great convenience to developers

E-mail type Function description: Enter the text box of the E-mail address.
Syntax: <input type="email"/>
Note: "@" must be included in the input, and there must be content after "@"

Search type
Function description: A text box for entering search keywords
Syntax:<input type="search"/>

URL type
Function description: Enter the text box of the WEB site.
Syntax: <input type="url"/>
Note: The entered content must be included "http://", and there must be content behind

Color type
Function description: Pre-defined color picking control
Syntax:<input type="color"/>

Number type
Function description: Only accept numbers.
Syntax: <input type="number"/>
Attributes: min: the minimum value that the current domain can accept; max: the maximum value that the current domain can accept; step: determines the increment or decrement step of the accepted value of the domain, the default is 1

Range type
Function description: Allow users to select a value in a range.
Syntax: <input type="range" min="0" max="100" value="80"/>
Attribute: min: the lower limit of the range; max: the upper limit of the range; step: declare the increment or decrement step of the value; value: set the initial value

Date type
Function description: Create a date input field
Syntax:<input type="date" />

Week type
Function description: Similar to date type, but only week can be selected.
Syntax:<input type="week" />

Month type
Function description: Similar to date type, but only month can be selected.
Syntax:<input type="month" />

Phone type
Syntax:<input type="tel" />

Some types are effective for mobile devices, and have a certain degree of compatibility, which can be selectively used in practical applications.

New form element

<datalist>
<datalist>Contains a set of <option>elements, these elements represent the optional values ​​of other form controls, and are often used in conjunction with inputtags. In
actual development: there may be many content list items that need to be automatically completed, and it is impossible to display them one by one on the page, usually through ajax partial pages Refresh technology is achieved.

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<meter>
It is used to indicate the quantity value within the specified range, such as the proportion of disk usage, the degree of keyword matching, etc.
It should be noted that the meter cannot be used to mark any value that has no known range, such as weight and height, unless the range of their value has been set.

<meter value="81" min="0" max="100" low="60" high="80"></meter>

<progress>
progress bar<progress value="22" max="100"></progress>

New form attributes

Multiple
function: support to enter multiple values ​​in a field, separated by commas, generally used with mailboxes and URLs.
Syntax:<input type="email" multiple/>

required
role: required
grammar:<input type="text" required/>

Minlength and maxlength
function: the minimum and maximum number of characters allowed by the custom element
Syntax:<input type="text" minlength="6" maxlength="18"/>

Autocomplete
function: whether to save user input on/off

novalidate
effect: turn off validation, can be used for form tags

Formaction
function: Mainly used in the submission address of an element in the form and the entire form submission address is different, to cover a single address.
Syntax:<input type="submit" formaction="xxx.action">

**tabindex **
Function: Control the order in which the input label gets the focus by pressing the tab key

姓名: <input type="text" tabIndex="1"> <br>
年龄: <input type="number" tabIndex="3"> <br>
电话: <input type="tel" tabIndex="2"> <br>
地址: <input type="text" tabIndex="4">