Standardisasi web telah mendapat lebih banyak perhatian dan perhatian dari semua orang. Saat membuat halaman web yang sesuai dengan standar Web, kita sering menemui masalah bentuk semoga ini akan membantu tata letak CSS semua orang.
1. Gunakan tag fieldset dan legenda
Dalam formulir, kita sering mengelompokkan informasi di dalam formulir. Misalnya, dalam formulir pendaftaran, kita dapat mengelompokkan informasi pendaftaran menjadi informasi dasar (umumnya wajib) dan informasi rinci (umumnya opsional). dia? Kita dapat mempertimbangkan untuk menambahkan dua tag berikut ke formulir:
kumpulan bidang: Formulir grup.
legenda: jelaskan isi masing-masing kelompok
| Berikut isi kutipannya: <form id="demoform" class="democss" action=""> <kumpulan bidang> <legend>Daftar Dasar</legend> <p>Nama depan: <input type="text" name="fname" value="" /></p> ... </set bidang> <kumpulan bidang> <legend>Daftar Terperinci</legend> <p>Minat: <input type="text" name="interest" value="" /></p> ... </set bidang> ... </bentuk> |
Fieldset dibatasi secara default, dan legenda umumnya ditampilkan di sudut kiri atas secara default. Namun dalam beberapa kasus, Anda mungkin tidak ingin membiarkan gaya default atau tata letak default kumpulan bidang dan legenda memengaruhi estetika desain.
Solusi: Atur batas fieldset ke 0 dan tampilan legenda menjadi none di CSS.
2. Gunakan tag label
Kami memberikan label label ke label teks dalam formulir dan menggunakan atribut for untuk mengaitkannya dengan komponen formulir. Efeknya adalah ketika label teks diklik, kursor ditampilkan di komponen formulir yang sesuai.
| Berikut isi kutipannya: <form id="demoform" class="democss" action=""> <kumpulan bidang> <legend>Daftar Dasar</legend> <p> <label for="fname">Nama depan:</label> <input type="teks" id="fname" nama="fname" value="" /> </p> ... </set bidang> <kumpulan bidang> <legend>Daftar Terperinci</legend> <p> <label for="interest">Minat:</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </set bidang> ... </bentuk> |
Selain cara di atas, kita juga bisa menggunakan label untuk menyarangkan seluruh komponen form dan label teks, seperti:
| Berikut isi kutipannya: <label untuk="namaf"> Nama depan: <input type="teks" id="fname" nama="fname" value="" /> </label> |
Menurut spesifikasinya, teks akan secara otomatis dikaitkan dengan komponen formulir yang berdekatan, namun sayangnya - browser mainstream saat ini IE6 tidak mendukung fitur ini.
3. Gunakan atribut accesskey dan tabindex
Situs web perlu mempertimbangkan lebih banyak situasi penggunaan. Misalnya, ketika tidak ada perangkat kursor (seperti mouse), formulir dapat diisi menggunakan operasi keyboard. Saat ini, kita memilih accesskey label (kunci pintasan, nilai atribut alt+accesskey di bawah IE, alt+shift+ nilai atribut accesskey di bawah FF) dan atribut tabindex (kunci Tab, nilai atribut tabindex adalah urutan) untuk ditambahkan ke label formulir, seperti label, masukan, dll.
| Berikut isi kutipannya: <label for="fname" accesskey="f" tabindex="1" >Nama depan:</label> <input type="teks" id="fname" nama="fname" value="" /> |
4. Gunakan tag optgroup
Peran tag optgroup adalah untuk menentukan serangkaian opsi dalam daftar pilihan. Kita dapat menggunakan tag optgroup untuk mengklasifikasikan opsi elemen pilih dan menggunakan atribut label. Nilai atribut akan ditampilkan sebagai judul yang tidak dapat dipilih dan menjorok ke dalam daftar drop-down (pilih). Catatan: optgroups tidak mendukung penyarangan.
| Berikut isi kutipannya: <pilih nama="Tiongkok"> <optgroup label="Jiangsu"> <option value="nj">Nanjing</option> <option value="sz">Suzhou</option> </optgroup> <optgroup label="Zhejiang"> <option value="hz">Hangzhou</option> <option value="wz">Wen zhou</opsi> </optgroup> </pilih> |
Ada bug kecil di IE6.0 (tidak ada di FireFox): saat menggunakan tombol panah keyboard untuk memilih, di IE, ketika item yang dipilih diubah dari opsi satu optgroup ke opsi optgroup lain, onchange tidak akan dipicu. Solusinya adalah: tambahkan event onkeydown atau onkeyup untuk membantu menyelesaikan masalah.
5. Gunakan tag tombol
Definisi dan penggunaan
Didefinisikan sebagai tombol kirim. Di dalam elemen tombol Anda dapat menempatkan konten, seperti teks atau gambar. Inilah perbedaan antara elemen ini dan tombol elemen input.
<button><img src="images/click.gif" alt="Klik Saya!" />Klik Saya!</button>
Tombol menyediakan lebih banyak fungsi dan konten yang lebih kaya daripada input. tombol memisahkan teks tombol, dan Anda dapat menambahkan gambar di dalam tombol, memberikan teks dan gambar lebih banyak gaya untuk dipilih, menjadikan tombol kaku lebih jelas.
Dan penggunaan tag tombol akan lebih semantik daripada tombol masukan, dan dapat dipahami hanya dari arti literalnya.