表单布局

优质

小牛编辑

128浏览

2023-12-01

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

简单的表单布局

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

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