HTML 表单(Form)是 HTML 中非常重要的一部分,它能让用户在网页上输入信息,并将信息提交到服务器。
示例:
<form action="/submit" method="post">
<!-- 表单元素在这里 -->
</form>
<form>
元素定义了用户输入数据的区域,并且可以包含不同类型的输入元素,如文本域<textarea>
、下拉列表<select>
、单选框<radio>
、复选框<checkbox>
和按钮<button>
等。
action
:定义表单数据提交到服务器后的处理文件的 URL。method
:定义数据发送到服务器所使用的HTTP方法,常用的值有 “get” 和 “post”。name
: 用于指定表单的名称。表单名称用于标识表单,并在服务器端处理表单数据时使用。enctype
:用于指定表单数据的编码方式。表单数据可以使用 application/x-www-form-urlencoded
或 multipart/form-data
编码方式。autocomplete
:用于指定是否启用表单的自动完成功能。如果设置为 on
,则浏览器将会自动填充表单中之前输入过的数据。novalidate
:用于指定是否验证表单数据。如果设置为 on
,则表单数据在提交之前将不会进行验证。在表单中,我们经常需要用户输入字母、数字等文本内容。这可以通过<input>
元素完成,其type
属性设置为 “text”。
示例:
<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="age">
</form>
效果:
在大多数浏览器中,文本域的默认宽度是 20 个字符。
如果你需要用户输入密码,可以将<input>
元素的type
属性设置为 “password”,输入的内容会被隐藏起来。
示例:
<form>
密码: <input type="password" name="pwd">
</form>
效果:
单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type
属性值为 “radio”。
示例:
<form action="">
性别:
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</form>
效果:
name
属性值必须相同,否则它们将不会属于同一个组。checked
属性用于指定单选框是否默认选中。复选框可以选取一个或多个选项,使用 <input type="checkbox">
定义
示例:
<form>
您使用过的APP:
<input type="checkbox" name="app" value="jd">京东
<input type="checkbox" name="app" value="wechat">微信
<input type="checkbox" name="app" value="qq">QQ
<input type="checkbox" name="app" value="douyin">抖音
</form>
效果:
checked
属性用于指定复选框是否默认选中。下拉列表可以让用户从多个选项中选择一个。它由<select>
元素创建,并使用<option>
元素来定义选项。
示例:
<form action="">
请选择您的国家:
<select name="country">
<option value="china">中国</option>
<option value="us">美国</option>
<option value="japan">日本</option>
</select>
</form>
效果:
selected
属性用于指定下拉列表的默认选项。disabled
属性用于指定下拉列表是否可用。size
属性来指定下拉列表中可见选项的数量。表单通常需要一个按钮来提交或确认用户的输入。submit
、reset
和 button
都是 HTML 中的表单按钮元素。
类型 | 属性 | 功能 | 使用场景 |
---|---|---|---|
submit | type="submit" | 提交表单数据 | 提交登录表单、提交注册表单等 |
reset | type="reset" | 重置表单数据 | 重置搜索表单、重置购物车等 |
button | type="button" | 无 | 通常配合JavaScript使用 执行操作、跳转页面等 |
image | type="image" | 使用图像来表示按钮 | 执行操作、跳转页面等 |
示例:
<form action="/submit" method="post">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<button type="button" value="确认按钮">确认按钮</button>
<input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="图像按钮" width="50" height="50">
</form>
效果:
元素 | 类型 | 描述 | 属性 |
---|---|---|---|
form | 表单 | 表单的容器元素。它指定表单的名称、提交方式和提交地址。 | name、action、method、enctype、accept-charset、target、autocomplete、novalidate |
input | 输入 | 表单中最常用的元素。它可以接收各种类型的用户输入,例如文本、数字、日期等。 | type、name、value、placeholder、disabled、readonly、autocomplete、required、pattern、min、max、step |
textarea | 输入 | 用于接收多行用户输入。 | name、cols、rows |
select | 选择 | 用于接收用户选择,它可以包含多个选项。 | name、multiple、size |
option | 选择 | 用于 select 元素中,定义可供选择的选项。 | value、selected |
radio | 选择 | 用于接收单选用户输入。它可以包含多个单选框。 | name、value、checked |
checkbox | 选择 | 用于接收多选用户输入。它可以包含多个复选框。 | name、value、checked |
submit | 按钮 | 用于提交表单。 | value |
reset | 按钮 | 用于重置表单。 | value |
button | 按钮 | 用于创建按钮。它可以用于提交表单、重置表单、或执行其他操作。 | type、name、value |
label | 标签 | 用于为输入元素提供标签。标签可以帮助用户理解输入元素的用途。 | for |
fieldset | 分组 | 用于将表单元素分组。 | name、legend |
legend | 标题 | 用于为 fieldset 元素提供标题。 | |
optgroup | 分组 | 用于将选项分组。 | label |