第03章 表单

路人甲_0001
532 阅读12分钟

基本概念

在 HTML 中，表单（<form>）是用于收集用户输入信息的区域。它可以包含各种输入元素，如文本框、密码框、单选按钮、复选框、下拉菜单等，并且能够将用户输入的数据发送到服务器进行处理。

例如，一个简单的用户注册表单可能包含用户名、密码、确认密码、电子邮箱等输入字段，用户填写这些信息后，点击提交按钮，数据就会被发送到服务器进行注册验证等操作。

register.jpeg

表单元素是由 <form> 标签开始，以 </form> 标签结束。表单标签的内容通常是 表单元素 + 提交按钮 的形式。它虽然和 <div> 标签一样属于 块级元素，但它却有自己的实际用处，也就是若不将表单元素放置于表单标签<form>中，那某些表单元素将会失效，如：提交 按钮和 重置 按钮。

form *

表单使用 <form>标签定义，该标签表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<form> 标签具备以下属性：

  1. action：用于指定表单数据提交的目标 URL。这个 URL 通常指向服务器端的一个脚本或程序，该程序将接收并处理表单提交的数据。例如，在一个用户登录表单中，action属性可能指向一个名为login.php的 PHP 脚本，这个脚本会验证用户输入的用户名和密码是否正确。

  2. method：定义了表单数据发送到服务器的方式，主要有两种方式：GET和POST

    • GET：数据会附加在 URL 后面发送。数据的格式是URL?name1=value1&name2 = value2，其中name是表单元素的名称，value是用户输入的值。这种方式适合用于获取数据，例如简单的搜索功能。因为数据在 URL 中可见，所以它有长度限制（不同浏览器限制不同，一般在 2000 - 8000 字符左右），并且不太适合发送敏感信息，如密码。

      示例：如果一个表单中有一个名为search的文本输入框，用户输入html，使用GET方法提交后，URL 可能类似于https://example.com/search?search=html。

    • POST：表单数据被包含在 HTTP 请求的消息主体中发送，这种方式对数据长度限制相对宽松，并且更安全，适合用于发送敏感信息或者大量数据。例如，在用户注册表单中，用户的个人信息（如密码、联系方式等）通常使用POST方法发送。

      示例：在一个用户注册表单中，使用POST方法提交数据，数据会在 HTTP 请求主体中发送到服务器端的注册脚本，而不会在 URL 中显示。

  3. enctype：规定了在发送表单数据之前如何对数据进行编码。默认值是 application/x-www-form-urlencoded，这适用于大多数情况，尤其是当method属性为GET或POST发送简单的文本数据时。

当表单包含文件上传元素（<input type="file">）时，需要将enctype属性设置为multipart/form-data，这样才能正确地处理二进制文件数据。例如：<form action="upload.php" method="POST" enctype="multipart/form-data">，这个表单可以用于上传文件到upload.php脚本。

  1. target：指定在何处显示表单提交后的响应结果。它有以下几个常用的值：

    • _self：默认值，在当前窗口或框架中加载响应结果。

    • _blank：在新的浏览器窗口或标签页中加载响应结果。例如，在一个新闻订阅表单中，如果希望用户提交订阅信息后，订阅成功的消息在新窗口显示，可以使用target="_blank"。

    • _parent：在父框架集中加载响应结果（如果是在框架页面中）。

    • _top：在整个浏览器窗口中加载响应结果，忽略任何框架。

  2. novalidate：是一个布尔属性。如果设置了这个属性，浏览器将不会对表单进行 HTML5 的验证（如检查必填字段、数据格式等）。这在某些情况下很有用，比如你想通过自定义的 JavaScript 函数来验证表单，而不是使用浏览器的默认验证机制。

  3. name：表单的名称。该值不能是空字符串，而且在其所在的表单集合中的所有表单（form）元素之中必须是独一无二的（如果有的话）。

  4. autocomplete：用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 autocomplete 属性覆盖。可能的值有：

    • off：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能）。

    • on：浏览器可自动补全条目

Form Items

1、< label >

<label>标签主要用于为表单元素（如文本框、复选框、单选按钮等）提供一个用户友好的标签。它可以提高表单的可访问性，使得用户更容易理解表单元素的用途。例如，当用户点击<label>中的文本时，与之关联的表单元素（如复选框或单选按钮）也会被选中，这为用户操作提供了更大的点击区域。

有两种方式将<label>与表单元素关联。

  1. 一种是将表单元素放在<label>标签内部，例如：

    <label>用户名： <input type="text" name="username"></label>

  2. 另一种是使用for属性，for属性的值应该与表单元素的id属性值相同。例如：

    <label for="password">密码：</label>
<input type="password" id="password" name="password">

2、< input >

<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

常用属性

  • accept：文件上传控件中预期文件类型的提示。
  • alt：图片类型的 alt 属性。对无障碍是必需的。
  • autocomplete：表单自动填充特性提示 （除了 checkbox、radio 和按钮以外）（html5）。
  • autofocus：规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）（html5）。
  • checked：控件是否选中（仅针对 checkbox、radio 类型）。
  • disabled：表单控件是否禁用
  • form：将控件联系到表单元素中。
  • height：与 img 元素的 height 属性有相同含义，垂直方向上的维度值。
  • list：自动完成选项的 <datalist> 的 id 属性的值 （除了 hidden、password、checkbox、radio 和按钮以外）。
  • max：最大值 （date、month、week、time、datetime-local、number、range）。
  • maxlength：value 的最大长度（字符数） （text、search、url、tel、email、password）。
  • min：最小值 （date、month、week、time、datetime-local、number、range）。
  • minlength：value 的最小长度（字符数）（text、search、url、tel、email、password）。
  • multiple：布尔值。是否允许多个值*（email、file）*。
  • name：表单的控件名称，作为键值对的一部分与表单一同提交。
  • pattern：为了使得 value 有效，必须符合的模式 （text、search、url、tel、email、password）。
  • placeholder：当没有值设定时，出现在表单控件上的文字 （text、search、url、tel、email、password、number）。
  • readonly：布尔值。如果存在，其中的值将不可编辑 （除了 hidden、range、color、checkbox、radio 和按钮以外）。
  • required：布尔值。如果存在，一个值是必需的，或者必须勾选该值才能提交表格 （除了 hidden、range、color 和按钮以外）。
  • size：控件的尺寸 （text、search、url、tel、email、password）。
  • src：与 img 元素的 src 属性含义相同，图片资源的地址 （image）。
  • step：有效的增量值 （date、month、week、time、datetime-local、number、range）。
  • type：表单控件的类型。
  • value：表单控件的初始值。
  • width：与 img 元素的 width 属性有相同含义，水平方向上的维度值。

<input> 类型

  • button：用于创建一个可点击的按钮，通常配合 JavaScript 使用。
  • checkbox：创建复选框，允许用户选择多个选项。
  • color：生成一个颜色选择器，用户可以从中选取颜色。
  • date：提供一个日期选择器，用于选择日期。
  • date-local：用于选择日期和时间，没有时区信息。
  • email：创建一个用于输入电子邮件地址的文本框，有格式验证。
  • file：用于文件上传，用户可以选择本地文件。
  • hidden：在表单中创建一个隐藏的输入字段，用户不可见，用于传递后台需要的数据。
  • image：图像形式显示提交按钮，点击图像会提交表单。
  • month：提供一个月份选择器，用于选择年份和月份。
  • number：创建一个只能输入数字的文本框，可能有限制范围等属性。
  • password：创建一个用于输入密码的文本框，输入内容会被隐藏。
  • radio：创建单选按钮，一组中只能选择一个选项。
  • range：生成一个滑动条，用于选择一定范围内的值。
  • reset：创建一个重置按钮，用于将表单恢复到初始状态。
  • search：用于输入搜索关键字，可能有一些搜索相关的样式。
  • submit：创建一个提交按钮，用于将表单数据发送出去。
  • tel：用于输入电话号码，部分浏览器有格式辅助。
  • text：创建一个普通的文本输入框，用于输入文本。
  • time：提供一个时间选择器，用于选择时间。
  • url：创建一个用于输入网址的文本框，有格式验证。
  • week：提供一个选择周数和年份的工具。

3、< textarea >

<textarea>标签是 HTML 中的一个表单元素，主要用于创建一个多行文本输入区域。它允许用户输入较长的文本内容，比如用户评论、留言信息、文章内容等，这是它与只能输入单行文本的<input type="text">标签的主要区别。

常用属性：

  • rows / cols：这两个属性用于控制<textarea>的初始大小。rows 属性指定文本区域的行数，cols 属性指定列数。不过在实际应用中，更常用 CSS 来精确控制文本区域的大小。
  • name：用于在表单提交时标识这个文本区域的数据。当表单被提交后，服务器端脚本可以通过这个name属性的值来获取用户输入的文本内容。
  • placeholder：这个属性用于在文本区域为空时显示一些提示性的文字，当用户开始输入内容时，这些提示文字就会消失。
  • disabled：当设置为true（只需要在标签中写上disabled即可）时，文本区域将被禁用，用户无法在其中输入内容。
  • readonly：设置了这个属性后，文本区域中的内容可以被用户查看，但不能被修改。

使用示例：

<form action="process_form.php" method="POST">
    <label for="message">请留下您的留言：</label>
    <textarea id="message" name="message" rows="6" cols="40"></textarea>
    <input type="submit" value="提交留言">
</form>

在这个例子中，用户可以在<textarea>中输入留言内容，当点击 “提交留言” 按钮后，留言内容会通过POST方法发送到process_form.php文件进行处理，服务器端脚本可以通过name="message"来获取用户输入的文本。

4、< select >

<select>标签是 HTML 中的表单元素，用于创建一个下拉菜单或者列表框，用户可以从预定义的选项集合中选择一个或多个选项。

单选下拉菜单示例

<form name="myForm" action="javascript:(void);" method="POST" target="_blank">
	<label>英雄联盟被称为法术机关枪的英雄是：</label>
	<select>
		<option value="皎月女神·戴安娜">皎月女神·戴安娜</option>
		<option value="符文法师·瑞">符文法师·瑞兹</option>
		<option value="机械先驱·维克托">机械先驱·维克托</option>
		<option value="暗黑元首·辛德拉">暗黑元首·辛德拉</option>
		<option value="远古巫灵·泽拉斯">远古巫灵·泽拉斯</option>
	</select>	
</form>

  效果演示：

select_sigle.jpeg

多选下拉菜单示例

<form name="myForm" action="javascript:(void);" method="POST" target="_blank">
	<label>中国四大名著包括：</label>
	<select multiple>
		<option value="战争与和平">战争与和平</option>
		<option value="活着">活着</option>
		<option value="西游记">西游记</option>
		<option value="呼啸山庄">呼啸山庄</option>
		<option value="水浒传">水浒传</option>
		<option value="红楼梦">红楼梦</option>
		<option value="三国演义">三国演义</option>
	</select>	
</form>

效果演示：

select_multiple.jpeg

提示：在“windows操作系统”中按住“Ctrl”按钮，在“mac操作系统”中按住“command”按钮来选择多个选项，选择多个项的操作类似于操作系统中选择文件的操作。

分组下拉菜单示例

<form name="myForm" action="javascript:(void);" method="POST" target="_blank">
	<label>HenrryLee's 菜谱：</label>
	<select multiple size="13">
		<optgroup label="特色菜">
			<option value="苦瓜烧鸭">苦瓜烧鸭</option>
			<option value="泡椒鲫鱼">泡椒鲫鱼</option>
			<option value="油爆大肠">油爆大肠</option>
			<option value="藿香排骨">藿香排骨</option>
		</optgroup>
		<optgroup label="凉菜">
			<option value="手拍黄瓜">手拍黄瓜</option>
			<option value="蒜泥白肉">蒜泥白肉</option>
			<option value="凉拌三丝">凉拌三丝</option>
		</optgroup>
		<optgroup label="汤类">
			<option value="紫菜蛋花汤">紫菜蛋花汤</option>
			<option value="白菜豆腐汤">白菜豆腐汤</option>
			<option value="萝卜玉米汤">萝卜玉米汤</option>
		</optgroup>
	</select>	
</form>

  效果演示：

select_group.jpeg

5、< button >

<button> 标签属于行内块元素，和 <input> 中 type 为button/submit/reset 的元素一样，用于创建按钮。

该标签的 type 属性支持button、submit、reset。它是有闭合标签的元素。

与 <input type="button"> 的区别：

  1. 按钮文本：<button>的文本放在标签内容中，<input>放在value属性里。
  2. 提交时：IE 浏览器提交<button>标签内的内容，其他浏览器提交其value属性值。
  3. 内容显示：<button>内可同时显示文本、图片、表格、多媒体，<input>只能显示其一。
  4. type 默认值：<button>在 IE 中默认button，其他浏览器和 W3C 规范默认submit，为统一行为，通常要设置type初始值。

代码示例：

<form name="myForm" action="javascript:(void);" method="POST" target="_blank">
	<button type="button" value="普通按钮">普通按钮</button>
	<button type="submit" value="提交按钮">提交按钮</button>
	<button type="reset"  value="重置按钮">重置按钮</button>
</form>

6、< datalist >

使用 <datalist> 标签可以实现下拉列表，需要配合一个属性为“list”的<input>标签使用，通过将list的属性值设置为<datalist>标签的“ID”属性的值来关联，实现一个既可输入，又可选择的下拉菜单。当然，IE浏览器不支持该元素。

<form name="myForm" action="javascript:(void);" method="POST" target="_blank">
	<input type="text" placeholder="请选择/输入您喜欢的城市：" size="25" list="citys">
	<datalist id="citys">
		<option value="北京">北京</option>
		<option value="上海">上海</option>
		<option value="成都">成都</option>
		<option value="香港">香港</option>
		<option value="厦门">厦门</option>
		<option value="昆明">昆明</option>
		<option value="大理">大理</option>
	</datalist>
</form>

效果演示：

datalist.jpeg

7、< fieldset >

用于将表单内的相关元素分组，通常可以结合<legend>标签一起使用，<legend>标签用于为分组提供标题，这样可以使表单结构更加清晰，方便用户理解表单内容。

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>
avatar
文章
阅读
粉丝