表单布局 - Framework7 表单 - [ Framework7 ]

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

简单的表单布局

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

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

实例预览