语言: ENCN

表单布局

使用表单布局创建响应式的精美的表单布局。表单布局就是 列表,但是会有一些拓展。

简单的表单布局

让我们看一种最简单的表单布局:

<div class="list-block">
  <ul>
    ...
    <li>
      <div class="item-content">
        <div class="item-media">... icon here ...</div>
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
              <input type="text" name="name">
          </div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>   

从上面的例子可以看出,表单布局几乎和 列表 一样,但是有如下一些不同:

  • item-title - 单行的label,应该有一个额外的 label class。可选的。

  • item-input - 包含了你的表单输入框等。 必选

对表单元素的支持

下面是所有你可以放进 item-input 中的表单元素:

All text inputs

Supported types: text, password, email, tel, url, date, number, datetime-local

...
  <div class="item-input">
    <input type="text">
  </div>                    
...
...
  <div class="item-input">
    <input type="email">
  </div>                    
...

Select

...
  <div class="item-input">
    <select>...</select">
  </div>                    
...

Textarea

...
  <div class="item-input">
    <textarea></textarea>
  </div>                    
...

Note that List View element with textarea should have additional "align-top" class on <li>:

<div class="list-block">
  <ul>
    ...
    <!-- Additional "align-top" class for correct textarea alignment -->
    <li class="align-top">
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Textarea</div>
          <div class="item-input">
              <textarea></textarea>
          </div>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>

Resizable Textarea

Resiable textarea. Just add "resizable" class to textarea and it will resize automatically depending on its content

...
  <div class="item-input">
    <textarea class="resizable"></textarea>
  </div>                    
...

Switch (Checkbox)

Switch (Checkbox) requires additional wrapper:

...
  <label class="label-switch">
    <input type="checkbox">
    <div class="checkbox"></div>
  </label>
...

Slider (Range input)

Slider (Range input) requires additional wrapper:

...
  <div class="item-input">
    <div class="range-slider">
      <input type="range" min="0" max="100" step="0.1">
    </div>
  </div>                    
...

Examples

Full Layout

<div class="content-block-title">Full Layout</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-name"></i></div>
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-email"></i></div>
        <div class="item-inner">
          <div class="item-title label">E-mail</div>
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    ...
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-gender"></i></div>
        <div class="item-inner">
          <div class="item-title label">Gender</div>
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-calendar"></i></div>
        <div class="item-inner">
          <div class="item-title label">Birth date</div>
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
    <!-- Date time-->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-calendar"></i></div>
        <div class="item-inner">
          <div class="item-title label">Date time</div>
          <div class="item-input">
            <input type="datetime-local">
          </div>
        </div>
      </div>
    </li>
    <!-- Switch (Checkbox) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-toggle"></i></div>
        <div class="item-inner">
          <div class="item-title label">Switch</div>
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
    <!-- Slider (Range input) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-settings"></i></div>
        <div class="item-inner">
          <div class="item-title label">Slider</div>
          <div class="item-input">
            <div class="range-slider">
              <input type="range" min="0" max="100" value="50" step="0.1">
            </div>
          </div>
        </div>
      </div>
    </li>
    <!-- Textarea -->
    <li class="align-top">
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-comment"></i></div>
        <div class="item-inner">
          <div class="item-title label">Textarea</div>
          <div class="item-input">
            <textarea></textarea>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Icons and inputs

Because item-title is optional element, we can drop elements labels:

<div class="content-block-title">Icons and inputs</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-name"></i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-email"></i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-gender"></i></div>
        <div class="item-inner">
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-calendar"></i></div>
        <div class="item-inner">
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Switch (Checkbox) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-toggle"></i></div>
        <div class="item-inner">
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Slider (Range input) -->
    <li>
      <div class="item-content">
        <div class="item-media"><i class="icon icon-form-settings"></i></div>
        <div class="item-inner">
          <div class="item-input">
            <div class="range-slider">
              <input type="range" min="0" max="100" value="50" step="0.1">
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div> 

Labels and inputs

Because item-media is optional element, we can drop elements icons:

<div class="content-block-title">Labels and inputs</div>
<div class="list-block">
  <ul>
    <!-- Text inputs -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">E-mail</div>
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Select -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Gender</div>
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Date -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Birth date</div>
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
 
    <!-- Switch (Checkbox) -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Switch</div>
          <div class="item-input">
            <label class="label-switch">
              <input type="checkbox">
              <div class="checkbox"></div>
            </label>
          </div>
        </div>
      </div>
    </li>
 
    <!-- Slider (Range input) -->
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Slider</div>
          <div class="item-input">
            <div class="range-slider">
              <input type="range" min="0" max="100" value="50" step="0.1">
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Just inputs

Sometimes we need just inputs, so we can drop item-media and item-title

<div class="content-block-title">Just inputs</div>
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="text" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <select>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
            <input type="date" placeholder="Birth day" value="2014-04-30">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>              

Inset

And because form elements is a List View, we can make it inset:

<div class="content-block-title">Just inputs</div>
<!-- "inset" class on list-block -->
<div class="list-block inset">
  ...
</div>