H5新增和表单-7.13

HTML5

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成HTML5，它是HTML4.0升级版，并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。与传统的技术相比，HTML5 的语法特征更加明显，它定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问(页面要求访问相册)等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。

就目前市场而言，一名合格的「WEB 开发工程师」不仅需要会做「PC 端网页」、「移动端网页」，还需要会做各类强交互、多动效的「 HTML5 营销活动页面」，甚至还要做动效及脚本逻辑复杂的「HTML5 小游戏」。

HTML 新增标签

1. 常见的布局标签

   • section: 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、h2……等元素结合起来使用，表示文档结构。
   • article: 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
   • aside: 表示一个页面的一部分，它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。aside元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，相关链接，当前页内容简介等。
   • header: 表示页面中一个内容区块或真个页面的标题。
   • hgroup: 表示对整个页面或页面中的一个内容区块的标题进行组合。
   • footer: 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
   • nav: 表示页面中导航链接的部分。
   • figure: 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

2. 媒体标签
   video 视频
   audio 音频

更多语义化标签和介绍详见 HTML5元素周期表

面试题: 什么是web标签语义化

标签语义化的目的在于能够直观的认识标签和属性的用途和作用，好处：

1、使页面的内容结构化：结构更清晰，便于不同的屏幕设备解析；

2、有利于SEO：和搜索引擎建立良好的关系，有助于爬虫更多的有效信息；

3、便于团队开发和维护；

多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。

HTML5 新增 audio 标签 和 video 标签来解决音视频的问题;语法:

<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 设置播放窗口的高度
-->

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

多浏览器支持方案:

<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 表单

之前学习的标签更多的是向用户展示信息，假如服务器端需要验证用户是否存在，这时就需要有一个用户输入内容的标签。

表单在网页中主要负责数据采集功能，它用<form>标签定义。用户输入的信息都要包含在form标签中，点击提交后，<form>和</form>里面包含的数据将被提交到服务器。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

这里我们只讲怎样使用Html 标签来设计表单。

表单组成

在 HTML 中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域 3 个部分构成

表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：
相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

<form> 标签

表单标签的格式:

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

• name：表单提交时的名称
• action：提交到的地址
• method：提交方式，默认为get

表单控件

每个表单元素都可以定义一个name属性，指定控件的名称。当提交信息时，会作为区分用户所填数据的标识发送给后台。

单行文本输入框

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

// value属性: 输入框的值

密码输入框

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

单选按钮

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

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

复选框

<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 是否被选中

文件上传
<input type="file" name="file"/>

使用file类型的input时要注意以下几点

1. form表单的method属性值要为post
2. form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。
   默认地，表单数据会编码为 “application/x-www-form-urlencoded”，不能用于文件上传

下拉框

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

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

多行文本输入框

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

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

提交按钮
<input type="submit" value="提交"/>
普通按钮
<input type="button"/>
重置按钮
<input type="reset" value="重置"/>

对于以上按钮, value:指定按钮上显示的文字

图片按钮
<input type="image" src="URL"/>

<label>标签

<label>标签为 input 元素定义标注。
label是input的描述，它本身不会有特殊效果，但它和input标签同时使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”

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

通过label的for指向按钮的id来绑定，for和id属性的值要相同

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

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

<fieldset>元素集

fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素。

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

表单补充属性

get 提交
参数被放到地址提交，比如: /D:/abc?username=张三&pwd=123&sex=0&experience=0
不安全
地址栏拼接的参数长度有限，一般是<4k
一般用于获取数据
post 提交
地址栏不显示提交内容，再请求体显示
相对安全
提交的数据量没有上限
一般用于提交保存数据
disabled 禁用
readonly 只读
placeholder 占位符提供可描述输入字段预期值的提示信息
autofocus 元素应该自动获得焦点

表单示例

H5新增input类型

1. 在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码

2. 以上的不足都已经在HTML5中被克服，HTML5在以上的基础上增加了许多标签和属性，为开发人员带来了极大的方便

电子邮件类型
功能描述：输入E-mail地址的文本框
语法：<input type="email"/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型
功能描述：输入搜索关键字的文本框
语法：<input type="search"/>

URL类型
功能描述：输入WEB站点的文本框
语法：<input type="url"/>
注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型
功能描述：预定义的颜色拾取控件
语法：<input type="color"/>

数字类型
功能描述：只能接受数字
语法：<input type="number"/>
属性：min：当前域能接受的最小值; max：当前域能接受的最大值; step：决定了域所接受值递增或递减的步长，默认为1

范围类型
功能描述：允许用户选择一个范围内的值
语法：<input type="range" min="0" max="100" value="80"/>
属性：min：范围的下限值; max：范围的上限值; step：声明该值递增或递减的步长; value：设置初始值

日期类型
功能描述：创建一个日期输入域
语法：<input type="date" />

周类型
功能描述：与date类型相似，但只能选择周
语法：<input type="week" />

月份类型
功能描述：与date类型相似，但只能选择月份
语法：<input type="month" />

电话类型
语法: <input type="tel" />

部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

新增 form 表单元素

<datalist>
<datalist> 包含了一组<option>元素，这些元素表示其它表单控件可选值，常与input标签配合使用
实际开发中：需要自动补全的内容列表项可能很多，不可能挨个展示在页面中，一般是通过ajax局部页面刷新技术实现的。

<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>
用来表示规定范围内的数量值，如磁盘使用量比例、关键词匹配程度等。
需要注意的是：meter不可以用来标记那些没有已知范围的任意值，如重量、高度，除非已经设定了它们值的范围。

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

<progress>
进度条<progress value="22" max="100"></progress>

新增表单属性

multiple
作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：<input type="email" multiple/>

required
作用：必填
语法：<input type="text" required/>

minlength和 maxlength
作用：定制元素允许的最小字符数和最大字符数
语法：<input type="text" minlength="6" maxlength="18"/>

autocomplete
作用: 是否保存用户输入 on/off

novalidate
作用: 关闭验证，可用于form标签

formaction
作用: 主要应用于表单内某元素提交地址与整个表单提交地址不同，进行单个地址覆盖
语法: <input type="submit" formaction="xxx.action">

**tabindex **
作用: 控制 input 标签按 tab 键获取到焦点的顺序

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