IT课程 HTML基础 013_表单和用户输入
2024-01-16 21:30:00 # 学习 # HTML基础

表单

HTML 表单（Form）是 HTML 中非常重要的一部分，它能让用户在网页上输入信息，并将信息提交到服务器。

示例：

1
2
3
<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，则表单数据在提交之前将不会进行验证。

[!小结]

  • form 表单本身并不可见。

文本字段

在表单中，我们经常需要用户输入字母、数字等文本内容。这可以通过<input>元素完成，其type属性设置为 “text”。

示例：

1
2
3
4
<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="age">
</form>

效果：

示例效果

[!小结]

  • 在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

如果你需要用户输入密码，可以将<input>元素的type属性设置为 “password”，输入的内容会被隐藏起来。

示例：

1
2
3
<form>
密码: <input type="password" name="pwd">
</form>

效果：

示例效果

[!小结]

  • 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）

单选按钮和复选框可以让用户在多个选项中选择一个或多个。单选按钮的type属性值为 “radio”。

示例：

1
2
3
4
5
<form action="">
性别：
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</form>

效果：

示例效果

[!小结]

  • 单选按钮的 name 属性值必须相同，否则它们将不会属于同一个组。
  • checked 属性用于指定单选框是否默认选中。

复选框（Checkboxes）

复选框可以选取一个或多个选项，使用 <input type="checkbox"> 定义

示例：

1
2
3
4
5
6
7
<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）

下拉列表可以让用户从多个选项中选择一个。它由<select>元素创建，并使用<option>元素来定义选项。

示例：

1
2
3
4
5
6
7
8
<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）

表单通常需要一个按钮来提交或确认用户的输入。submit、reset 和 button 都是 HTML 中的表单按钮元素。

类型 属性 功能 使用场景
submit type="submit" 提交表单数据 提交登录表单、提交注册表单等
reset type="reset" 重置表单数据 重置搜索表单、重置购物车等
button type="button" 无 通常配合JavaScript使用 执行操作、跳转页面等
image type="image" 使用图像来表示按钮 执行操作、跳转页面等

示例：

1
2
3
4
5
6
<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>

效果：

示例效果

[!小结]

  • post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
  • get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.zhaojian.net/?page=1，这里的 page=1 就是 get 方法提交的数据。

表单元素及属性

元素
类型
 描述 属性
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
上一页
#IT课程 #HTML课程 #CSS课程 #JavaScript课程 #Java课程 #计算机系统与网络 #html表单 #html输入
下一页