HTML5 表单相关的元素和属性

1、form元素
用于生成输入表单，该元素不会生成可视化部分。其可以指定id、style、class等核心属性，还可以指定onclick等事件属性以及action、method、name、target等属性。
其中action和method两个属性为必填属性，前者指定单击表单内的确认按钮时，该表单被提交到哪个地址。
后者指定提交表单时发送何种类型的请求，该属性值可以为get和post属性。这两种区别主要有5种：
（1）get从服务器上获取数据，post是向服务器传送数据
（2）get中的参数数据提交到表单的ACTION中所指的URL中，可以在URL中看到，而post通过HTTP post机制，将表单内的内容放在HTML HEADER内一起传送到ACTION属性所指的ULR地址，用户看不到这个数据
（3）对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
（4）get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
（5）get安全性非常低，post安全性较高。

参考网址： https://zhidao.baidu.com/question/1051948554049586939.html?word=method里面的post和get&ms=1&rid=8044931568061342863
代码截图如下：
其中action="#" 表示提交数据到本页，method=“get”,一般建议为post，数据用post传递。原因上面已经阐述。
2、input元素
input元素是表单控件元素中功能最为丰富的，如下几种输入元素都是通过input元素生成的：
（1）单行文本框：input里元素type=“text”
（2）密码输入框：input里元素type=“password”
（3）隐藏域：input里元素type=“hidden”
（4）单选框：input里元素type=“radio”
（5）复选框：input里元素type=“checkbox”
（6）图像域：input里元素type=“image”,并且还可以指定width和height两个属性
（7）文件上传域：input里元素type=“file”
（8）提交、重设、无动作按钮：分别指定input里元素type=“submit”、type=“reset”、type=“button”
除此之外还可以指定id、style、class等核心属性属性以及checked、disabled、readonly等属性，其中checked设置单选框、复选框初始状态是否为选中状态；disabled设置首次加载时禁用此元素；readonly指定该文本框内的值不允许用户修改
代码截图如下：

效果截图如下：

3、lable、button、select、与option元素
（1）lable元素用于在表单元素中定义标签，其不需要生成请求参数，不要为其指定value属性值，与表单控input关联的两种方式：
①隐式使用for关联：
②显示关联：
代码截图如下：

效果截图如下：

（2）button用于定义一个按钮，type指定该按钮是那种类型
代码截图如下：

效果截图如下：

（3）select元素：
①用于创建列表框和下拉菜单，注意该元素必须与option元素结合使用，每个option元素代表一个列表项或菜单项。可以指定id、style、class核心属性外，仅可以指定onchange事件属性。
②其元素里只能包含两种元素：option（用于定义列表框或菜单项）和optgroup（用于定义列表项或菜单项组）
代码截图如下：

效果截图如下：

4、增强的textarea
该元素用于生成多行文本域，可以指定id、class、style等核心属性外还可以指定onclick等事件属性以及：
①cols：指定文本宽度。属于必填属性
②rows：指定文本高度。属于必填属性
③disabled：指定禁止该文本域
④readonly：指定该文本域只读
⑤maxlength：设定该多行文本域最多可输入字符
⑥wrap：指定多行文本域是否添加换行符
代码截图如下：

效果截图如下：

注意：wrap部分浏览器不支持，可忽略该属性
5、fieldest和legend元素
fieldest元素可用于对表单内表单元素进行分组，可以指定id、class、style等通用属性，还可以指定：
①name：指定该fieldest元素的名称
②form：该元素值必须是一个有效的form元素的id，用于指定fieldest属于的指定表单
③disabled：该属性用于禁止该组表单元素
legend元素为fieldest元素设置标题，放在其里面。
代码截图如下：

效果截图如下：

6、HTML5一些新增加的表单属性
①form：用于定义该表单控件所属的表单，属性值为它所属表单的id，提高灵活性
②formaction：可动态让表单提交到不同的URL
③formxxx：可以指定formenctype：让按钮动态改变enctype属性；
formmethod：让按钮动态地设置表单以及POST或GET方式tijiao
formtarget：让按钮动态改变表单的target属性值
④autofocus：自动获得焦点
⑤placeholder：显示对用户的提示信息，用户开始输入，提示信息自动消失
⑥list：生成隐藏的下拉菜单
⑦autocomplete：设置表单是够支持自动完成功能，其有两个属性，on和off
⑧label的control：主要用于js脚本中访问label元素所关联的表单元素
⑨indeterminate：为true时复选框状态为不确定的。
7、HTML5新增的一些表单元素
①input中的type，进一步丰富了其属性的类型
代码截图如下：

效果截图如下：


②metar和progress：前者表示最大值和最小值的计数仪表，后者表示一个进度条
代码截图如下：

效果截图如下：

③校验属性：require：改属性指定表单控件必须填写
patten：该属性的值必须是一个合法的正则表达式
min、max、step：只对数值类型、日期类型的input有效
8、小结
要加强对这些标签的记忆以及运用，熟能生巧。同时也该注意部分新增属性和元素有些浏览器是并不支持的，一定要善于区分，灵活运用