Formulir CSS

Dengan menggunakan CSS, dapat memperbaiki secara besar kemampuan tampilan form HTML:

Coba Sendiri

atur gaya kotak input field

Pakai width atur lebar kotak input field:

Contoh

input {
  width: 100%;
}

Coba Sendiri

Contoh di atas berlaku untuk semua elemen <input>. Jika hanya ingin menetapkan gaya untuk jenis input tertentu, Anda dapat menggunakan pemilih atribut:

  • input[type=text] - akan memilih hanya field teks
  • input[type=password] - akan memilih hanya field sandi
  • input[type=number] - akan memilih hanya field angka
  • dan lainnya...

isikan kotak input

Pakai padding atur marjin untuk kotak teks.

Petunjuk:Jika ada banyak input, mungkin Anda perlu menambahkan marjin eksternal untuk menambahkan ruang ekstra di luar mereka:

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Coba Sendiri

Perhatikan, kami telah mengatur box-sizing atur atribut ini ke border-boxini untuk memastikan lebar dan tinggi elemen termasuk marjin (isian) dan garis latar belakang akhir.

Silakan di dalam Box Sizing CSS dalam bab ini belajar tentang box-sizing atau baca lebih lanjut tentang atribut ini.

kotak input dengan garis

Gunakan border untuk mengubah ketebalan dan warna garis, dan gunakan border-radius untuk menambahkan rounding Corner:

Contoh

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

Coba Sendiri

Jika hanya memerlukan garis bawah, gunakan border-bottom Atribut:

Contoh

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

Coba Sendiri

kotak input berwarna

Gunakan background-color untuk menambahkan warna latar belakang bagi input, dan gunakan color untuk mengubah warna teks:

Contoh

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Coba Sendiri

kotak input yang mendapatkan fokus

Secara default, beberapa browser akan menambahkan garis latar belakang biru di sekitar kotak input saat mendapatkan fokus (klik). Anda dapat menambahkan outline: none; untuk menghilangkan perilaku ini.

Pakai :focus Pemilih dapat menetapkan gaya bagi input field saat mendapatkan fokus:

Contoh 1

input[type=text]:focus {
  background-color: lightblue;
}

Klik di kotak teks:

Coba Sendiri

Contoh 2

input[type=text]:focus {
  border: 3px solid #555;
}

Klik di kotak teks:

Coba Sendiri

kotak input dengan ikon/gambar

Jika ingin menambahkan ikon/gambar di kotak input, gunakan properti background-image dengan menggunakannya bersama dengan properti background-position properti bersama-sama. Perhatikan juga, kami menambahkan padding kiri yang besar (padding-left) untuk memberikan 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;
}

Coba Sendiri

search input box dengan efek animasi

Pada contoh ini, kami menggunakan CSS transition properti untuk mengatur animasi perubahan lebar saat search input box mendapatkan fokus. Nanti, Anda akan belajar di Transisi CSS Bisa belajar lebih banyak tentang transition pengetahuan properti.

Contoh

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Coba Sendiri

Atur gaya textarea

Petunjuk:Pakai resize Properti ini dapat mencegah ukuran textareas diedit (nonaktifkan penangkap di pojok 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;
}

Coba Sendiri

Atur gaya menu pilihan

Contoh

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Coba Sendiri

Atur gaya 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;
}
/* Petunjuk: Gunakan width: 100% untuk tombol lebar penuh */

Coba Sendiri

Untuk mengetahui lebih banyak tentang bagaimana mengatur gaya tombol CSS, belajar di Tombol CSS Panduan.

Menu Respon

Silakan jalankan ukuran jendela editor TIY untuk melihat efek. Saat lebar layar kurang dari 600 piksel, biarkan dua kolom berada di atas bawah daripada di sebelah kiri dan kanan.

Mahir: Contoh berikutnya menggunakan Kueri Media Untuk Membuat Formulir Respon. Di bab berikutnya, Anda akan belajar lebih banyak tentang hal ini.

Lihat Menu Respon