简介

list 类同样可以用于 input 元素。

为了封面好看，先贴最后效果，就是这么直接。

输入框属性：placeholder可以设置输入字段预期值的提示信息。当用户输入文本到输入框时，占位符标签将被隐藏。与<text>不同的是，<textarea>也可以用作多行文本输入。

<div class="bar bar-header">
  <div class="h1 title">预输入标签</div>
</div>

<div class="content has-header">
  <div class="list">
    <label class="item item-input">
      <input type="text" placeholder="First Name">
    </label>
    <label class="item item-input">
      <input type="text" placeholder="Second Name">
    </label>
    <label class="item item-input">
      <textarea placeholder="Last Name"></textarea>
    </label>
  </div>
  <div class="padding">
    <button class="button button-block button-positive">Submit</button>
  </div>
</div>

内联标签：input-label在输入元素的左侧放置一个标签。当用户输入文字时，标签不会隐藏。请注意，这里也可以使用placeholder标签。

<label class="item item-input">
  <span class="input-label">用户名：</span>
  <input type="text">
</label>
<label class="item item-input">
  <span class="input-label">密码：</span>
  <input type="password">
</label>

堆叠标签通常位于输入框的头部。每个选项使用item-stacked-label类指定。 每个输入框需要指定 input-label。这个例子也使用了这个placeholder属性，这样用户就会知道输入的是什么类型的文本。

  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="123456789@qq.com">
  </label>

list-inset将插入整个列表,使用 item-input-inset样式可以内嵌一个按钮。item-input-wrapper可以嵌入搜索栏。

<div class="bar bar-header">
  <div class="h1 title">本篇GG</div>
</div>

<div class="content has-header">
  <div class="list">
  <div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
      <i class="icon ion-ios-search placeholder-icon"></i>
      <input type="search" placeholder="搜索">
    </label>
    <button class="button button-small">
      取消
    </button>
  </div>
<label class="item item-input">
  <span class="input-label">用户名：</span>
  <input type="text">
</label>
<label class="item item-input">
  <span class="input-label">密码：</span>
  <input type="password">
</label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="123456789@qq.com">
  </label>
    <label class="item item-input">
      <input type="text" placeholder="First Name">
    </label>
    <label class="item item-input">
      <textarea placeholder="Last Name"></textarea>
    </label>
    <div class="list list-inset">
      <label class="item item-input">
        <input type="text" placeholder="First Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Last Name">
      </label>
    </div>
  </div>
  <div class="padding">
    <button class="button button-block button-positive">登录</button>
  </div>
</div>