<%- include('../_common/_head', {
  key: 'docs',
  pagetitle: 'Form | Document'
}) %>

<%- include('../_component/docs/_header') %>

<%- include('../_component/docs/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../_component/docs/_sidebar', {
  current: 'form'
}) %>

  <div class="uc-grid-cell _col-fit">

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">Form</h2>
      <p>You can create a form by specifying the <code>uc-form</code> class.</p>

      <div class="doc-component-box" id="c-1">
        <h3>1. Basic</h3>
        <p>Create a basic form parts.</p>

        <div class="doc-component-preview">
          <form class="uc-form">
            <div class="uc-form-parts-unit">
              <label for="text">Text</label>
              <input type="text" class="uc-form-parts" id="text">
            </div>
            <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>
            <div class="uc-form-parts-unit">
              <label for="textarea">Textarea</label>
              <textarea class="uc-form-parts" id="textarea"></textarea>
            </div>
            <div class="uc-form-parts-unit">
              <label for="checkbox"><input type="checkbox" class="uc-form-parts" id="checkbox">Checkbox</label>
            </div>
            <div class="uc-form-parts-unit">
              <label for="radio"><input type="radio" class="uc-form-parts" id="radio">Radio</label>
            </div>
          </form>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;form class="uc-form"&gt;

  &lt;!-- text --&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="text"&gt;Text&lt;/label&gt;
    &lt;input type="text" class="uc-form-parts" id="text"&gt;
  &lt;/div&gt;

  &lt;!-- select --&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="select"&gt;Select&lt;/label&gt;
    &lt;select class="uc-form-parts" id="select"&gt;
      &lt;option value=""&gt;select 1&lt;/option&gt;
      &lt;option value=""&gt;select 2&lt;/option&gt;
      &lt;option value=""&gt;select 3&lt;/option&gt;
      &lt;option value=""&gt;select 4&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;

  &lt;!-- textarea --&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="textarea"&gt;Textarea&lt;/label&gt;
    &lt;textarea class="uc-form-parts" id="textarea"&gt;&lt;/textarea&gt;
  &lt;/div&gt;

  &lt;!-- checkbox --&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="checkbox"&gt;&lt;input type="checkbox" class="uc-form-parts" id="checkbox"&gt;Checkbox&lt;/label&gt;
  &lt;/div&gt;

  &lt;!-- radio --&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="radio"&gt;&lt;input type="radio" class="uc-form-parts" id="radio"&gt;Radio&lt;/label&gt;
  &lt;/div&gt;

&lt;/form&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-2">
        <h3>2. Form group</h3>
        <p>You can combine form parts by enclosing them in <code>uc-form-group</code> class.</p>

        <div class="doc-component-preview">
          <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>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;form class="uc-form"&gt;
  &lt;div class="uc-form-group"&gt;
    &lt;input type="text" class="uc-form-parts" required&gt;
    &lt;button class="uc-btn"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-3">
        <h3>3. Form set</h3>
        <p>By designating the <code>_set</code> class, you can create a form with adjusted design.</p>

        <div class="doc-component-preview">
          <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>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;form class="uc-form _set"&gt;
  &lt;div class="uc-form-parts-unit uc-grid _gutter"&gt;
    &lt;div class="uc-grid-cell _col-fit"&gt;
      &lt;label for="name"&gt;First name &lt;span&gt;required&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" class="uc-form-parts" id="name" required&gt;
    &lt;/div&gt;
    &lt;div class="uc-grid-cell _col-fit"&gt;
      &lt;label for="kana"&gt;Last name &lt;span&gt;required&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" class="uc-form-parts" id="kana" required&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-form-parts-unit uc-grid _gutter"&gt;
    &lt;div class="uc-grid-cell _col-fit"&gt;
      &lt;label for="name"&gt;First name &lt;span&gt;required&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" class="uc-form-parts" id="name" required&gt;
    &lt;/div&gt;
    &lt;div class="uc-grid-cell _col-fit"&gt;
      &lt;label for="kana"&gt;Last name &lt;span&gt;required&lt;/span&gt;&lt;/label&gt;
      &lt;input type="text" class="uc-form-parts" id="kana" required&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="tel"&gt;Phone number&lt;/label&gt;
    &lt;input type="text" class="uc-form-parts" id="tel"&gt;
  &lt;/div&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="address"&gt;Address&lt;/label&gt;
    &lt;div class="uc-form-group"&gt;
      &lt;input type="text" class="uc-form-parts" id="name" required&gt;
      &lt;button class="uc-btn"&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;label for="message"&gt;Message&lt;/label&gt;
    &lt;textarea class="uc-form-parts" id="message"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div class="uc-form-parts-unit"&gt;
    &lt;button class="uc-btn _primary"&gt;&lt;a href="#"&gt;Send&lt;/a&gt;&lt;/button&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>
        </div>
      </div>

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn"><a href="./button.html">← Button</a></div>
      <div class="uc-btn _primary"><a href="./list.html">List →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../_component/_footer') %>

<%- include('../_common/_foot') %>
