Il miglior tutorial forme e caselle di input ionica Nel 2024, in questo tutorial puoi imparare schede impilate,etichetta galleggiante,Modulo incorporato,campo di inserimento in linea,Con la scatola di input icona,Il capo della casella di input,

forme e caselle di input ionica

Lista classe può essere utilizzato anche elementi di input. item-ingresso e di categoria voce specifica la casella di testo e la sua etichetta.

Proprietà casella di input: segnaposto

Il seguente esempio, il valore di default è 100% della larghezza (a destra ea sinistra senza un confine), e utilizzando il valore atteso di attributo campo segnaposto set di input messaggio.

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

Prova »

proprietà delle caselle di input: input-label

uso Input-label dell'etichetta posizionata a sinistra dell'ingresso casella di 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>

Prova »

---

schede impilate

Impilabile casella di immissione etichetta è di solito si trova sulla testa. Ogni opzione utilizza item-stacked-label designazione della classe. Ogni casella di input per specificare input-label. Gli esempi che seguono sono utilizzati anche per impostare l'attributo segnaposto richiesta di immissione dati.

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

Prova »

---

etichetta galleggiante

etichetta galleggiante simile impilare l'etichetta, ma l'etichetta ha un galleggiante effetti di animazione per ogni opzione è necessario specificare Categoria dell'oggetto-floating-label, immettere l'etichetta è necessario specificare 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>

Prova »

---

Modulo incorporato

Per impostazione predefinita, ogni larghezza del campo di ingresso è al 100%, ma siamo in grado di utilizzare l'elenco lista-inserto carta di classe o impostare imbottitura del form (imbottitura), tipo di carta con le ombre.

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

Prova »

---

campo di inserimento in linea

Utilizzare lista-inserto set linea lista entità. Utilizzare la voce-input-inserto stili possono incorporare un pulsante.

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

Prova »

---

Con la scatola di input icona

casella di input voce-input può essere molto semplice per aggiungere le icone. Icona nella <input> prima di aggiungere.

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

Prova »

---

Il capo della casella di input

casella di inserimento può essere collocato in testa, e può aggiungere o cancellare pulsante di invio.

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

Prova »