ionic forms and input boxes

class list can also be used input elements. item-input and item category specifies the text box and its label.

Input box properties: placeholder

The following example, the default is 100% of the width (left and right without a border), and using the message input field placeholder attribute set expected value.

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

Input box properties: input-label

Input-label use of the label placed on the left of the input box input.

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

Stacked tabs

Stacking label input box is usually located on the head. Each option uses item-stacked-label class designation. Each input box to specify input-label. The following examples are also used to set the placeholder attribute information input prompt.

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

try it"

Floating label

Similar floating label stack the label, but the label has a floating animation effects for each option you need to specify item-floating-label category, enter the label you need to specify 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"

Embedded Form

By default, each input field width is 100%, but we can use the list list-inset class card or set the form's padding (padding), card type with shadows.

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

Inline input field

Use list-inset set inline entity list. Use item-input-inset styles can 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"

With input box icon

item-input input box can be very simple to add icons. Icon in the <input> before adding.

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

The head of the input box

Input box can be placed in the head, and can add or cancel submit button.

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