# 字段 Field

分类：表单 · React：Input

标签 + 输入框 + 说明 / 错误：表单的一行。

## 示例
```html
<div class="xxd-field">
  <label class="xxd-label" for="title">标题</label>
  <input class="xxd-input" id="title" placeholder="给这篇文章起个名字">
  <p class="xxd-help">最多 100 个字</p>
</div>
```

## 属性与类名
- `aria-invalid`：出错时边框变危险色
- `data-optional`：在 label 上：后面加「可选」
- `data-autosize`：textarea 随内容长高
- 类名：`xxd-field` `xxd-label` `xxd-help` `xxd-error` `xxd-input` `xxd-textarea`

## 键盘与读屏
- label 的 for 指向输入框；说明和错误用 aria-describedby 连上
- 出错时输入框写 aria-invalid="true"，错误文字写清楚怎么改，不只变红

## 规则
- 一个框只有一个框：聚焦时边框变深一次，不加外圈和内框
- §4