表单的作用
HTML 表单用于搜集不同类型的用户输入
表单的元素
<form>定义Html表单
一个完整的表单应该包含的元素
实际上一个表单所包含的元素就是不同属性的<input>标签
-
复选框
-
单选按钮
-
提交按钮
-
...
<form>标签的属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。定义在提交表单时执行的动作。--->可以指定提交到那个地方。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。要正确地被提交，每个输入字段必须设置一个 name 属性--->没有name属性的标签不会被提交 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
| rel | 规定链接资源和当前文档之间的关系。 |
<input>标签的三种type属性
| 类型 | 描述 |
|---|---|
| text | 定义常规文本输入。 |
| radio | 定义单选按钮输入（选择多个选择之一） |
| submit | 定义提交按钮（提交表单） |
<input>之text属性--->定义文本输入的单行输入字段
文本字段的默认宽度是 20 个字符
<input>之radio(n.收音机)属性--->定义单选按钮
checked属性一开始就会标记一个按钮，unselectable属性一开始不会
<input>之submit--->定义向表单处理程序(form-handler)提交表单的按钮
action定义表单提交执行的动作--->指定某个服务器脚本来处理被提交表单
省略 action 属性，则 action 会被设置为当前页面。
method属性--->规定在提交表单时所用的 HTTP 方法（GET 或 POST）
在<form>标签后直接+method后填方法
<form accept-charset="UTF-8" autocomplete="off" action="/JavaScript/Coding/Code/TestDemoNo1.js" method="get">
内容:<br />
<input border="1" type="text" pattern="{5,17}$" />
<br />
<input type="submit" />
</form>
在之前的分类有讲过Get和Post的区别
<fieldset>组合表单--->表单当中套边框
<fieldset>* 元素组合表单中的相关数据，位于<form>标签内
<legend>*元素为 <fieldset>元素定义标题
<form contenteditable="false" accept-charset="UTF-8" autocomplete="off" action="/JavaScript/Coding/Code/TestDemoNo1.js" method="post">
<fieldset>
<legend>Login:</legend>
<br />
UserName:<br />
<input border="1" name="username" type="text" min="1" max="11" maxlength="10" />
<br />
PassWord:<br />
<input border="1" name="password" type="password" min="1" max="11" pattern="^[a-zA-Z]\w{5,17}$" maxlength="10" />
<br />
<input type="submit" />
</fieldset>
</form>
<form>标签后属性的规范：
-
提交方法--->
method -
表单中使用的字符集--->
accept-charset -
表单提交地址--->
action -
action 属性中地址的目标--->
target -
浏览器应该自动完成表单--->
autocomplete -
浏览器是否验证表单--->
novalidate -
被提交数据的编码--->
ectype
<form method="post" accept-charset="UTF-8" action="/JavaScript/Coding/Code/TestDemoNo1.js" target="_self" autocomplete="off" novalidate ectype="application/x-www-form-urlencoded">
<fieldset>
<legend>Login:</legend>
<br />
UserName:<br />
<input border="1" name="username" type="text" min="1" max="11" maxlength="10" pattern="{0,10}" />
<br />
PassWord:<br />
<input border="1" name="password" type="password" min="1" max="11" maxlength="10" pattern="^[a-zA-Z]\w{5,17}$" />
<br />
<input type="submit" />
</fieldset>
</form>
rel属性--->规定当前文档和被链接文档之间的关系
语法：
<form rel="value">
属性值：
| 值 | 描述 |
|---|---|
| external | 规定引用的文档不是当前站点的一部分。 |
| help | 链接到帮助文档。 |
| license | 链接到文档的版权信息。 |
| next | 集合中的下一个文档。 |
| nofollow | 链接到未经认可的文档，例如付费链接。（Google 使用 "nofollow" 来指定 Google 搜索蜘蛛不应跟踪该链接） |
| noopener | |
| noreferrer | 规定如果用户点击该超链接，则浏览器不应发送 HTTP 推荐标头。 |
| opener | |
| prev | 集合中的上一个文档。 |
| search | 链接到文档的搜索工具。 |
这一块的使用方式并不是很熟悉！！！