Simplidigital: Ionic Tutorial

The list class can also be used for the input element. The item-input and item classes specify the text box and its labels.

Input box property: placeholder

In the following example, the default is 100% width (left and right sides without border), and use the placeholder attribute to set the input field expected value of the message.

<key class = "list item " > <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> </ div>

Input box property: input-label

Use input-label to place the label on the left side of the input box input.

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

Stacking labels

The stack label is usually located at the head of the input box. Each option is specified using the item-stacked-label class. Each input box needs to specify input-label. The following example also uses the placeholder attribute to set the information input prompt.

<div class = "List" > <label class = "Item Item-INPUT Item-Stacked-label" > <span class = "INPUT-label" > First the 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> </ div>

Floating tag

Floating tags are similar to stack labels, but floating labels have an animated effect. Each option needs to specify the item-floating-label class. The input tag needs to specify input-label.

<div class = "List" > <label class = "Item Item-INPUT Item-Floating-label" > <span class = "INPUT-label" > First the 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 the Name" > </ label> <label class = "Item Item-INPUT Item-Floating-label" > <span class = "INPUT-label" > In Email </ span> <INPUT type = "text" placeholder = " Email " > </ label> </ div>

Embedded form

By default, each input field width is 100%, but we can use the list list-inset or card class to set the form of the padding (padding), card with shadow.

<div class = "List List-the inset from" > <label class = "Item Item-INPUT" > <INPUT type = "text" placeholder = "First the Name" > </ label> <label class = "Item Item-INPUT" > <input type = "text" placeholder = "Last Name" > </ label> </ div>

Embedded input field

Use list-inset to set the embedded entity list. Use the item-input-inset style to embed a button.

<div class = "list" > 

  <button class = "item item-input-inset" > <label class = "item-input-wrapper" > <input type = "text" placeholder = "Email" > </ label> <button class = "button button- small " > 
     
        
    
     
      Submit
    </ button> </ div>
  

</ div>

Input box with icon

The item-input input box makes it easy to add icons. The icon can be added before <input>.

<div class = "List List-the inset from" > <label class = "Item Item-INPUT" > <I class = "icon Ion-Search placeholder-icon" > </ I> <INPUT type = "text" placeholder = " Search " > </ label> </ div>

Header input box

The input box can be placed in the header and the Add or Cancel button can be added.

<div class = "bar bar-header item-input-inset" > <label class = "item-input-wrapper" > <i class = "icon ion-ios-search placeholder-icon" > </ i> <input type = "search" placeholder = "search" > </ label> <button class = "button button-clear" > 
   
     
      
  
   
    cancel
  </ button> </ div>

Simplidigital

the ionic form and the input box