html5 表单元素

1.概念    表单是搜集用户信息的各种表单元素的集合区域;

2.表单的作用    a.实现网页上的数据交互;    b.搜集客户端输入的数据信息，提交到网站服务器端进行处理;

3.常见的应用   a.注册/登录   b.搜素   c.留言/评论   d.文件上传/文章编辑

4.表单标签<form>   a.双标签，块状元素   b.用来定义网页中的交互输入的区域（表单区）   c.所有的表单控件中必须包含再<form>元素中;

5.<form>基本属性   a.action url路径 ;必须属性！规定当提交表单时向何处发送表单数据   b.method get/post; 必须属性；规定用于发送form-data的http方法;   c.name 自定义名称;规定表单的名称（针对服务器端或脚本处理）

6.name和id的区别  a.id在页面中具有唯一性，name可以重复  b.name主要对应服务器端，用于对提交到服务端的表单数据进行标识，要实现数据交互功能，表单和表单控件都需要使用name属性;  c.name的另一个功能是对应脚本（JavaScript）,来处理表单中的各种数据值.而id主要对应css样式的应用;

7.表单元素的类型   1.输入型：（用户在控件中可以直接输入数据信息）        a.文本框(单行文本);         <input>通过type指定类型        <input type="text" /> 普通文本框        <input type="password" />密码框        <input type="hidden" /> 隐藏域               隐藏域是用户看不见的表单控件，一般用来传递不需要显示在客户端的数据;        b.文本域(多行文本);        <textarea></textarea>   2.选择性：（用户根据提供的控件选择数据内容）             a.下拉框;（select标签创建下拉列表，option标签常见列表中的子级选项）       1.行间元素       2.给option标签添加select属性，可以设定在首次显示的下拉列表是为默认的选中状态;       3.给select标签添加multiple 属性可以选择多个选项;（h5新增）       4.select的size属性可以规定下拉列表中的可选项的数目;（h5新增）       5.使用optgroup 给列表中的选项进行分组，形成类型树形的分级选择控件;（h5新增）          optgroup标签的label属性可以用于定义选项组的文本描述;            请选择你的所在省份： <select id="" name="">                         <option value="">请选择省份</option>                         <option value="1">湖南</option>                         <option value="2">湖北</option>                         <option value="3">上海市</option>                      </select>      b.单选按钮;（input标签创建选择框，type指定其具体类型）        1.单选按钮具有互斥性，必须成组出现，没有单个应用的场景;        2.name 属性:实现按钮的编组，当若干个按钮name相同的时候，就形成了一个按钮组;        3.checked:设定按钮的已选中的状态;             <input type="radio" name="sex" checked="true" value="man" />男      <input type="radio" name="sex" value="female" />女      c.复选框;（input标签创建选择框，type指定其具体类型）         1.复选框可以单个使用，也可以成组使用；         2.单个使用时，用来接收用户回答“是”，“否”。         3.成组使用，提供用户在一组可选项中农做多项选择;         4.name属性：实现按钮的编组,当若干个按钮的name属性相同时，就形成了按钮组;         5.checked属性：设定按钮的已选中状态;           爱好：<input type="checkbox" name="hobby" value="volleyball" />打排球           <input type="checkbox" name="hobby" value="soccer"/>踢足球           <input type="checkbox" name="hobby" value="basketball"/>打篮球                 是否同意相关协议：<input type="checkbox" name="ischecked" value="0"/>   3.事件型：按钮;（用户点击控件发生的事件）          可以点击的按钮（一般通过js/jquery启动脚本）      <input type="button"  value="普通按钮"/>          发送数据到服务器      <input type="submit" value="提交按钮" />         点击按钮会重置表单中的所有数据（恢复成初始默认）      <input type="reset" value="重置按钮" />          自定义图像来呈现提交按钮      <input type="image" src="" alt="" value="图像按钮" />           上传文件 multiple 多文件上传;      <input type="file" value="上传按钮" />      <button></button>       a.在 <button>元素内部，可以放置内容，比如文本，图像，这个是和input元素创建按钮之间的区别;               它提供了更强大的功能和更丰富的内容;        b.使用button按钮时，需要规定type属性来定义其功能,在实际应用中并不多见;        type:button 单纯按钮,无功能；             reset  重置             submit 提交

8.HTML5中新增的输入控件    a.html增加了新的表单输入input的类型。其目的是赋予input更具体的“语义”，        同时提供更好的输入控制和浏览器原生验证(不需要附加脚本验证);    b.各个浏览器对这些input控件支持度不一样；    c.不管浏览器是否支持都可以使用它们，因为就算不支持，也可以显示为常规的普通文本框;                  创建包含url地址的输入框，提交时验证;         <input type="url" />          创建包含email地址的输入框，提交时验证;         <input type="email" />         创建仅允许包含数值的输入框，可具体设定;         <input type="number" />         创建滑动条，呈现数值范围区域，可具体设定;         <input type="range" />         创建时间选择器，type类型有date/month/week/time等         <input type="date" />          创建色彩拾取器，用于点击选颜色；         <input type="color" />         创建有清除内容功能的输入框;         <input type="search" />         创建包含电话号码规则的输入框;         <input type="tel" />

9.5.HTML5中新增的选择型控件;      a.datalist控件       1.用来预先定义一个输入框的潜在选项，为输入框提供一个可选择的提示列表;       2.用户输入数据时,可以直接选择提示列表，免去输入的麻烦;       常用的浏览器       3.datalist目前的缺陷        a.无法使用css对其进行UI设计和样式设计        b.部分浏览器不支持或支持的不好，且不同的浏览器对datalist中的属性和值判断不同;        c.即是使用datalist，通常也需要配合脚本来实现和完善其功能;        d.在实际开发中，还是使用传统的方法;       <input list="browsers">       <datalist id="browsers">         <option value="chrom">chrom</option>         <option value="firefox">firefox</option>         <option value="IE">IE</option>         <option value="Opera">Opera</option>       <datalist>

HTML表单/表单控件常用属性总结     1.value属性的用法      a.定义各种表单控件的值；      b.不同控件类型，value的用法也不同；     value：属性      a.输入框控件：定义初始化值      b.选择性控件：定义相关联的值（必须设置）      c.事件类控件：定义按钮呈现的文本;     2.readonly:只读属性       a.规定输入字段为只读，不能修改;       b.应用对象主要针对输入框类型的控件;     3.disabled 禁用属性      a.规定字段为禁用，无法使用，无法点击的;      b.应用对象包括所有的表单控件，除了<input type="hidden">      c.提交表单数据时，被禁用的控件不会被提交;     4.placeholder 占位符属性       a.规定可描述输入字段预期值的简短提示信息,来提示用户输入;       b.输入框显示placeholder的文本的内容，在用户输入时自动消失,不会形成干扰;       c.应用对象针对输入型表单控件，如<input>的text类型或<textarea>       d.placeholder 内容不是value的值，也不会被表单提交;       e.HTML5新增属性,IE9及以前的浏览器不支持;     5.required 必填属性      a.规定必须在提交表单之前填写输入字段;      b.应用对象适用于input类型：text，serach,url,tel,email,password,date,      picker,number,checkbox,radio,file;      c.应用对象适用于<textarea>文本域;      d.html5新增属性,safari,IE9及以前的浏览器不支持;     6.autofocus 自动获得焦点属性      a.规定当前页面加载时input元素应该自动获得焦点;      b.应用对象针对大多数表单控件，都可以用；      c.html5新增属性,IE9及以前的浏览器不支持;     7.autocomplete自动完成属性       a.规定表单是否应该给启动完成功能，即是否自动让浏览器自动记录之前输入的值；       b.值为on,表示开启功能；值为off表示关闭功能;       c.可以应用整体的form对象，也可以用于输入型的input控件;       d.通常autocomplete="on"适用于表单（默认），"off"适用于特定的输入字段;       f.HTML5新增属性;

表单应用技巧 1.使用<label>提高用户操作交互体验   a.双标签，行间元素，默认无任何特殊样式；   b.为表单控件提供辅助标记,点击label中的标记内容，         浏览器会自动将焦点转到和label标签相关的表单控件上;   c.使用label标签将标记内容和表单控件括在一起，增加控件的可操作性;   <label>标记内容+表单控件</label>   d.使用<label>标签的for属性将其他和相关控件关联在一起,for   属性的值为控件的id名;<label for="对应元素的id名">标记内容</label>      2.使用<fieldset>标签协助表单控件或数据归类分组;  a.表单控件分组标签<fieldset>     1.双标签，块状元素,创建一个分组区域;     2.主要用于将表单内的相关控件进行分组,便于识别和区分，默认呈现区域边框的效果;    b.表单控件分组标题标签<legend>   1.双标签，块状元素;   2.用来为<fieldset>分组定义一个标题,作为表单内容的说明或描述;

css:表单样式     a.表单样式默认存在的问题和缺陷;       1.在不同的浏览器或操作系统中，表单呈现的效果会有差异;       2.这些差异主要表现在选择类的表单元素上（单选/多选/下拉列表）     b.编写表单样式的基本原则       1.着重于整体的排版整体美观，针对表单元素的样式尽可能简单；       2.针对具有表现有差异的表单元素（单选/多选/下拉列表），尽可能采用默认样式效果，不要太大改动;     c.表单样式的应用技巧       1.针对整个表单区域的内容，结合布局类标签进行排版;       2.将单个表单元素，都看成盒子模型容器来进行样式的美化;       3.针对控件的样式美化，重点放到输入框类控件和按钮类控件;