ionic-form1ionic-form2

The form plays an important role in the application development. The form contains many components.

They are

  1. Text
  2. Password
  3. Select
  4. Checkbox
  5. Radio
  6. Textarea
  7. File

In this post, we are going to see only text input type and how to give better user experience in mobile view.

 

Placeholder Labels

The item-input class is used with the item class to display all the input fields as a list. It occupies full-width and finally, a button is added. Placeholder is used to simulate input’s label. When the user enters value the label will be hidden.


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


<button class="button button-block button-positive">Submit</button>


</div>

 

Inline Labels

Use the input-label class to place a label to the left of the input element. Here, when the user enters a value, the label will not hide.


<div class="list">

<label class="item item-input">

    <span class="input-label">Username</span>

    <input type="text">

</label>

<label class="item item-input">

    <span class="input-label">Password</span>

    <input type="password">

</label>


<button class="button button-block button-positive">Submit</button>

</div>

 

Stacked Labels

The Stacked Label displays the label on top of the input field. It will not hide when a user enters a value. Use the item-stacked-label class to achieve stacked label functionality.


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


<button class="button button-block button-positive">Submit</button>

</div>

 

Floating Labels

Floating labels are similar to material design floating concept. The label is displayed using a placeholder. But when the user enters a value, the label goes on the top of the input field with an animation.


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


<button class="button button-block button-positive">Submit</button>

</div>

 

Insert forms

The input element by default occupies full-width. We can avoid this using list list-inset or card class names.


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

<button class="button button-block button-positive">Submit</button>

</div>

 

Inset Inputs

Using the inset class in the form will apply the inset property to all input items. If you want to apply inset only to a particular input field, use item-input-inset class on particular input item.


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


<button class="button button-block button-positive">Submit</button>


</div>

Input Icons Icons are easily added to an input field using icon class name, which is a built-in class for Ionic Framework. If needed, use the placeholder-icon class to give color to the placeholder.


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

 

Header Inputs

Input can be added to the header. In order to place input on the header, just place the input code in the header.


<ion-header-bar class="bar-assertive">

<label class="item-input">

    <i class="icon ion-ios-search placeholder-icon"></i>

    <input type="search" placeholder="Search">

</label>

<button class="button button-clear">

    Cancel

</button>

</ion-header-bar>