Formulir Dengan Label Bergaya
Cara Membuat Style Label Formulir Dengan CSS. Elemen formulir yang digunakan untuk memberi label pada berbagai bidang dan area input pada formulir halaman web adalah elemen label. Itu dapat ditata menggunakan aturan Cascading Style Sheet.
Langkah 1
Untuk memberi gaya pada elemen label seperti yang ditampilkan pada gambar di pendahuluan, Anda perlu menggunakan elemen label dengan atribut "untuk". Selanjutnya, Anda perlu menutup elemen label sebelum menambahkan elemen "input" itu sendiri. HTML untuk formulir lengkap ditunjukkan dalam ilustrasi.
Video Hari Ini
Langkah 2
Untuk menata elemen label, saya membuat label ditampilkan sebagai elemen level blok, yang melayang ke kiri. Kemudian saya menetapkan lebar ke label sehingga semua bidang input akan memiliki jarak yang seragam dari label. Saya menetapkan warna dan membuat teks tebal. Saya menggunakan konten yang dibuat untuk menambahkan titik dua (: ) setelah label. (Titik dua mungkin tidak muncul di setiap browser.)
Berikut CSSnya:
label { warna: #B4886B; font-berat: tebal; tampilan: blok; lebar: 150 piksel; mengapung: kiri; } label: setelah { konten: ": " }
Langkah 3
Untuk kelengkapan, saya juga akan menunjukkan kepada Anda CSS yang digunakan untuk menata fieldset, karena elemen label diapit oleh fieldset berbatas.
Ini CSS-nya:
fieldset { batas: 1px solid #CCA383; lebar: 400px; latar belakang: #FFE8EF; bantalan: 3 piksel; } legenda fieldset { latar belakang: #CCA383; bantalan: 6px; font-berat: tebal; }
Langkah 4
Anda dapat melakukan banyak hal lain untuk menata elemen label. Contoh saya hanyalah salah satu cara untuk melakukannya.
Formulir HTML
Hal yang Anda Butuhkan
Pengetahuan tentang HTML
Pengetahuan tentang CSS
