前端之路--html（六）表单

表单：
表单主要用来收集客户提供的相关信息，使网页具有交互功能。在网页制作过程中，常常需要使用表单，如进行会员注册、网上 调查和搜索等。
<from> [action | method | name | target | accept-charset | encrypt | novalidate(new) | autocomplete(new)]
作用：
用于创建一个表单，即定义表单的开始和结束位置，在标记对之间的为表单的一切内容。
语法：
<from action='url' method='post | get' name='fromName' target='openmethod'></from>
属性说明：
action 属性用于指定表格提交到哪个URL,URL的形式可以多种
method 指定提交方式为post或get
name 非必选，用于标识表单的名称
target 指定目标地址打开的4中方式，_blank在一个未名命的新浏览器窗口中，_parent在该框架的父框架中或父窗口中打开连接，_top为在整个浏览器窗口中载入所连接的文件，会删除所有框架，_self 在同一框架或窗口中打开链接，framename 在指定框架中打开
accept-charset 指定提交表单的字符集，常用值有（1、UTF-8 - Unicode 字符编码，2、ISO-8859-1 - 拉丁字母表的字符编码，3、gb2312 - 简体中文字符集）此值设置字体的越广泛越好
autocomplete HTML5新增属性，可选枚举值[on | off]，如果设置成on 则当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。对于一些浏览器需要手动设定此项功能是否启动。
encrypt 用于指定表单提交信息的编码方式，其值为1、application/x-www-form-urlencoded（默认）发送前对所有字符进行编码，2、multipart/form-data 不对字符编码。当使用有文件上传控件的表单时，该值是必需的，3、text/plain 将空格转换为 "+" 符号，但不编码特殊字符。
novalidate 属性是 HTML5 中的新属性，它指定该表单不对输入进行验证，novalidate 属性适用于：<form>，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color


表单中的输入对象：
<input> type [autocomplete | autofocus | checked | disabled | form | list | maxlength | name | pattern | placeholder | readonly | required | size]
作用：
此标签规定用户可输入数据的输入字段，为最常见的表单控件。
语法：
<input attr=''></input>
属性说明：
【type】 input标签中最重要的属性，包含如下可选配置：
button：
button 输入类型定义可点击的按钮，这个按钮本身不会做任何事情，需要绑定事件。实例：<input type="button" value="Click me" onclick="msg()" />
text:
定义单行输入字段的文本输入类型，用户可在其中输入文本。实例：<input type="text" value="default Value"/>
checkbox:
checkbox 输入类型定义复选框。复选框允许用户在一定数量的选择中选取一个或多个选项。实例：<input type="checkbox" name='checkboxGroupName' value="default Value1"/><input type="checkbox" name='checkboxGroupName' value="default Value2"/>
radio：
输入类型定义单选按钮。单选按钮允许用户选择有限数目的选项。同ckeckbox
color:
color 输入类型用于规定颜色。实例：<input type="color" />
date&time:
日期和时间选择器，实例：<input type="date(dd-MM-yyyy) | month(MM-yyyy) | week(week-yyyy) | time(hh-mm) | dateTime(utc time) | datetime-local(local-time)" />
email/tel/url：
输入类型用于应该包含特定字段的输入字段，当提交表单时，会自动地对该字段的值进行验证。实例：<input type="email | tel | url" multiple='可以输入多个内容'/> 提示：iPhone 的 Safari 浏览器会识别 email 输入类型，然后改变触摸屏的键盘来适应它（添加 @ 和 .com 选项）。
file:
输入类型用于文件上传 实例：<input type="file" accept='image/gif,image.jpg' multiple='可以输入多个内容'/>,accept 用于标识此input框接收什么类型的文件。
hidden：
输入类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值。实例：<input type="file" />
image：
输入类型将图像定义为提交按钮，对于 <input type="image" src='url' alt='提供替代文本' height='pixels' />，
src 和 alt 属性是必需的，src指定图片的地址，alt提供代替文本，就是说如果由于各种原因图片无法显示，则显示此文本，默认将提交点击在图片上的X和Y坐标。提示：iPhone 的 Safari 浏览器会识别 number 输入类型，然后改变触摸屏的键盘来适应它（显示数字）。
number：
输入数字类型，可以限制字段的最大最小值等参数，支持的浏览器会自动校验用户输入是否是数字。实例：<input type="number" max='接收最大数字' min='接收最小数字' step='步进值' />
range：
输入类型用于应该包含指定范围值的输入字段，range 类型显示为滑块。具体参数同number。
password：
输入类型定义密码字段。密码字段中的字符会被遮蔽（显示为星号或实心圆）。实例：<input type="password" />
Reset
输入类型定义重置按钮。重置按钮会把所有表单字段重置为初始值。实例：<input type="password" />
submit
输入类型定义提交按钮。同reset，formacrion，formencrypt，formmethod，formnovalidate，formtarget方法可以覆盖该input指定from属性的配置


【form】 html5新增属性，规定 input 元素所属的一个或多个表单，值必须是其所属表单的 id，如需引用一个以上的表单，请使用空格分隔的列表。
【list】 html5新增属性，引用数据列表，其中包含输入字段的预定义选项。
实例：
<input type='url' list='datalist_id'></input>
<datalist>
<option label='xx' value='urlxx' />
<option label='xx2' value='urlxx2' />
</datalist>
【maxlength】 新增属性，用于规定可输入数据的最大长度。
【name】 用于提交表单时搜集字段值。
【pattern】提供供字段校验的正则表达式。
【placeholder】规定帮助用户填写输入字段的提示
【required】标识字段为必录字段。
【size】标识可输入可见字符的长度。


<select> [autofocus | data | disable | form | multiple | name]
作用：
标签创建下拉列表。
语法：
<select>
<option value='1'></option>
<option value='2'></option>
</select>
属性介绍：
基本和input标签作用相同，这里介绍一下data属性，data属性可以直接为select标签添加数据属性，使用此属性可以实现对select标签数据的加载


<option> [disabled | selected | label | value]
作用：
定义下拉列表中的一个选项。
语法：
此标签只能使用在被<select>和<datalist>中，否则就失去其意义了。
属性说明：
常规属性就不进行说明了，介绍一下label属性，该属性定义当使用 <optgroup> 时所使用的标注。


<textarea> [autofocus | cols | rows | disabled | readonly | required | form | inputmode | name]
作用：
定义一个文本区域 (text-area) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区中，您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch)。
语法：
<textarea rows='visible rows' cols='visible cols'>
</textarea>
属性说明：
inputmode 该区域期望的数据类型。