Formulir CSS
Tampilan formulir HTML dapat sangat ditingkatkan dengan CSS:
Menata Bidang Masukan
Gunakan width
properti untuk menentukan lebar bidang input:
Contoh
input
{
width: 100%;
}
Contoh di atas berlaku untuk semua elemen <input>. Jika Anda hanya ingin menata tipe input tertentu, Anda dapat menggunakan pemilih atribut:
input[type=text]
- hanya akan memilih bidang teksinput[type=password]
- hanya akan memilih bidang kata sandiinput[type=number]
- hanya akan memilih bidang angka- dll..
Masukan Empuk
Gunakan padding
properti untuk menambahkan ruang di dalam bidang teks.
Tip: Bila Anda memiliki banyak masukan setelah satu sama lain, Anda mungkin juga ingin menambahkan beberapa margin
, untuk menambahkan lebih banyak ruang di luarnya:
Contoh
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Perhatikan bahwa kami telah mengatur box-sizing
properti ke
border-box
. Ini memastikan bahwa padding dan akhirnya batas disertakan dalam total lebar dan tinggi elemen.
Baca lebih lanjut tentang box-sizing
properti di bab Ukuran Kotak CSS kami.
Masukan Berbatasan
Gunakan border
properti untuk mengubah ukuran dan warna batas, dan gunakan border-radius
properti untuk menambahkan sudut membulat:
Contoh
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Jika Anda hanya menginginkan batas bawah, gunakan border-bottom
properti:
Contoh
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Masukan Berwarna
Gunakan background-color
properti untuk menambahkan warna latar belakang ke input, dan color
properti untuk mengubah warna teks:
Contoh
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Masukan Terfokus
Secara default, beberapa browser akan menambahkan garis biru di sekitar input saat mendapat fokus (diklik). Anda dapat menghapus perilaku ini dengan menambahkan outline: none;
ke input.
Gunakan :focus
pemilih untuk melakukan sesuatu dengan bidang input saat mendapat fokus:
Contoh
input[type=text]:focus
{
background-color: lightblue;
}
Contoh
input[type=text]:focus
{
border: 3px solid #555;
}
Masukan dengan ikon/gambar
Jika Anda menginginkan ikon di dalam input, gunakan background-image
properti dan posisikan dengan background-position
properti. Perhatikan juga bahwa kami menambahkan bantalan kiri besar untuk memesan ruang ikon:
Contoh
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Masukan Pencarian Animasi
Dalam contoh ini kami menggunakan transition
properti CSS untuk menganimasikan lebar input pencarian saat mendapat fokus. Anda akan mempelajari lebih lanjut tentang
transition
properti nanti, di bab Transisi CSS kami.
Contoh
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Styling Textareas
Tip: Gunakan resize
properti untuk mencegah textareas diubah ukurannya (nonaktifkan "grabber" di sudut kanan bawah):
Contoh
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Gaya Pilih Menu
Contoh
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Menata Tombol Input
Contoh
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Untuk informasi selengkapnya tentang cara menata tombol dengan CSS, baca Tutorial Tombol CSS kami .
Formulir Responsif
Ubah ukuran jendela browser untuk melihat efeknya. Saat lebar layar kurang dari 600px, buat dua kolom bertumpuk di atas satu sama lain, bukan bersebelahan.
Lanjutan: Contoh berikut menggunakan kueri media untuk membuat formulir responsif. Anda akan mempelajari lebih lanjut tentang ini di bab selanjutnya.