Web表单
理解表单
表单基本工作方式都是用户填写信息然后单击按钮提交，浏览器手机输入的信息，并将其发送给Web服务器。
传统表单
form元素用来组织表单部件，负责告诉浏览器数据提交到哪，方法是在action中提供一个URL
表单控件里面的input
通过占位符文本添加提示
使用placeholder属性创建占位符
<input id="name" placeholder="xiaoming">焦点：挑选正确的起点
在相应的元素上通过JavaScript调用focus()方法，帮助用户完成焦点切换。
或者使用autofocus属性，只能给一个input或textarea元素添加
<input id="name" placeholder="xiaoming" autofocus>验证
客户端验证时在浏览器中检查错误，没有错误再提交，目的是减少填表人的麻烦
服务端验证时用户将数据提交给服务器之后再进行验证，服务器段代码负责检查所有细节，确保再进行下一步操作之前所有数据都是有效的。
HTML5验证原理
验证原理：告诉浏览器验证哪个字段。
如果某个字段不能留空，使用required属性
<input id="name" placeholder="xiaoming" autofocus required>关闭验证
在form元素中添加novalidate属性，可以禁用整个表单的验证功能
<form id="student" action="#" novalidate>添加一个额外的按钮实现强制对表单严格验证
<input type="submit" value="Save" formnovalidate>验证样式挂钩
根据输入字段的验证状态改变消息的外观。
使用新的伪类：
- required和optional（选题），根据字段是否使用required属性应用不同样式
- valid和invalid，根据控件中是否包含错误来应用不同样式
- in-range和out-of-range，根据空间的min和max属性判断输入值是否超出范围，从而为控件应用样式。
input:required{
background-color: red;
}使用正则表达式
准备好正则表达式后，通过pattern属性将其应用到input或textarea元素
<input id="promoCode" placeholder="xiaoming" pattern="[A-Z]{3}-[0-9]{3}">自定义验证
检查相应字段是否有错，绑定onInput事件
<textarea id="comments" oninput="validateComments(this)">< /textarea>在这个函数里面调用setCustomValidity()方法
浏览器对验证支持
电子邮件
电子邮件控件支持multiple属性，添加了这个属性后就可以在同一个字段里输入多个电子邮件地址，不过多个地址之间只有逗号分隔。
搜索框
使用search类型。
电话号码
电话号码使用tel类型。
数值
number类型用于常规数值，通常配合min和max属性使用,只接受整数，但是可以设置step属性，表示可以接受的数值之间的间隔
<input id=“age" type="number" min="0" max="120" step=”0.1“> <br>滑动条
使用range类型，表示整数或小数值。
<input id=“age" type="range" min="0" max="120" step=”0.1“><br>日期和时间
几种类型：
颜色
使用color类型
新元素
显示输入建议
这个元素可以让普通文本框中添加一个下拉建议列表，而且必须配合一个标准的文本框使用：
<legend>What`s Your Favorite Animal?</legend>
<input id="favoriteAnimal" list="animalChoices">
<datalist id="animalChoices">
<select id="favoriteAnimalPreset">
<option value="alpaca" label="Alpaca"></option>
<option value="Dog" label="Dog"></option>
<option value="Cat" label="Cat"></option>
<option value="Crab" label="Crab"></option>
<option value="pig" label="pig"></option>
<option value="anaconda" label="anaconda"></option>
</select>
</datalist>进度条和计量条
表示任务的进度，后一个value属性，用来设置表示进度的百分比，值是0到1之间的小数，也可以使用max设置最大值。
表示位于一直范围内的一个值，需要设置最大值和最小值
和
<command》表示用户可以执行的操作
封装这组操作
网页中的编辑器
使用contentEditable
contentEditable这个属性添加到任何元素中，都可以使该元素内容可以编辑，到通常使用JavaScript来设置：
element.contentEditable = true;
使用designMode
把要编辑的文档放一个中，这个元素就充当了一个超级的编辑框
