Ionic Form and Input Box

From WikiOD

Ionic form and input box[edit | edit source]

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

Input box attribute: placeholder[edit | edit source]

In the following example, the default is 100% width (there is no border on the left and right sides), and the placeholder attribute is used to set the prompt message of the expected value of the input field.

 <code><div class="list"></code>
   <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>
 <code></div></code>
Input box attributes: input-label[edit | edit source]

Use input-label to place the label on the left side of the input box.

 <code><div class="list"></code>
   <label class="item item-input">
     <code><span class="input-label">Username:</span></code>
     <input type="text">
   </label>
   <label class="item item-input">
     <code><span class="input-label">Password:</span></code>
     <input type="password">
   </label>
 <code></div></code>
----

Stacked labels[edit | edit source]

The stack label is usually located at the head of the input box. Each option is specified using the item-stacked-label class. Each input box needs to specify the input-label. The following example also uses the placeholder attribute to set information input prompts.

 <code><div class="list"></code>
   <label class="item item-input item-stacked-label">
     <code><span class="input-label">First Name</span></code>
     <input type="text" placeholder="John">
   </label>
   <label class="item item-input item-stacked-label">
     <code><span class="input-label">Last Name</span></code>
     <input type="text" placeholder="Suhr">
   </label>
   <label class="item item-input item-stacked-label">
     <code><span class="input-label">Email</span></code>
     <input type="text" placeholder=" john@suhr.com">
   </label>
 <code></div></code>
----

Floating label[edit | edit source]

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

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

Embedded form[edit | edit source]

By default, the width of each input field is 100%, but we can use the list list-inset or card class to set the padding of the form. The card class is shaded.

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

Embedded input field[edit | edit source]

Use list-inset to set the list of embedded entities. Use item-input-inset style to embed a button.

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

Input box with icon[edit | edit source]

The item-input input box can easily add icons. The icon can be added before <input>.

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

Head input box[edit | edit source]

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

 <code><div class="bar bar-header item-input-inset"></code>
   <label class="item-input-wrapper">
     <code><i class="icon ion-ios-search placeholder-icon"></i></code>
     <input type="search" placeholder="search">
   </label>
   <button class="button button-clear">
     Cancel
   </button>
 <code></div></code>