The best ionic forms and input boxes Tutorial In 2024, In this tutorial you can learn Stacked tabs,Floating label,Embedded Form,Inline input field,With input box icon,The head of the input box,

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>

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>

---

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

---

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>

---

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>

---

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>

---

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>

---

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>