表单/Forms & Inputs

A list is also used to group related input elements. Both item-input and item is then used to designate each individual input field and it's associated label.

Ionic prefers to create the item-input out of the <label> element so that when any part of the row is tapped then the underlying input receives focus.

Additionally, developers should be aware of the various HTML5 Input types so users will be presented with the appropriate virtual keyboard.

Text Input: Placeholder Labels

In the example, it'll default to 100% width (no borders on the left and right), and uses the placeholder attribute to simulate the input's label. Then the user begins to enter text into the input the placeholder label will be hidden. Notice how <textarea> can also be used as a multi-line text input.

<divclass="list"><labelclass="item item-input"><inputtype="text"placeholder="First Name"></label><labelclass="item item-input"><inputtype="text"placeholder="Last Name"></label><labelclass="item item-input"><textareaplaceholder="Comments"></textarea></label></div>

Text Input: Inline Labels

Use input-label to place a label to the left of the input element. When the user enters text the label does not hide. Note that there's nothing stopping you from also using a placeholder label too.

<divclass="list"><labelclass="item item-input"><spanclass="input-label">Username</span><inputtype="text"></label><labelclass="item item-input"><spanclass="input-label">Password</span><inputtype="password"></label></div>

Text Input: Stacked Labels

Stacked labels always places the label on top of the input. Each item should have item-stacked-label assigned, and the input's label should haveinput-label assigned. This example also uses the placeholder attribute so users have a hint of what type of text the input is looking for.

<divclass="list"><labelclass="item item-input item-stacked-label"><spanclass="input-label">First Name</span><inputtype="text"placeholder="John"></label><labelclass="item item-input item-stacked-label"><spanclass="input-label">Last Name</span><inputtype="text"placeholder="Suhr"></label><labelclass="item item-input item-stacked-label"><spanclass="input-label">Email</span><inputtype="text"placeholder="john@suhr.com"></label></div>

Text Input: Floating Labels

Floating labels are just like Stacked Labels, except that their labels animate, or "float" up when text is entered in the input. Each item should haveitem-floating-label assigned, and the input's label should have input-label assigned.

Enter text in the example to the right to see the floating labels in action. This example also uses the placeholder attribute so user's have a hint of what type of text the input is looking for.

<divclass="list"><labelclass="item item-input item-floating-label"><spanclass="input-label">First Name</span><inputtype="text"placeholder="First Name"></label><labelclass="item item-input item-floating-label"><spanclass="input-label">Last Name</span><inputtype="text"placeholder="Last Name"></label><labelclass="item item-input item-floating-label"><spanclass="input-label">Email</span><inputtype="text"placeholder="Email"></label></div>

Inset Forms

By default each input item will fill 100% of the width of its parent element (the list). However, you can inset the list using either the list list-inset orcard classnames. The card classname applies a lower box shadow while list-inset does not. Additionally, if the list's parent element has paddingassigned then this will also give the form an inset appearance.

<divclass="list list-inset"><labelclass="item item-input"><inputtype="text"placeholder="First Name"></label><labelclass="item item-input"><inputtype="text"placeholder="Last Name"></label></div>

Inset Inputs

Using list-inset will inset the entire list, whereas placing item-input-inset will inset an input into an individual list item. Placing a button inside the item

<divclass="list"><divclass="item item-input-inset"><labelclass="item-input-wrapper"><inputtype="text"placeholder="Email"></label><buttonclass="button button-small">       Submit     </button></div></div>

Input Icons

Icons can be easily added to the left of an item-input input. Simply add an icon before the <input>. By default the icon will take the color of label text. However, you can also use add placeholder-icon to give it a placeholder color.

<divclass="list list-inset"><labelclass="item item-input"><iclass="icon ion-search placeholder-icon"></i><inputtype="text"placeholder="Search"></label></div>