Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Formulir CSS


Tampilan formulir HTML dapat sangat ditingkatkan dengan CSS:


Menata Bidang Masukan

Gunakan widthproperti 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 teks
  • input[type=password] - hanya akan memilih bidang kata sandi
  • input[type=number] - hanya akan memilih bidang angka
  • dll..


Masukan Empuk

Gunakan paddingproperti 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-sizingproperti ke border-box. Ini memastikan bahwa padding dan akhirnya batas disertakan dalam total lebar dan tinggi elemen.
Baca lebih lanjut tentang box-sizingproperti di bab Ukuran Kotak CSS kami.


Masukan Berbatasan

Gunakan borderproperti untuk mengubah ukuran dan warna batas, dan gunakan border-radiusproperti untuk menambahkan sudut membulat:

Contoh

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Jika Anda hanya menginginkan batas bawah, gunakan border-bottomproperti:

Contoh

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Masukan Berwarna

Gunakan background-colorproperti untuk menambahkan warna latar belakang ke input, dan colorproperti 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 :focuspemilih 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-imageproperti dan posisikan dengan background-positionproperti. 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 transitionproperti CSS untuk menganimasikan lebar input pencarian saat mendapat fokus. Anda akan mempelajari lebih lanjut tentang transitionproperti 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 resizeproperti 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.