©2016-2024 Matools All rights reserved,
粤ICP备17059708号
<>表单相关的元素和属性
* HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是收集用户输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器。
<>一、Form元素
Form元素用于生成输入表单，是一个非可视化结构，所有需要向服务器提交请求的数据都需要放在Form所包含的表单控件中。（每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数。拥有共同name的控件为一组，只生成一个请求参数，但该参数有多个值。）
<>1.Form元素属性
* 通用属性：id、style、class。
* 事件属性：onclick
* action：指定表单被提交的地址。必填
*
method：指定提交表单的请求类型，分为GET、POST。GET方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数名（name的值）和值（value的值）。POST方式发送的请求参数以及对应的值放在HTML
HEADER中传输，用户不能再地址栏里看到请求参数值，安全性相对较高。
* name：表单名称
* target：指定使用哪种方式打开URL（提交请求会打开另一个URL资源）。_blank、_parent、_self、_top。
<>2.Form元素内控件
<>①input元素
* 单行文本框：type属性为text。
* 密码输入框：type属性为password。
* 隐藏域：type属性为hidden。
* 单选框：type属性为radio。（name值相同的为同一组。）
* 复选框：type属性为checkbox。
* 图像域：type属性为image。
* 文件上传域：type属性为file。（相当于图形版提交。）
* 提交：type属性为submit。
* 重设：type属性为reset。
* 无动作按钮：type属性为button。
* 属性 checked：设置单选框、复选框初始状态是否为选中状态。
* 属性 maxlength：指定文本框所允许输入最大字符数。
* 属性 readonly：指定只读。
* 属性 src、width、height：指定图像URL、宽、高。（type为image时）。
（以下为HTML5新增type）
* 颜色选择器：type为color。
* 日期选择器：type为date。
* 时间选择器：type为time。
* 本地日期、时间选择器：datetime-local。
* 周选择：type为week。
* 月份选择器：type为month。
* E-mail输入框：type为email。
* 电话号码输入框：type为tel。
* URL输入框：type为url。
* 只能输入数值的文本框：type为number。
* 拖动条：type为range。此时，input可以选择min（拖动条最小值）、max（拖动条最大值）、step（步长）。
* 搜索输入框：type为search。
<>②select与option元素
<select…/>元素创建列表框或者下拉菜单（只要select元素指定了size或者multiple元素则生成列表框），option即为一个列表项或菜单项。
* select属性 multiple：设置列表框和下拉菜单是否允许多选。
* select属性 size：指定列表框内可同时显示多少个列表项。
* select子元素 option：项
* select子元素 optgroup：将option项分组。
* option属性 disabled：禁用该选项。
* option属性 selected：指定初始状态是否被选中。
* option属性 value：该项的请求参数值。
* optgroup属性 label：指定该组标签。必填
* optgroup属性 disabled：禁用该选项组。
<>③textarea元素
textarea用于生成多行文本域
* 属性cols：指定文本域宽度
* 属性rows：指定文本域高度
* disabled：禁用文本域
* readonly：只读
* maxlength：设置文本域最多可以输入的字符数。
*
wrap：指定多行文本域是否添加换行符。如果不添加换行符，那么请求参数将会舍弃文本域的格式，只保留文本发送到URL。如果文本较多且格式较复杂，应指定wrap属性。
<>④fieldset与legend元素
fieldset元素用于将表单元素分组并以特殊的边界显示分组效果。legend元素为fieldset的子元素，表示分组的标题。
* 属性 name：指定fieldset名称
* 属性 form：指定该fieldset属于此表单
* 属性 disabled：禁用该组表单元素
<>⑤form属性
通过为表单控件指定form元素，可以使表单控件定义在form元素之外。
<>⑥autofocus属性
表单增加此属性后，加载页面后该控件获得焦点。 因此该属性只能有一个属性设置。
<>⑦placeholder属性
当用户还未在单行文本框、多行文本域输入内容时，显示placeholder的提示信息。
<>⑧list属性与datalist元素
将文本框和下拉菜单结合。input元素设置list属性为指定datalist元素的id，将文本框与下拉菜单结合。
* datalist元素表示一个下拉菜单，id属性唯一标识。option元素表示下拉菜单的项。
<>⑨autocomplete属性
如果启用autocomplete功能，浏览器会根据用户上次提交的数据生成列表框共用户选择。
<>⑩output元素
output表单控件用于显示其他元素的相关值得输出，一般配合脚本使用。output属性只属于表单，所以output要么位于表单内部，要么for属性指定表单。
<>⑪meter元素
表示一个已知最大值和最小值的计数仪表。
属性：value（当前值）、min、max、low、high、optimum。
<>⑫progress元素
表示进度条
属性：
max：指定进度条完成时的值。
value：当前值。
<>3.客户端校验（HTML5）
①HTML5通过input的属性来进行校验
* required：指定该表单控件必须填写。
* pattern：指定该表单控件的值必须符合pattern属性值得样式。
* min、max、step：针对数值、日期类型的input元素。限制value值在min-max之间，并符合step步长。
②通过调用checkvalidity方法进行校验
表单对象调用checkvalidity方法，返回true则表示可以通过输入校验，fanhuifalse则不可以通过。
③关闭校验
通过为提交元素（type=“submit”）设置属性formnovalidate。
热门工具 换一换