ionic forms and input boxes

ionic forms and input boxes

The list class can also be used for input elements. The item-input and item classes specify text boxes and their labels.

Enter box properties: placeholder

In the following example, the default is 100% width (there is no border on the left and right) and the placeholder property is used to set the prompt for entering the expected value of the 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 out . . .

Input box property: input-label

Use input-label to place the label on the left side 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 out . . .

Stack labels

Stacked labels are usually located at the head of the input box. E ach option is specified using the item-stacked-label class. E ach input box needs to specify input-label. The following example also uses the placeholder property to set the 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 out . . .

Floating label

Floating labels are similar to stacked labels, but floating labels have an animated effect, with each option specifying the item-floating-label class, and entering labels requiring an 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 out . . .

The form is embedded

By default, each input field is 100% wide, but we can use the list-inset or card class to set the form's padding, with the card class shaded.

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

The input field is embedded

Use list-inset to set up a list of embedded entities. Use the item-input-inset style to inline 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 out . . .

The input box with the icon

The item-input input box can simply add icons. Icons can be added before the .

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

Head input box

The input box can be placed on the head and the 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 out . . .