HTML知识点总结之表单元素

网页不可能是纯静态的，没有任何的交互功能；绝大多数的网站都有表单元素的使用。表单提供了一个浏览者和网站交互的途径，比如用户注册登录，用户留言等功能。

• form

form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。让表单数据能够提交，可以将表单元素包裹在<form>之中，最常用的表单控件是input元素。form元素为块级元素。

• form的主要属性

name属性：指定表单的名称。

action属性：规定将表单元素数据提交到哪个页面。

method属性：规定以何种方式提交表单数据，取值如下:

（1）get：默认值，通过url方式传输，并且最大不能够超过1k，安全性也不是太好。

（2）post：传输上大小上没有限制，并且安全性良好，不通过url传输。

novalidate属性：是HTML5新增的一个属性，规定当提交表单时不对其进行验证。

autocomplete属性：是HTML5新增的一个属性，规定表单是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

• input

​input是很强大的表单控件，它的主要属性有：

1. name属性：用于规定input元素的名称
2. accept属性：用来规定能够通过文件上传进行提交的文件类型，该属性只能与type="file"配合使用。
3. checked属性：规定在页面加载时应该被预先选定的input元素，checked属性只能在input元素type="radio"或type="checkbox"时使用。
4. disabled属性规定应该禁用input元素。被禁用的字段是不能修改的。
5. readonly属性：规定输入字段为只读。

6. maxlength属性：规定输入字段的最大长度，以字符个数计，该属性只能在input元素type="text"或type="password"的时候使用。

7. input的type属性：​

　　text 　　 定义单行的输入字段，用户可在其中输入文本

　　password 定义密码字段。该字段中的字符被掩码

　　file 　　　定义输入字段和 "浏览"按钮，供文件上传

　　radio　　 定义单选按钮

　　checkbox 定义复选框

　　hidden 　 定义隐藏的输入字段

　　button 　 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）

　　image 　 定义图像形式的提交按钮

　　reset 　　 定义重置按钮。重置按钮会清除表单中的所有数据

　　submit 　 定义提交按钮。提交按钮会把表单数据发送到服务器

 

　date 　　　　 定义选取日、月、年的输入域
　month 　　 　定义选取月、年的输入域

time 　　 　 定义选取月、年的输入域

• select下拉列表

下拉列表由<select>和<option>标签配合使用生成。下拉的菜单项是由<option>标签定义，当提交表单，选中的option的value属性值会被发送。

<select>标签还有两个重要属性:

（1）multiple：规定select下拉菜单可以选择多项，默认情况下下拉列表只能选择一项。

（2）size:规定下拉列表展开之后可见列表项的数目。