# 表单元素

URL: https://caijiao.org/html/05-forms/01-form-elements
Source: docs/html/05-forms/01-form-elements.md
Description: 表单元素用于收集用户输入的数据，是实现用户交互和数据提交的核心部分。HTML 提供丰富的表单控件，如文本框、复选框、单选框、按钮等，广泛应用于注册、搜索、留言等场景。

HTML 表单用于收集用户输入的信息，并通过提交将数据发送给服务器处理。表单由 `<form>` 标签包裹，内部包含多种输入控件。

## 基本结构

```html
<form action="/submit" method="post">
  <!-- 表单控件放在这里 -->
</form>
```

- `action`：指定表单数据提交的目标地址。
- `method`：提交方式，常用为 `get` 或 `post`。

## 常用表单元素

- **文本输入框** `<input type="text">`

```html
<label>姓名：<input type="text" name="username" /></label>
```

- **密码框** `<input type="password">`

```html
<label>密码：<input type="password" name="password" /></label>
```

- **单选按钮** `<input type="radio">`

```html
<label><input type="radio" name="gender" value="male" /> 男</label>
<label><input type="radio" name="gender" value="female" /> 女</label>
```

- **复选框** `<input type="checkbox">`

```html
<label><input type="checkbox" name="hobby" value="reading" /> 阅读</label>
<label><input type="checkbox" name="hobby" value="music" /> 音乐</label>
```

- **下拉菜单** `<select>`

```html
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>
```

- **多行文本框** `<textarea>`

```html
<textarea name="message" rows="4" cols="30"></textarea>
```

- **提交按钮** `<input type="submit">`

```html
<input type="submit" value="提交" />
```

通过组合不同的表单控件，可以构建功能丰富的用户交互界面，如登录表单、注册页面、搜索栏和留言板等。