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