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

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

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

Text Input – Inline Label

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

<div class="list">
  
    
 <div class="padding">

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

Text Input – Stacked Label

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

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

Text Input – Floating Label

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

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

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 –

<div class="list">
  
    

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

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 –

<div class="list">

  <div class="item item-input-inset">
    
   
  </div>

</div>

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-