语言: 英文中文

表单布局

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

简单的表单布局

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

<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>                    
...

示例

完整的布局

<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>

图标和输入框

因为 item-title 是可选元素,所以可以不写:

<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>

label和输入框

因为 item-media 是可选元素,所以可以不写:

<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>

只有输入框

<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

因为表单也是 列表布局 的一种, 所以可以变成 inset:

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