Ionic Form


Ionic Form – Form is also an important component of ionic. Ionic provides inbuilt form elements which can be used frequently. Class .list is used to wrap the form elements. Class .item and .item-input is used to input field’s label. Label tag contains the input field of the form. Here we are going to explain the HTML5 input elements.
It is very simple to create form and it’s input fields in Ionic framework. Here in this tutorial we are going to explain how you can create form in Ionic Framework. You can also use our online demo to see the output of the examples.


Ionic Form Syntax | Example | Demo

Let us go to understand form & it’s input fields. Here is simple example of Ionic Form, In this example we have simply create two input fields- name, email and submit button. –

Ionic Form Example –

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Email">
  </label>  
 <div class="padding">
    <button class="button button-block button-positive">Submit</div>
  </div>  
</div>

Try it »

If you run the above example it will produce the output something like this-

Ionic Forms Example

Text Input – Inline Label

You can add labels input label in ionic by adding the class input-label simply as in below example –

Text Input – Inline Label –

<div class="list">
  <label class="item item-input">
   <span class="input-label">Name</span>
    <input type="text">
  </label>
  <label class="item item-input">
    <span class="input-label">Email</span>
    <input type="text" >
  </label>  
 <div class="padding">

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

Try it »

Text Input – Stacked Label

You can add Stacked input label in ionic by adding the class item-stacked-label

Text Input – Stacked Label Example –

<div class="list">
  <label class="item item-input item-stacked-label">
   <span class="input-label">Name</span>
    <input type="text">
  </label>
  <label class="item item-input item-stacked-label">
    <span class="input-label">Email</span>
    <input type="text" >
  </label>  
 <div class="padding">
    <button class="button button-block button-positive">Submit</div>
  </div>  
</div>

Try it »

Text Input – Floating Label

You can add Floating input label in ionic by adding the class item-floating-label

Text Input – Stacked Label Example –

<div class="list">
  <label class="item item-input item-floating-label">
   <span class="input-label">Name</span>
    <input type="text" placeholder="Name">
  </label>
  <label class="item item-input item-floating-label">
    <span class="input-label">Email</span>
    <input type="text" placeholder="Email" >
  </label>  
 <div class="padding">
    <button class="button button-block button-positive">Submit</div>
  </div>  
</div>

Try it »

Ionic Forms Inset Inputs

You can create inset forms by adding the class list-inset in wrapper div. Here is an example of form inset input –

Ionic Forms Inset Inputs Example –

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

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

Try it »

Ionic Input Icons

Sometimes we need to add the icons to the form inputs, for this you don’t need to write any extra css, You can simply add icons in input fields by adding ion icon classes. Here is an example of input icons –

Ionic Input Icons Example –

<div class="list">

  <div class="item item-input-inset">
    <label class="item-input">
      <i class="icon ion-ios-telephone placeholder-icon"></i>
      <input type="text" placeholder="Phone">
    </label>
   
  </div>

</div>

Try it »

To the demo and see the output of the above code just hit the “try it” button.
If you run the above example it will produce the output with input icons field as below-

Ionic forms example

Note : You should have knowledge of HTML5 input elements.

Advertisements

Add Comment

📖 Read More