表单

表单概览

所有表单元素都基于纯语义化 HTML，完全响应式，能够在不同设备和视口下从容地良好缩放。

输入框默认宽度为 width: 100%;，并与按钮保持相同尺寸，从而构建风格一致的表单。

查看源码

<form>
<fieldset>
  <label>
    First name
    <input
      name="first_name"
      placeholder="First name"
      autocomplete="given-name"
    />
  </label>
  <label>
    Email
    <input
      type="email"
      name="email"
      placeholder="Email"
      autocomplete="email"
    />
  </label>
</fieldset>

<input
  type="submit"
  value="Subscribe"
/>
</form>

<input> 可以放在 <label> 内部，也可以放在其外部。

查看源码

<form>

<!-- Input inside label -->
<label>
  First name
  <input
    name="first_name"
    placeholder="First name"
    autocomplete="given-name"
  />
</label>

<!-- Input outside label -->
<label for="email">Email</label>
<input
  type="email"
  id="email"
  placeholder="Email"
  autocomplete="email"
/>

</form>

辅助文本

表单元素下方的 <small> 会以弱化颜色显示，用作辅助文本。

We’ll never share your email with anyone else.

查看源码

<input
type="email"
name="email"
placeholder="Email"
autoComplete="email"
aria-label="Email"
aria-describedby="email-helper"
/>
<small id="email-helper">
We'll never share your email with anyone else.
</small>

配合栅格使用

你可以在表单内使用 .grid。参见栅格。

查看源码

<form>
<fieldset class="grid">
  <input 
    name="login"
    placeholder="Login"
    aria-label="Login"
    autocomplete="username"
  />
  <input
    type="password"
    name="password"
    placeholder="Password"
    aria-label="Password"
    autocomplete="current-password"
  />
  <input
    type="submit"
    value="Log in"
  />
</fieldset>
</form>

配合分组使用

你可以将 role="group" 用于表单元素。参见分组。

查看源码

<form>
<fieldset role="group">
  <input
    type="email"
    name="email"
    placeholder="Enter your email"
    autocomplete="email"
  />
  <input type="submit" value="Subscribe" />
</fieldset>
</form>