表单
输入框
所有输入类型都采用一致的样式，并附带验证状态。
查看源码
<input type="text" name="text" placeholder="Text" aria-label="Text">
<input type="email" name="email" placeholder="Email" aria-label="Email" autocomplete="email">
<input type="number" name="number" placeholder="Number" aria-label="Number">
<input type="password" name="password" placeholder="Password" aria-label="Password">
<input type="tel" name="tel" placeholder="Tel" aria-label="Tel" autocomplete="tel">
<input type="url" name="url" placeholder="Url" aria-label="Url">日期时间输入框
日期时间类型的输入框自带图标。
查看源码
<input type="date" name="date" aria-label="Date">
<input type="datetime-local" name="datetime-local" aria-label="Datetime local">
<input type="month" name="month" aria-label="Month">
<input type="time" name="time" aria-label="Time">搜索输入框
type="search" 具有独特的样式。
查看源码
<input
type="search"
name="search"
placeholder="Search"
aria-label="Search"
/>颜色输入框
type="color" 与其他输入类型保持一致的样式。
查看源码
<input
type="color"
value="#ff9500"
aria-label="Color picker"
>文件输入框
文件类型的输入按钮采用 secondary（次要）按钮样式。
查看源码
<input type="file">禁用输入框
查看源码
<input
type="text"
name="text"
placeholder="Disabled"
aria-label="Disabled input"
disabled
>只读输入框
查看源码
<input
type="text"
name="text"
value="Read-only"
aria-label="Read-only input"
readonly
>验证状态
通过 aria-invalid 提供验证状态。
查看源码
<input
type="text"
name="valid"
value="Valid"
aria-invalid="false"
>
<input
type="text"
name="invalid"
value="Invalid"
aria-invalid="true"
>在表单元素下方用 <small> 定义的辅助文本，会继承验证状态的颜色。
Looks good!Please provide a valid value!
查看源码
<input
type="text"
name="valid"
value="Valid"
aria-invalid="false"
aria-describedby="valid-helper"
>
<small id="valid-helper">Looks good!</small>
<input
type="text"
name="invalid"
value="Invalid"
aria-invalid="true"
aria-describedby="invalid-helper"
>
<small id="invalid-helper">
Please provide a valid value!
</small>