Das beste ionischen Formen und Eingabefelder-Tutorial im Jahr 2024. In diesem Tutorial können Sie Gestapelte Tabs,Schwimmdock Etikett,Embedded-Formular,Inline-Eingabefeld,Mit Eingabefeld Symbol,Der Kopf des Eingabefeldes, lernen
Klassenliste können auch Eingabeelemente verwendet werden. item-Eingang und Positionstyp gibt das Textfeld und seine Beschriftung.
Das folgende Beispiel ist die Standard-100% der Breite (links und rechts ohne Rahmen), und mit dem Nachrichteneingabefeld Platzhalter-Attribut gesetzt erwarteten Wert.
<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>
Eingabe-Label-Verwendung des Etiketts auf der linken Seite des Eingabefeldes Eingang platziert.
<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>
Stapel Etikett Eingabefeld ist in der Regel auf dem Kopf befindet. Jede Option verwendet Artikel-stacked-Label-Klassenbezeichnung. Jedes Eingabefeld Eingabe-Etikett angeben. Die folgenden Beispiele sind auch die Platzhalter Attributinformationen Eingabeaufforderung eingestellt.
<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>
Ähnliche Floating Etikett das Label-Stack, aber das Etikett item-Floating-Label-Kategorie, geben Sie das Etikett, das Sie Eingabe-Label angeben müssen angeben, eine Floating-Animationseffekte für jede Option benötigen.
<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>
Standardmäßig ist jedes Eingabefeld Breite 100%, aber wir können die Liste list-Einschub-Klasse-Karte verwenden oder die Form der Polsterung (padding) gesetzt, Karten-Typ mit Schatten.
<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>
Verwenden Sie list-Einsatz Set Inline-Entity-Liste. Verwenden Sie Artikel-input-Einschub Stile können eine Schaltfläche einbetten.
<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>
item-Eingang Eingabefeld kann sehr einfach sein Symbole. Icon in der <input> vor der Zugabe.
<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>
Eingabefeld kann in den Kopf gestellt werden, und hinzufügen oder Abbrechen 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>