ionic forms and input boxes
class list can also be used input elements. item-input and item category specifies the text box and its label.
Input box properties: placeholder
The following example, the default is 100% of the width (left and right without a border), and using the message input field placeholder attribute set expected value.
<div class="list"> <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 properties: input-label
Input-label use of the label placed on the left of the input box input.
<div class="list"> <label class="item item-input"> <span class="input-label">用户名:</span> <input type="text"> </label> <label class="item item-input"> <span class="input-label">密码:</span> <input type="password"> </label> </div>
Stacked tabs
Stacking label input box is usually located on the head. Each option uses item-stacked-label class designation. Each input box to specify input-label. The following examples are also used to set the placeholder attribute information input prompt.
<div class="list"> <label class="item item-input item-stacked-label"> <span class="input-label">First 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 label
Similar floating label stack the label, but the label has a floating animation effects for each option you need to specify item-floating-label category, enter the label you need to specify input-label.
<div class="list"> <label class="item item-input item-floating-label"> <span class="input-label">First 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 Name"> </label> <label class="item item-input item-floating-label"> <span class="input-label">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 class card or set the form's padding (padding), card type with shadows.
<div class="list list-inset"> <label class="item item-input"> <input type="text" placeholder="First Name"> </label> <label class="item item-input"> <input type="text" placeholder="Last Name"> </label> </div>
Inline input field
Use list-inset set inline entity list. Use item-input-inset styles can embed a button.
<div class="list"> <div 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>
With input box icon
item-input input box can be very simple to add icons. Icon in the <input> before adding.
<div class="list list-inset"> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search"> </label> </div>
The head of the input box
Input box can be placed in the head, and can add or cancel submit button.
<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="搜索"> </label> <button class="button button-clear"> 取消 </button> </div>