【HTML】表单标签
<form>是用户输入信息与网页互动，通俗的说就是图一所示：
表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。
1、<form>
1.1、简介
<form>
<!-- 各种表单控件-->
</form>
<form action="https://example.com/api" method="post">
<label for="POST-name">用户名：</label>
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
</form>
- accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。
- action：服务器接收数据的 URL。
- autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。
- method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<dialog>内部使用）。
- enctype：当method属性等于post时，该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded（默认值），multipart/form-data（文件上传的情况），text/plain。
- name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。
- novalidate：布尔属性，表单提交时是否取消验证。
- target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。
1.2、enctype 属性
Content-Disposition: form-data; name="mycontrol"
下面是上传文件的表单。
<form action="https://example.com/api"
enctype="multipart/form-data"
method="post">
用户名：<input type="text" name="submit-name"><br>
文件：<input type="file" name="files"><br>
<input type="submit" value="上传"> <input type="reset" value="清除">
</form>
上面代码中，输入用户名Larry，选中一个file1.txt文件，然后点击“上传”。浏览器发送的实际数据如下。
Content-Type: multipart/form-data; boundary=--AaB03x
--AaB03x
Content-Disposition: form-data; name="submit-name"
Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--AaB03x--
2、<fieldset>，<legend>
<fieldset>标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。
<form>
<fieldset>
<p>年龄：<input type="text" name="age"></p>
<p>性别：<input type="text" name="gender"></p>
</fieldset>
</form>
上面代码中，两个输入框是一组，它们的外面会显示一个方框。
<fieldset>有以下属性。
- disabled：布尔属性，一旦设置会使得<fieldset>内部包含的控件都不可用，都变成灰色状态。
- form：指定控件组所属的<form>，它的值等于<form>的id属性。
- name：该控件组的名称。
<legend>标签用来设置<fieldset>控件组的标题，通常是<fieldset>内部的第一个元素，会嵌入显示在控件组的上边框里面。
<fieldset>
<legend>学生情况登记</legend>
<p>年龄：<input type="text" name="age"></p>
<p>性别：<input type="text" name="gender"></p>
</fieldset>
上面代码中，这个控件组的标题会，嵌入显示在<fieldset>的上边框。
3、<label>
<label>标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。
<label for="user">用户名：</label>
<input type="text" name="user" id="user">
上面代码中，输入框前面会有文字说明“用户名：”。
<label>的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的<label>标签，也能选中该控件。点击<label>，就相当于控件本身的click事件。
<label>的for属性关联相对应的控件，它的值是对应控件的id属性。所以，控件最好设置id属性。
控件也可以放在<label>之中，这时不需要for属性和id属性。
<label>用户名：
<input type="text" name="user">
</label>
<label>的属性如下。
- for：关联控件的id属性。
- form：关联表单的id属性。设置了该属性后，<label>可以放置在页面的任何位置，否则只能放在<form>内部。
一个控件可以有多个关联的<label>标签。
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>
上面代码中，<input>有两个关联的<label>。
4、<input>
4.1、简介
<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。
<input>
<!-- 等同于 -->
<input type="text">
上面代码会生成一个单行的输入框，用户可以在里面输入文本。
<input>的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
- autofocus：布尔属性，是否在页面加载时自动获得焦点。
- disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
- form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。
- list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。
- name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
- readonly：布尔属性，是否为只读。
- required：布尔属性，是否为必填。
- type：控件类型，详见下文。
- value：控件的值。
4.2、类型
type属性决定了<input>的形式。该属性可以取以下值。
（1）text
type=”text”是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
text输入框有以下配套属性。
- maxlength：可以输入的最大字符数，值为一个非负整数。
- minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。
- pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern=”[a-z]{4,8}”。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。
- placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。
- readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。
- size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。
- spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。
（2）search
type=”search”是一个用于搜索的文本输入框，基本等同于type=”text”。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。
下面是一个例子。
<form>
<input type="search" id="mySearch" name="q"
placeholder="输入搜索词……" required>
<input type="submit" value="搜索">
</form>
（3）button
type=”button”是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。
<input type="button" value="点击">
建议尽量不使用这个类型，而使用<button>标签代替，一则语义更清晰，二则<button>标签内部可以插入图片或其他 HTML 代码。
（4）submit
type=”submit”是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。
<input type="submit" value="提交">
如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是Submit。
该类型有以下配套属性，用来覆盖<form>标签的相应设置。
- formaction：提交表单数据的服务器 URL。
- formenctype：表单数据的编码类型。
- formmethod：提交表单使用的 HTTP 方法（get或post）。
- formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
- formtarget：收到服务器返回的数据后，在哪一个窗口显示。
（5）image
type=”image”表示将一个图像文件作为提交按钮，行为和用法与type=”submit”完全一致。
<input type="image" alt="登陆" src="login-button.png">
上面代码中，图像文件是一个可以点击的按钮，点击后会提交数据到服务器。
该类型有以下配套属性。
- alt：图像无法加载时显示的替代字符串。
- src：加载的图像 URL。
- height：图像的显示高度，单位为像素。
- width：图像的显示宽度，单位为像素。
- formaction：提交表单数据的服务器 URL。
- formenctype：表单数据的编码类型。
- formmethod：提交表单使用的 HTTP 方法（get或post）。
- formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
- formtarget：收到服务器返回的数据后，在哪一个窗口显示。
用户点击图像按钮提交时，会额外提交两个参数x和y到服务器，表示鼠标的点击位置，比如x=52&y=55。
x是横坐标，y是纵坐标，都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性，比如name=”position”，那么将以该值作为坐标的前缀，比如position.x=52&position.y=55。这个功能通常用来地图类型的操作，让服务器知道用户点击了地图的哪个部分。
（6）reset
type=”reset”是一个重置按钮，用户点击以后，所有表格控件重置为初始值。
<input type="reset" value="重置">
如果不设置value属性，浏览器会在按钮上面加上默认文字，通常是Reset。
这个控件用处不大，用户点错了还会使得所有已经输入的值都被重置，建议不要使用。
（7）checkbox
type=”checkbox”是复选框，允许选择或取消选择该选项。
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>
<form>
<fieldset>
<p>年龄：<input type="text" name="age"></p>
<p>性别：<input type="text" name="gender"></p>
</fieldset>
</form>
- disabled：布尔属性，一旦设置会使得<fieldset>内部包含的控件都不可用，都变成灰色状态。
- form：指定控件组所属的<form>，它的值等于<form>的id属性。
- name：该控件组的名称。
<fieldset>
<legend>学生情况登记</legend>
<p>年龄：<input type="text" name="age"></p>
<p>性别：<input type="text" name="gender"></p>
</fieldset>
3、<label>
<label>标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。
<label for="user">用户名：</label>
<input type="text" name="user" id="user">
上面代码中，输入框前面会有文字说明“用户名：”。
<label>的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的<label>标签，也能选中该控件。点击<label>，就相当于控件本身的click事件。
<label>的for属性关联相对应的控件，它的值是对应控件的id属性。所以，控件最好设置id属性。
控件也可以放在<label>之中，这时不需要for属性和id属性。
<label>用户名：
<input type="text" name="user">
</label>
<label>的属性如下。
- for：关联控件的id属性。
- form：关联表单的id属性。设置了该属性后，<label>可以放置在页面的任何位置，否则只能放在<form>内部。
一个控件可以有多个关联的<label>标签。
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>
上面代码中，<input>有两个关联的<label>。
4、<input>
4.1、简介
<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。
<input>
<!-- 等同于 -->
<input type="text">
上面代码会生成一个单行的输入框，用户可以在里面输入文本。
<input>的属性非常多，有些属性是某个类型专用的，放在下文的“类型”部分介绍。这里介绍一些所有类型的共同属性。
- autofocus：布尔属性，是否在页面加载时自动获得焦点。
- disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
- form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。
- list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。
- name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
- readonly：布尔属性，是否为只读。
- required：布尔属性，是否为必填。
- type：控件类型，详见下文。
- value：控件的值。
4.2、类型
type属性决定了<input>的形式。该属性可以取以下值。
（1）text
type=”text”是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
text输入框有以下配套属性。
- maxlength：可以输入的最大字符数，值为一个非负整数。
- minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。
- pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern=”[a-z]{4,8}”。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。
- placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。
- readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。
- size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。
- spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。
（2）search
type=”search”是一个用于搜索的文本输入框，基本等同于type=”text”。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。
下面是一个例子。
<form>
<input type="search" id="mySearch" name="q"
placeholder="输入搜索词……" required>
<input type="submit" value="搜索">
</form>
（3）button
type=”button”是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。
<input type="button" value="点击">
建议尽量不使用这个类型，而使用<button>标签代替，一则语义更清晰，二则<button>标签内部可以插入图片或其他 HTML 代码。
（4）submit
type=”submit”是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。
<input type="submit" value="提交">
如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是Submit。
该类型有以下配套属性，用来覆盖<form>标签的相应设置。
- formaction：提交表单数据的服务器 URL。
- formenctype：表单数据的编码类型。
- formmethod：提交表单使用的 HTTP 方法（get或post）。
- formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
- formtarget：收到服务器返回的数据后，在哪一个窗口显示。
（5）image
type=”image”表示将一个图像文件作为提交按钮，行为和用法与type=”submit”完全一致。
<input type="image" alt="登陆" src="login-button.png">
上面代码中，图像文件是一个可以点击的按钮，点击后会提交数据到服务器。
该类型有以下配套属性。
- alt：图像无法加载时显示的替代字符串。
- src：加载的图像 URL。
- height：图像的显示高度，单位为像素。
- width：图像的显示宽度，单位为像素。
- formaction：提交表单数据的服务器 URL。
- formenctype：表单数据的编码类型。
- formmethod：提交表单使用的 HTTP 方法（get或post）。
- formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
- formtarget：收到服务器返回的数据后，在哪一个窗口显示。
用户点击图像按钮提交时，会额外提交两个参数x和y到服务器，表示鼠标的点击位置，比如x=52&y=55。
x是横坐标，y是纵坐标，都以图像左上角作为原点(0, 0)。如果图像按钮设置了name属性，比如name=”position”，那么将以该值作为坐标的前缀，比如position.x=52&position.y=55。这个功能通常用来地图类型的操作，让服务器知道用户点击了地图的哪个部分。
（6）reset
type=”reset”是一个重置按钮，用户点击以后，所有表格控件重置为初始值。
<input type="reset" value="重置">
如果不设置value属性，浏览器会在按钮上面加上默认文字，通常是Reset。
这个控件用处不大，用户点错了还会使得所有已经输入的值都被重置，建议不要使用。
（7）checkbox
type=”checkbox”是复选框，允许选择或取消选择该选项。
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>
<label for="user">用户名：</label>
<input type="text" name="user" id="user">
<label>用户名：
<input type="text" name="user">
</label>
- for：关联控件的id属性。
- form：关联表单的id属性。设置了该属性后，<label>可以放置在页面的任何位置，否则只能放在<form>内部。
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>
4、<input>
4.1、简介
<input>
<!-- 等同于 -->
<input type="text">
- autofocus：布尔属性，是否在页面加载时自动获得焦点。
- disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。
- form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。
- list：关联的<datalist>的id属性，设置该控件相关的数据列表，详见后文。
- name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。
- readonly：布尔属性，是否为只读。
- required：布尔属性，是否为必填。
- type：控件类型，详见下文。
- value：控件的值。
4.2、类型
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
- maxlength：可以输入的最大字符数，值为一个非负整数。
- minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。
- pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成pattern=”[a-z]{4,8}”。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。
- placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，否则会消失。
- readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。
- size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。
- spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。
<form>
<input type="search" id="mySearch" name="q"
placeholder="输入搜索词……" required>
<input type="submit" value="搜索">
</form>
<input type="button" value="点击">
<input type="submit" value="提交">
- formaction：提交表单数据的服务器 URL。
- formenctype：表单数据的编码类型。
- formmethod：提交表单使用的 HTTP 方法（get或post）。
- formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
- formtarget：收到服务器返回的数据后，在哪一个窗口显示。
<input type="image" alt="登陆" src="login-button.png">
- alt：图像无法加载时显示的替代字符串。
- src：加载的图像 URL。
- height：图像的显示高度，单位为像素。
- width：图像的显示宽度，单位为像素。
- formaction：提交表单数据的服务器 URL。
- formenctype：表单数据的编码类型。
- formmethod：提交表单使用的 HTTP 方法（get或post）。
- formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。
- formtarget：收到服务器返回的数据后，在哪一个窗口显示。
<input type="reset" value="重置">
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：3.239.76.211，归属地:弗吉尼亚州Ashburn ，欢迎您的访问!
文章链接：https://www.ooize.com/html-form-label.html
文章链接：https://www.ooize.com/html-form-label.html
订阅
登录
0 评论
