ionic Forms and Inputs

The list class can also be used for input elements. The item-input and item classes specify the text box and its label.

Input Property: placeholder

In the following example, the default width is 100% (no borders on the left and right sides), and the placeholder attribute is used to set a hint for the expected value of the input field.

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

Try it Yourself »

Input Property: input-label

Use input-label to place the label to the left of the input field.

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

Try it Yourself »

Stacked Labels

Stacked labels are usually placed at the top of the input field. Each item is specified with the item-stacked-label class. Each input field needs an input-label. The following example also uses the placeholder attribute to set input hints.

<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="john@suhr.com">
  </label>
</div>

Try it Yourself »

Floating Labels

Floating labels are similar to stacked labels, but floating labels have an animation effect. Each item needs the item-floating-label class, and input labels need input-label.

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

Try it Yourself »

Inset Forms

By default, each input field has a width of 100%, but we can use the list, list-inset, or card classes to set the form's padding. The card class includes a shadow.

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

Try it Yourself »

Inset Inputs

Use list-inset to set an inset list. Use the item-input-inset style to embed a button.

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

Try it Yourself »

Inputs with Icons

Icons can be easily added to item-input input fields. Icons can be placed before the <input>.

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

Try it Yourself »

Header Inputs

The input field can be placed in the header, and a submit or cancel button can be added.

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

Try it Yourself »

Other Extensions