Form 表单深入 标签功能

1. Form 表单深入 标签功能
2. Form 表单深入 UI修正CSS篇
3. Form 表单深入 网络通信篇

前言：
前写了一个关于Form表单提交的内容，这次把Form完整的梳理一遍。因为ajax的流行，Form自身的一些特性，我们都很少用了，接下来都巴拉巴拉，主要分三块内容：

• Form标签及其子组件input select textarea fieldset 等的用法及其非通信提交的属性
• Form的UI修改
• Form在提交表单时的一些属性，方法。

---

Form
|
|-- input                --- 单行输入框，因不同的type，有不同的显示效果
|-- textarea             --- 多行输入框
|-- label                --- 优化表单的鼠标效果，关联对应的表单
|-- button               --- 定义一个按钮
|-- fieldset -> legend   --- 为表单控件分块
|-- select -> optgroup -> option   --- 下拉选框
|-- datalist -> option   --- 预先定义的输入控件选项列表（语言描述不是很好，等会看下面demo）

input （按照type为序说明）

• type=text 常用的输入文本控件

  • autocomplete (多数输入控件都有，但是password肯定不会有)
    在输入表单时，自动记忆。在下次输入时，显示出来。
    值有on|off，默认为on ，可以在form标签设置也可以在单一表单控件中单一设置
    目前测试中，只有firefox可以，chrome不行。demo
  • autofocus
    自动获取焦点，如果页面有多个，则只在第一个起作用。
  • disabled
    该表单禁用，无法点击，无法被提交，可以通过JS修改其属性。
    disabled 属性不适用于 <input type="hidden">
  • form
    HTML5新增内容，适用于form标签之外的输入控件，提交时可以带上该数据。
    值为指定的form的id
  • list
    list 属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。输入时会自动查找datalist内容
  • maxlength
    输入框中所能输入的最多字符，不是所有type都适用。目前已经测试出text，url，email
  • name
    在html中，name是表单提交时的索引，只有有name的值才会被提交。
    如果表单里有重复的两个name，两条数据会直接传输过去。Form和http本质上不对你的path作重复验证，但是请不要这样做。

  • pattern
    pattern 属性规定用于验证 <input> 元素的值的正则表达式。
    pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
    使用全局的 title 属性来描述模式以帮助用户
    html提供的提醒方式，皆可以自定义调整，主要用的是css3选择器，查看下面
    HTML5应用：setCustomValidity(message)接口
    其中会用到css3选择器和伪类和伪元素的介绍，可以看下面这篇博文
    CSS3伪类和伪元素的特性和区别

  • placeholder
    placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述)
    placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

  • readonly
    表单内容只读属性，可以通过tab和点击获取其内容，无法通过页面输入内容，但可以通过JS修改
  • required
    该输入框必填，在点击type=submit按钮之前触发。UI样式可以在
    required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file
    修改HTML5表单验证required样式

  • size
    size 属性规定以字符数计的<input> 元素的可见宽度，默认size为20
    实用性不大，测试过后发现不管输入汉字还是字母，都匹配不了20个字符。

  • value
    属性规定<input> 元素的值,适用于各种表单控件，但不适用于<input type="file">

• password（表单域）
  输入密码，字符串会被遮盖为*,可以通过修改type属性为text查看当前值，或者通过JS获取其value。

• button
  表单新增属性，具有按钮的默认样式，但是不像reset submit 有相关功能。
• checkbox
  多选框，原生展示为一个方框，里面是个√,这是浏览器默认的效果，所以当我们在用自定义的设计图标时尽量贴合这种设计元素，避免用户学习成本。
  
  • checked
    checked 属性规定在页面加载时应该被预先选定的 <input>元素，同理该属性也应用于type=radio。通过form传递时，传的是当前的checked元素对应的value

• color
  调用计算机色板，选取颜色，value为16进制字符串“#ff0080”。
  不同浏览器对色板的显示效果不一样。
  这是qq浏览器下的色板
  
  这是百度浏览器下的色板
  

• date
  定义 date 控件（包括年、月、日，不包括时间）
  表现效果也是分浏览器的
  下面是qq浏览器和百度的简单搜索
  
  下面是Via浏览器，应该调用的是设备自身的webview，我的手机系统是android7.0
  

• datetime
  很遗憾，chrome不支持

• datetime-local
  这个属性支持
  下面是qq浏览器和百度的简单搜索
  
  下面是Via浏览器
  

• email
  限制输入内容为邮箱格式，在点击submit时自动校验，提示UI看上面pattern

• file
  上传内容为文件

  • accept
    表示该文件选择控件默认选择的文件，值为MIME(多用途互联网邮件扩展类型),可以提前设定选择文件的类型。
  • multiple
    multiple 属性规定允许用户输入到 <input> 元素的多个值
    multiple 属性适用于以下 input 类型：email 和 file

• hidden
  隐藏域，在节点中存在，但是不占用布局控件，可以存放一些隐藏数据。

• image
  以图片作为背景的提交按钮，功能类似type=submit，不建议使用，因为它会自动在url中添加后缀当前控件的坐标。

  • alt
    alt 属性为用户由于某些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）无法查看图像时提供了替代文本。
  • src
    图片的地址

• number
  定义一个数字域，只能输入数字和字母E/e，这里的E/e代表次方意思。

  • min/max
    定义input中输入的最小值或者最大值
    max 和 min 属性适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week
  • step
    step 属性规定 元素的合法数字间隔。
    step 属性适用于下面的 input 类型：number、range、date、datetime、datetime-local、month、time 和 week

• radio
  单选按钮，实际传输的值是input中的value,两个值有同一个name，同时常常使用<label for="radio-id">，使选择更加方便

• range
  slider控件
  使用场景不多，先记着。也可以使用min和max

• reset
  清空当前form中的所有表单控件的value

• search
  定义搜索字段

• submit
  提交数据，会触发浏览器form的onsubmit事件，如果想在提交数据之前验证可以写在onsubmit的函数里

• tel
  定义当前字段为电话号码
  浏览器不兼容，可以作为语义化使用

• url
  定义当前输入的字段为url
  在点击提交时，会对url域验证

• week
  定义 week 和 year 控件

• time
  定义用于输入时间的控件

textarea

输入一段文本内容，多数属性是与input重合，有`autofocus` `disabled` `form` `maxlength` `name` `placeholder` `readonly` `required` 

- cols
规定文本区域内可见的列数。
- rows
规定文本区域内可见的行数。
- wrap
规定在表单提交时文本区域中的文本是如何换行的
可以查看下面这个例子 textarea wrap属性 换行规则

label

label在UI上不会增加内容，但是通过<label for="input_id"></label>增加表单交互的体验。具体案例，可以点击第一个jsNet中的radio。有一个form属性是和input一样。

• for
  指向某一个input表单控件，常常用于radio checkbox。

fieldset（legend）

将表单分块，有默认的边框样式，常常和legend组合使用

select（option）

下拉选框，内容有optgroup option构成，optgroup是用来对option进行分组，option能做的样式自定义空间有限。和input共用一下属性 autofocus disabled form name required

• multiple
  当该属性为 true 时，可选择多个选项
• size
  当multiple为true时，设置size 规定下拉列表中可见选项的数目。
• selected
  设置默认选中其中一项

button

表单新增按钮，用来补充`<input type="submit">`和`<input type="reset">`。
默认情况下，推荐使用`input`标签做表单控件处理，如果当前按钮需要添加背景图片或者超出`input`能力，可以使用`button`。
`button`也是需要设置`type`属性，`button`，`submit`，`reset`，不同浏览器对`button`的默认值也是不一样的，所以建议在使用`button`标签时，添加`type`属性。
如果当前`button` 有`name`属性值，且自身`type="submit"`，`button`中的`value`会被当做表单参数。

datalist

前面有提到input的list属性，指向datalist的id。

src="//jsrun.net/9IqKp/embedded/all/light/" allowfullscreen="allowfullscreen" width="100%" height="300">