# 常用控件

URL: https://caijiao.org/html/05-forms/02-controls
Source: docs/html/05-forms/02-controls.md
Description: HTML 提供了多种常用控件，如按钮、文件上传、颜色选择、日期选择等，增强网页表单的功能性与交互性，满足不同场景的数据输入需求。

除了基本的文本输入框和按钮，HTML 还提供了多种常用控件，适用于更丰富的用户输入场景。这些控件通过 `<input>` 标签配合不同的 `type` 属性实现。

## 按钮类控件

- **普通按钮**

```html
<button type="button">点击我</button>
```

- **提交按钮**

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

- **重置按钮**

```html
<input type="reset" value="重置内容" />
```

## 文件上传

```html
<label>上传文件：<input type="file" name="file" /></label>
```

允许用户上传本地文件，如图片、文档等。

## 日期和时间选择

```html
<label>选择日期：<input type="date" name="birthday" /></label>
<label>选择时间：<input type="time" name="alarm" /></label>
```

用于选择标准格式的日期和时间，适合表单规范化收集时间类数据。

## 数值控件

```html
<label>数量：<input type="number" name="amount" min="1" max="10" /></label>
```

用于输入整数或小数，可以设定最大值、最小值和步进值。

## 范围滑块

```html
<label>音量：<input type="range" name="volume" min="0" max="100" /></label>
```

通过滑块方式选择范围值，适用于音量、亮度等设置。

## 颜色选择器

```html
<label>选择颜色：<input type="color" name="favcolor" /></label>
```

让用户从调色板中选择颜色值，常用于设置主题或界面颜色。

通过这些控件，可以极大丰富表单交互形式，提升用户体验和输入效率。