SE学院

Formの使い方

Text

<form class="pure-form">
  <input type="text" placeholder="text">
</form>

Width

<form class="pure-form pure-form-stacked">
  <input class="pure-input-1" type="text" placeholder=".pure-input-1">
  <input class="pure-input-3-4" type="text" placeholder=".pure-input-3-4">
  <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3">
  <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2">
  <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3">
  <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4">
</form>

Checkbox

Radio

Select

Textarea

必須

inputタグにrequired属性を指定すると、フォーカスを得たときの色が変わります。

また、pure-form-messageクラスを指定して、入力項目の補足説明を表示できます。

<form class="pure-form">
  <input id="id" type="text" placeholder="ID" required>
  <span class="pure-form-message">必須</span>
</form>
必須

Inline form

インラインフォームにするには、formタグにpure-formクラスを指定します。

<form class="pure-form">
  <fieldset>
    <legend>Sign in</legend>
    <input id="email" type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
  </fieldset>
</form/
Sign in

Stacked form

垂直方向に積み重なるフォームにするには、formタグにpure-formクラスとpure-form-stackedクラスを指定します。

<form class="pure-form pure-form-stacked">
  <fieldset>
    <legend>Sign in</legend>
    <label for="email">Email</label>
    <input id="email" type="email" placeholder="Email">
    <label for="password">Password</label>
    <input id="password" type="password" placeholder="Password">
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
  </fieldset>
</form>
Sign in

Aligned Form

ラベルと入力を列で分けるには、formタグにformタグにpure-formクラスとpure-form-alignedクラスを指定します。

<form class="pure-form pure-form-aligned">
  <fieldset>
    <legend>Sign in</legend>
    <div class="pure-control-group">
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email">
    </div>
    <div class="pure-control-group">
      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password">
    </div>
    <div class="pure-controls">
      <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </div>
  </fieldset>
</form>
Sign in