Tutorial bentuk dan kotak masukan ionik Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari tab ditumpuk,mengambang label,Form tertanam,field input inline,Dengan ikon kotak input,Kepala kotak input,

bentuk dan kotak masukan ionik

daftar kelas juga dapat digunakan elemen input. item-masukan dan kategori barang menentukan kotak teks dan label.

Sifat kotak input: placeholder

Contoh berikut, default adalah 100% dari lebar (kiri dan kanan tanpa perbatasan), dan menggunakan input pesan atribut bidang placeholder set nilai yang diharapkan.

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

Coba »

kotak input sifat: masukan-label

penggunaan input-label label ditempatkan di sebelah kiri dari masukan kotak 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>

Coba »

---

tab ditumpuk

Susun kotak input label biasanya terletak di kepala. Setiap opsi menggunakan item-ditumpuk-label kelas penunjukan. Setiap kotak input untuk menentukan input-label. Contoh berikut juga digunakan untuk mengatur placeholder atribut masukan informasi yang cepat.

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

Coba »

---

mengambang label

label mengambang mirip tumpukan label, namun label memiliki efek animasi mengambang untuk setiap opsi yang Anda perlu menentukan kategori item-floating-label, masukkan label Anda perlu menentukan 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>

Coba »

---

Form tertanam

Secara default, setiap lebar field input adalah 100%, tapi kita bisa menggunakan daftar daftar-inset kartu kelas atau mengatur padding form (padding), jenis kartu dengan bayangan.

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

Coba »

---

field input inline

Gunakan daftar-inset set inline daftar entitas. Menggunakan item-input-inset gaya dapat menanamkan tombol.

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

Coba »

---

Dengan ikon kotak input

kotak input item-masukan bisa sangat sederhana untuk menambahkan ikon. Ikon di <input> sebelum menambahkan.

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

Coba »

---

Kepala kotak input

kotak input dapat ditempatkan di kepala, dan dapat menambah atau membatalkan tombol submit.

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

Coba »