# 表单控件与字段

纯样式组件：不需要 JS，写好标记即可。字段（标签、控件、提示）、文本输入、下拉、多行文本、复选框、单选、开关。带搜索、清除、校验等行为的输入框见「输入框」「下拉选择」等组件。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<div class="zh-stack">
  <div class="zh-field">
    <label for="f-name" class="zh-req">名称</label>
    <input id="f-name" class="zh-input" placeholder="请输入名称" required aria-describedby="f-name-h">
    <span class="zh-hint" id="f-name-h">2 到 20 个字</span>
  </div>

  <div class="zh-field">
    <label for="f-mail">邮箱</label>
    <input id="f-mail" class="zh-input" value="abc" aria-invalid="true" aria-describedby="f-mail-h">
    <span class="zh-hint err" id="f-mail-h">邮箱格式不正确</span>
  </div>

  <div class="zh-field">
    <label for="f-city">城市</label>
    <div class="zh-select"><select id="f-city"><option>北京</option><option>上海</option></select></div>
  </div>

  <div class="zh-field">
    <label for="f-note">备注</label>
    <textarea id="f-note" class="zh-textarea"></textarea>
  </div>

  <label class="zh-check"><input type="checkbox" checked> 记住我</label>
  <label class="zh-check"><input type="radio" name="r" checked> 选项一</label>
  <label class="zh-check"><input type="radio" name="r"> 选项二</label>
  <label class="zh-check"><input type="checkbox" class="zh-switch" role="switch" checked> 启用通知</label>
</div>
```

## 样式类

`zh-field`、`zh-hint`、`zh-req`、`zh-input`、`zh-textarea`、`zh-select`、`zh-check`、`zh-switch`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `zh-field` | <div>（class） | 里面放 <label for> 与控件，再放 zh-hint | 纵向排列的字段：标签在上、控件、提示。多个字段用布局里的 zh-stack 或 zh-grid 排 |
| `zh-req` | <label>（class） | 必填字段的标签 | 在标签后加红色星号；仍然要给控件加 required 或 aria-required |
| `zh-hint / zh-hint err` | 字段内（class） | 提示文字；错误用 class="zh-hint err" | 次要说明与错误提示。错误时同时给控件加 aria-invalid="true" |
| `zh-input` | <input>（class） | 可加 sm \| lg 改高度 | 文本输入。aria-invalid="true" 时边框变危险色；聚焦时有主色描边 |
| `zh-textarea` | <textarea>（class） |  | 多行文本，最小高度两行。自动增高与计数用「多行文本」组件 |
| `zh-select` | 包着 <select> 的 <span> 或 <div>（class） | <div class="zh-select"><select>…</select></div> | 原生下拉的样式；需要搜索、多选时用「下拉选择」组件 |
| `zh-check` | <label>（class） | 里面放 <input type="checkbox"> 或 <input type="radio"> 再放文字 | 复选框与单选：主色，大小随字号，整行可点 |
| `zh-switch` | <input type="checkbox">（class） | 同时写 role="switch" | 开关；放在 zh-check 里，文字是它的标签 |

## 无障碍

- 每个控件都要有可访问的名称：<label for> 指向控件的 id，或 aria-label
- 开关要写 role="switch"，它的开关状态就是 checked
- 错误信息用 zh-hint err，并让控件 aria-invalid="true"；需要读屏朗读时用 aria-describedby 指向提示
- 必填用 zh-req 只是视觉标记，仍要加 required / aria-required
- 复选框与单选请把文字放在同一个 <label> 里，扩大点击区域

## 常见问题

### 表单控件与字段是什么？

字段（标签、控件、提示）、文本输入、下拉、多行文本、复选框、单选、开关。带搜索、清除、校验等行为的输入框见「输入框」「下拉选择」等组件。

### 怎么使用表单控件与字段？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 表单控件与字段支持键盘和读屏吗？

每个控件都要有可访问的名称：<label for> 指向控件的 id，或 aria-label；开关要写 role="switch"，它的开关状态就是 checked；错误信息用 zh-hint err，并让控件 aria-invalid="true"；需要读屏朗读时用 aria-describedby 指向提示。

### 表单控件与字段需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。