フォーム | Document | UNITS - Simple and beautiful CSS component set.

1. 基本

基本となるフォームパーツを作成します。

<form class="uc-form">

  <!-- text -->
  <div class="uc-form-parts-unit">
    <label for="text">Text</label>
    <input type="text" class="uc-form-parts" id="text">
  </div>

  <!-- select -->
  <div class="uc-form-parts-unit">
    <label for="select">Select</label>
    <select class="uc-form-parts" id="select">
      <option value="">select 1</option>
      <option value="">select 2</option>
      <option value="">select 3</option>
      <option value="">select 4</option>
    </select>
  </div>

  <!-- textarea -->
  <div class="uc-form-parts-unit">
    <label for="textarea">Textarea</label>
    <textarea class="uc-form-parts" id="textarea"></textarea>
  </div>

  <!-- checkbox -->
  <div class="uc-form-parts-unit">
    <label for="checkbox"><input type="checkbox" class="uc-form-parts" id="checkbox">Checkbox</label>
  </div>

  <!-- radio -->
  <div class="uc-form-parts-unit">
    <label for="radio"><input type="radio" class="uc-form-parts" id="radio">Radio</label>
  </div>

</form>

2. フォームグループ

uc-form-group クラスで囲むことで、フォームパーツを結合させることができます。

<form class="uc-form">
  <div class="uc-form-group">
    <input type="text" class="uc-form-parts" required>
    <button class="uc-btn"><span>Search</span></button>
  </div>
</form>

3. フォームセット

_set クラスを指定することで、あらかじめデザインが調整されたフォームを作成することができます。

<form class="uc-form _set">
  <div class="uc-form-parts-unit uc-grid _gutter">
    <div class="uc-grid-cell _col-fit">
      <label for="name">First name <span>required</span></label>
      <input type="text" class="uc-form-parts" id="name" required>
    </div>
    <div class="uc-grid-cell _col-fit">
      <label for="kana">Last name <span>required</span></label>
      <input type="text" class="uc-form-parts" id="kana" required>
    </div>
  </div>
  <div class="uc-form-parts-unit uc-grid _gutter">
    <div class="uc-grid-cell _col-fit">
      <label for="name">First name <span>required</span></label>
      <input type="text" class="uc-form-parts" id="name" required>
    </div>
    <div class="uc-grid-cell _col-fit">
      <label for="kana">Last name <span>required</span></label>
      <input type="text" class="uc-form-parts" id="kana" required>
    </div>
  </div>
  <div class="uc-form-parts-unit">
    <label for="tel">Phone number</label>
    <input type="text" class="uc-form-parts" id="tel">
  </div>
  <div class="uc-form-parts-unit">
    <label for="address">Address</label>
    <div class="uc-form-group">
      <input type="text" class="uc-form-parts" id="name" required>
      <button class="uc-btn"><span>Search</span></button>
    </div>
  </div>
  <div class="uc-form-parts-unit">
    <label for="message">Message</label>
    <textarea class="uc-form-parts" id="message"></textarea>
  </div>
  <div class="uc-form-parts-unit">
    <button class="uc-btn _primary"><a href="#">Send</a></button>
  </div>
</form>