ионной формы и поля ввода

Список классов также могут быть использованы элементы ввода. пункт-вход и тип позиции определяет текстовое поле и его метку.

Свойства поле ввода: заполнитель

В следующем примере, по умолчанию составляет 100% от ширины (левая и правая без границы), а также с помощью входного сообщения из набора атрибутов поля заполнитель ожидаемого значения.

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <textarea placeholder="Comments"></textarea>
  </label>
</div>

Попробуйте »

Свойства поле ввода: ввод метки

Использование ввода метки метки размещены слева от входа поле ввода.

<div class="list">
  <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>
</div>

Попробуйте »

Уложив вкладки

Stacking ввода этикетки коробка обычно находится на голове. Каждый вариант использует элемент стеками-метки класса обозначение. Каждый входной окно для задания ввода-метку. Следующие примеры также используются для установки Заполнитель информацию об атрибутах последующего ввода.

<div class="list">
  <label class="item item-input item-stacked-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="John">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Suhr">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="[email protected]">
  </label>
</div>

Попробуйте »

Плавающий этикетки

Подобно плавающей этикетки стек метку, но метка имеет плавающую анимационные эффекты для каждой опции вам необходимо указать категорию пункт-плавающей этикетки, введите метку, которую необходимо указать вход-метку.

<div class="list">
  <label class="item item-input item-floating-label">
    <span class="input-label">First Name</span>
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Last Name</span>
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email">
  </label>
</div>

Попробуйте »

Встроенная форма

По умолчанию, ширина каждого поля ввода составляет 100%, но мы можем использовать список список-врезку класса карты или установить заполнитель формы (дополнение), тип карты с тенями.

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

Попробуйте »

Инлайн поле ввода

Используйте список-врезку набор встроенный список сущностей. Используйте запись-Input-вставка стилей можно встроить кнопку.

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Email">
    </label>
    <button class="button button-small">
      Submit
    </button>
  </div>

</div>

Попробуйте »

С помощью значка поле ввода

элемент-вход поле ввода может быть очень простой, чтобы добавить иконки. Иконка в <ввод> перед добавлением.

<div class="list list-inset">
  <label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
  </label>
</div>

Попробуйте »

Глава ввода

Поле ввода может быть помещен в голове, и может добавить или отменить кнопку отправки.

<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-clear">
    取消
  </button>
</div>

Попробуйте »