Setelah masuk ke eYou.com, saya langsung harus mengubah antarmuka email versi baru menjadi XHTML+CSS.Untungnya, kemampuan dasar saya masih cukup kuat, jadi saya melakukannya dengan tertib. Tentu saja Anda akan menemui kendala baru, misalnya ketika Anda biasa membuat halaman web, Anda jarang menggunakan formulir karena tidak memiliki pengalaman dengan program. Untungnya, dunia masih memiliki Google, yang memungkinkan saya mengatasi tantangan baru dengan mudah. Tuliskan beberapa pengalaman dan bagikan dengan semua orang.
Berdasarkan pertimbangan aksesibilitas, cara standar penulisan formulir harus menyertakan kumpulan bidang dan legenda (deskripsi) di <form> dan </form> untuk memungkinkan pengguna memahami ringkasan bidang formulir. Struktur sederhananya adalah sebagai berikut:
| Berikut isi kutipannya: <bentuk> <kumpulan bidang> <legenda></legenda> ... </set bidang> </bentuk> |
Dalam beberapa kasus, Anda mungkin tidak ingin kumpulan bidang dan legenda memengaruhi estetika desain Anda. Ini mudah untuk ditangani. Cukup atur batas kumpulan bidang ke 0 dan tampilan legenda ke tidak ada di CSS.
Dalam kebanyakan kasus, tata letak formulir dibagi menjadi dua kolom, dengan label di sebelah kiri dan kotak input (input type="text"...) di sebelah kanan. Dengan tata letak dua kolom yang sederhana, saya sangat menyarankan untuk tidak menggunakan tabel. Referensi http://stylephreak.frogrun.com/uploads/source/cssform.php dan http://www.aplus.co.yu/css/forms/?css=1 (dua referensi yang sangat berharga, Anda sudah melakukannya. Anda belum' Tidak perlu membaca lebih jauh), kami menemukan bahwa solusi umum untuk standar Web adalah menambahkan div di sekitar label dan memasukkan tipe = "teks"..., dan mengatur tampilan div agar diblokir. Atur label menjadi float: left; (ini juga alasan mengapa div disetel ke display: block;) dan kemudian label dapat ditempatkan pada baris yang sama dengan kotak input. Sedikit trik untuk menyelaraskan label adalah dengan memperbaiki lebar label lalu menggunakan text-align untuk menyelaraskannya ke kiri atau kanan sesuai kebutuhan. Tip untuk mengatur lebar adalah dengan menggunakan unit em untuk mengatur lebar berdasarkan jumlah kata maksimum dari tag, tanpa harus bersusah payah menguji px.
Agar penjelasan saya lebih mudah dipahami, saya cukup menulis beberapa kode:
| Berikut isi kutipannya: XHTML: (sebagian) <bentuk> body {/*Ini tidak ada hubungannya dengan formulir, atur efek tampilan halaman*/ |