WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Forms


Ionic forms are mostly used for interaction with users and collecting needed info.

list and item as your main classes. You can set a placeholder that will look different from the input text and it will be hidden as soon as you start typing.

Using Input Form

<div class = "active">
    <label class = "item item-input">
        <input type = "text" placeholder = "Placeholder 1" />
    </label>

    <label class = "item item-input">
        <input type = "text" placeholder = "Placeholder 2" />
    </label>
</div>

Ionic Labels

Ionic offers some other options for your label. You can use the input-label class
<div class = "list">
    <label class = "item item-input">
        <input type = "text" placeholder = "Placeholder 1" />
    </label>

    <label class = "item item-input">
        <input type = "text" placeholder = "Placeholder 2" />
    </label>
</div>

Stacked Label

Stacked label is the other option that allows moving your label on top or the bottom of the input. To achieve this, we will add the item-stacked-label class to our label element and we need to create a new element and assign the input-label class to it.
<div class = "list">
    <label class = "item item-input item-stacked-label">
        <span class = "input-label">Label 1</span>
        <input type = "text" placeholder = "Placeholder 1" />
    </label>

    <label class = "item item-input item-stacked-label">
        <span class = "input-label">Label 2</span>
        <input type = "text" placeholder = "Placeholder 2" />
    </label>
</div>

Floating Label

Floating labels are the third option you can use These labels will be hidden before we start typing. We can use floating labels the same way as we used stacked labels. The only difference is that this time we will use item-floating-label class.
<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

Inset inputs

In our last chapter, we discussed how to inset Ionic elements. You can also inset an input by adding the item-input-inset class to your item and the item-input-wrapper to your label. A Wrapper will add additional styling to your label. We used the placeholder-icon class to make the icon with the same color as the placeholder text. Without it, the icon would use the color of the label.
<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">		
         <input type = "text" placeholder = "Placeholder 1" />
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2" />
      </label>
   </div>
</div>

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com