---
title: "IT课程 HTML基础 013_表单和用户输入"
date: 2024-01-16T22:30:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "html表单", "html输入"]
categories: ["学习", "HTML基础"]
canonical: https://www.zhaojian.net/it-course-html-013/
author: 赵健
---

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

示例：

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

> [!小结]
> - form 表单本身并不可见。

***
### 文本字段

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

示例：

```html
<form>
姓名: <input type="text" name="name"><br>
年龄: <input type="text" name="age">
</form>
```

效果：

![示例效果](/uploads/2024/01/20231218221752.png)

> [!小结]
> - 在大多数浏览器中，文本域的默认宽度是 20 个字符。

***
### 密码字段

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

示例：

```html
<form>
密码: <input type="password" name="pwd">
</form>
```

效果：

![示例效果](/uploads/2024/01/20231218221815.png)

> [!小结]
> - 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

***
### 单选按钮（Radio Buttons）

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

示例：

```html
<form action="">
性别：
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</form>
```

效果：

![示例效果](/uploads/2024/01/20231218221909.png)

> [!小结]
> - 单选按钮的 `name` 属性值必须相同，否则它们将不会属于同一个组。
> - `checked` 属性用于指定单选框是否默认选中。

***
### 复选框（Checkboxes）

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

示例：

```html
<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>
```

效果：

![示例效果](/uploads/2024/01/20231218221933.png)

> [!小结]
> - `checked` 属性用于指定复选框是否默认选中。

***
### 下拉列表（select）

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

示例：

```html
<form action="">
	请选择您的国家：
	<select name="country">
	  <option value="china">中国</option>
	  <option value="us">美国</option>
	  <option value="japan">日本</option>
	</select>
</form>
```

效果：

![示例效果](/uploads/2024/01/20231218222051.png)

> [!小结]
> - `selected` 属性用于指定下拉列表的默认选项。
> - `disabled` 属性用于指定下拉列表是否可用。
> - 可以使用 `size` 属性来指定下拉列表中可见选项的数量。

***
### 提交按钮（Submit、Reset、Button）

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

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

示例：

```html
<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>
```

效果：

![示例效果](/uploads/2024/01/20231218222130.png)


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

***
#### 表单元素及属性

|元素|<div style="width:50px;">类型</div>|描述|属性|
|---|---|---|---|
|`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`|