Masukan W3.CSS
Formulir Masukan
Label Teratas
Formulir Masukan
Contoh
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
Label Bawah
Formulir Masukan
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>
Kartu Masukan
tajuk
Contoh
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div>
Label Berwarna
Gunakan salah satu kelas w3-text-color untuk mewarnai label Anda:
Contoh
<form class="w3-container">
<label
class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="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>
Masukan Berbatasan
Tambahkan kelas w3-border untuk membuat input berbatas:
Contoh
<input class="w3-input w3-border"
type="text">
Perbatasan Bulat
Gunakan salah satu kelas w3-round untuk membuat batas bulat:
Contoh
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">
Masukan Tanpa Batas
Kelas w3-input memiliki batas bawah secara default. Jika Anda menginginkan input tanpa batas, tambahkan 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>
warna
Jangan ragu untuk menggunakan gaya dan warna favorit Anda:
Formulir Masukan
Contoh
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="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>
Input yang dapat dilayangkan
Kelas warna w3-hover- menambahkan warna latar belakang ke bidang input saat 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">
Masukan Animasi
Kelas w3-animate-input mengubah lebar bidang input menjadi 100% saat mendapat fokus:
Contoh
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
Contoh
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<input class="w3-check"
type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>
Contoh
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label>
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>
Menu Pilihan Berbatasan
Contoh
<select class="w3-select w3-border" name="option">
Elemen Bentuk dalam Kotak
Dalam contoh ini, kami menggunakan Sistem Grid Responsif W3.CSS untuk membuat input muncul pada baris yang sama (pada layar yang lebih kecil, input akan ditumpuk secara 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>
Kotak 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>