form基础表单总结

一、form表单用户搜集用户输入内容。

form表单的相关属性：

1.action：此属性表示提交表单时要执行的操作，通常是将表单数据提交到服务器处理表单数据的文件脚本中。

2.target：此属性表示在提交表单之后，服务器相应数据在何处显示。

默认值是_self，表示在当前窗口显示，值_blank表示在新窗口中显示。

3.method：此属性表示提交表单时要使用的HTTP方法。

可选值有get和post两种，默认值是get。

get与post的区别：

4.autocomplete：此属性表示是否开启表单自动补全，如果开启则浏览器会根据之前用户输入的值自动补全值。默认是开启的，可选值值有on(开)、off(关)。

5.novalidate：此属性表示表单提交时是否不进行表单验证，如果设置，则表示不进行表单验证。

默认是进行表单验证的。

用户名:

email在提交时会进行验证邮箱格式是否正确，如果不正确，则不会进行提交并给予提示。

如果设置了novalidate属性且为真，则不会进行表单验证。

用户名:

二、表单的相关元素

1.ladel标签

ladel标签改进了对鼠标用户的可用性，它能够使鼠标点击标签的文本触发输入框获取焦点。也能够使按钮触发点击事件。

其中label标签的for属性指定的字段要与相应input标签的id字段相同，才能生效。也可以不设置for和id字段，则包裹内生效。

总之：如果label标签没有包裹input标签，则必须设置for和id对应字段才能生效；如果label标签包裹了input标签，则可以不设置for和id字段也会生效（注意是都不设置）。

用户名（不包裹，不使用for和id）
用户名（不包裹，使用for和id）
用户名（包裹，不使用for和id）
用户名（包裹，使用for和id）

2.input标签

input元素可以通过设置不同的type属性值，显示不同的状态。input标签通常要设置name字段以指定向服务器提交字段时的名称、设置value字段表示提交值。

用户名:
密码:
性别:男:女:
爱好:看剧:追番:打游戏:内卷:

HTML5新增的输入类型：

类型	作用	展示
number	限制输入为数字才能生效
email	限制输入为邮箱才能生效
color	获取焦点后会弹出颜色选择器
date	日期选择器会出现在输入框中
range	能够显示滑块字段
month	日期选择器（月份）
week	日期选择器（周）
time	时间选择器
datetime	时间选择器	测试的时候没有生效
datatime-clocle	日期选择器
tel	电话输入
url	在提交时能够自动验证 url 字段。
search	用于搜索字段（搜索字段的表现类似常规文本字段）

input的输入限制属性：

3.select标签与option标签

用于包裹生成下拉选择框。name属性指定提交名称，id可以配合的for属性实现鼠标点击优化。

4.fieldset标签与legend标签