WEB DEVELOPER SITE
TUTORIALS HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML


 

Ionic - Forms


Ionic forms area unit principally used for interaction with users and assembling required information. list and item as your main categories. you'll be able to set a placeholder which will look completely different from the input text and it'll be hidden as shortly as you begin writing.

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 another choices for your label. you'll be able to use the input-label category
<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 that the alternative choice that enables moving your label on prime or rock bottom of the input. to realize this, we'll add the item-stacked-label category to our label part and that we ought to produce a replacement part and assign the input-label category to that.
<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 ar the third choice you'll use These labels are hidden before we tend to begin writing. we are able to use floating labels a similar approach as we tend to used stacked labels. the sole distinction is that now we are going to use item-floating-label category.
<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 have a tendency to mentioned the way to inset Ionic components. you'll additionally inset associate input by adding the item-input-inset category to your item and therefore the item-input-wrapper to your label. A Wrapper can add further styling to your label. we have a tendency to used the placeholder-icon category to create the icon with a similar color because the placeholder text. Without it, the icon would use the colour of the 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.© 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com
Javacodegeeks>