tutorial pengembangan web terbaru
 

W3.CSS Memasukkan


Form Input










Top Label

Form Input

Contoh

<form class="w3-container">

<label>First Name</label>
<input class="w3-input" type="text">

<label>Last Namel</label>
<input class="w3-input" type="text">

</form>
Cobalah sendiri "

bawah Label

Form Input

Contoh

<form class="w3-container">

<input class="w3-input" type="text">
<label>First Name</label>

<input class="w3-input" type="text">
<label>Last Name</label>

</form>
Cobalah sendiri "

Kartu masukan

Header


Contoh

<div class="w3-card-4">

<div class="w3-container w3-green">
  <h2>Header</h2>
</div>

<form class="w3-container">

<label class="w3-label">First Name</label>
<input class="w3-input" type="text">

<label class="w3-label">Last Name</label>
<input class="w3-input" type="text">

</form>

</div>
Cobalah sendiri "

Label hijau

Label dengan class = "w3-label" hijau secara default:


Contoh

<form class="w3-container">

<label class="w3-label">First Name</label>
<input class="w3-input" type="text">

<label class="w3-label">Last Name</label>
<input class="w3-input" type="text">

</form>
Cobalah sendiri "

memvalidasi Label

Memvalidasi label merah, dan berubah menjadi hijau ketika input menjadi valid.

Untuk membuat label memvalidasi, menambahkan kelas w3-validate untuk kelas w3-label Anda.


Contoh

<form class="w3-container">

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">First Name</label>

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">Last Name</label>

<input class="w3-input" type="email" required>
<label class="w3-label w3-validate">Email</label>

</form>
Cobalah sendiri "

berwarna Label

Gunakan salah satu kelas w3-text-warna untuk warna label Anda:

Daftar

Contoh

<form class="w3-container">

<label class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
 
<label class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">

<button class="w3-btn w3-blue">Register</button>
 
</form>
Cobalah sendiri "

berbatasan Masukan

Tambahkan kelas w3-perbatasan untuk membuat input border:


Contoh

<input class="w3-input w3-border" type="text">
Cobalah sendiri "

bulat Borders

Gunakan salah satu kelas w3-bulat untuk membuat perbatasan bulat:


Contoh

<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">
Cobalah sendiri "

borderless Masukan

Kelas w3-masukan memiliki batas bawah secara default. Jika Anda ingin masukan tanpa batas, menambahkan kelas w3-border-0:


Contoh

<form class="w3-container w3-light-grey">
  <label>First Name</label>
  <input class="w3-input w3-border-0" type="text">

  <label>Last Name</label>
  <input class="w3-input w3-border-0" type="text">
</form>
Cobalah sendiri "

warna

Jangan ragu untuk menggunakan gaya favorit Anda dan warna:

Form Input

Daftar

Contoh

<div class="w3-container w3-teal">
  <h2>Input Form</h2>
</div>

<form class="w3-container">
  <label class="w3-label w3-text-teal"><b>First Name</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="w3-label w3-text-teal"><b>Last Name</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <button class="w3-btn w3-blue-grey">Register</button>
</form>
Cobalah sendiri "

input Hoverable

Kelas warna w3-hover- menambahkan warna latar belakang bidang masukan pada mouse-over:

Contoh

<input class="w3-input w3-hover-green" type="text">
<input class="w3-input w3-border w3-hover-red" type="text">
<input class="w3-input w3-border w3-hover-blue" type="text">
Cobalah sendiri "

animasi Input

Kelas w3-bernyawa-masukan mengubah lebar field input 100% ketika mendapat fokus:

Contoh

<input class="w3-input w3-animate-input" type="text" style="width:30%">
Cobalah sendiri "

centang

Contoh

<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>

<input class="w3-check" type="checkbox">
<label class="w3-validate">Sugar</label>

<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label>
Cobalah sendiri "

Tombol radio

Contoh

<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>

<input class="w3-radio" type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>

<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label>
Cobalah sendiri "

Pilih Pilihan

Contoh

<select class="w3-select" name="option">
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
Cobalah sendiri "

Berbatasan Pilih Menu

Contoh

<select class="w3-select w3-border" name="option">
Cobalah sendiri "

Elemen Form di Grid

Dalam contoh ini, kita menggunakan W3.CSS 'Responsive Grid System untuk membuat input muncul pada baris yang sama (pada layar yang lebih kecil, mereka akan menumpuk horizontal dengan lebar 100%). Anda akan belajar lebih banyak tentang ini nanti.

Contoh

<div class="w3-row-padding">
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="One">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Two">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Three">
  </div>
</div>
Cobalah sendiri "

Dua kolom layout dengan label:

Contoh

<div class="w3-row-padding">
  <div class="w3-half">
    <label>First Name</label>
    <input class="w3-input w3-border" type="text" placeholder="Two">
  </div>
  <div class="w3-half">
    <label>Last Name</label>
    <input class="w3-input w3-border" type="text" placeholder="Three">
  </div>
</div>
Cobalah sendiri "