Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML.
Atas: Bahasa Markup - Kutipan
Sumber Asli Bab 5 Formulir
Interaksi selalu menjadi fokus Internet, memungkinkan pengguna untuk bertukar informasi dan berkomunikasi satu sama lain. Formulir memungkinkan kami untuk mengatur dan mengumpulkan informasi dari pengguna dengan cara yang sama, jadi ketika merancang situs web, kami selalu termasuk dalam kategori yang dapat digunakan dalam situasi apa pun. Misalnya, kami menemukan bahwa ada sekitar 10.000 cara berbeda untuk menandai bentuk. Yah, mungkin tidak banyak, tetapi kita masih bisa memikirkan beberapa situasi, memudahkan pengguna untuk menggunakan struktur formulir dan juga memfasilitasi manajemen oleh pemilik situs web. Metode untuk menandai bentuk A: Gunakan formulir
<Form Action =/Path/to/Script Method = Post>
<able>
<tr>
<th> Nama: </tom>
<td> <input type = name teks = nama /> </td>
</tr>
<tr>
<TH> Email: </th>
<td> <input type = nama teks = email /> </td>
</tr>
<tr>
<t th> & nbsp; </th>
<td> <input type = kirim nilai = kirim /> </td>
</tr>
</boable>
</form>
Banyak orang telah lama bertanda dengan tabel. Karena frekuensi penggunaan yang tinggi, kita menjadi terbiasa melihat tipe bentuk dengan cara ini: kolom kiri adalah deskripsi teks yang selaras kanan, dan kolom kanan adalah elemen bentuk yang selaras kiri. Menggunakan bentuk dua daftar sederhana adalah salah satu cara sederhana untuk melengkapi pengaturan huruf bentuk yang mudah digunakan.
Beberapa orang berpikir bahwa bentuknya tidak diperlukan, dan yang lain berpikir bahwa bentuk harus dianggap sebagai bahan bentuk. Kami tidak bermaksud untuk mendukung salah satu pernyataan, tetapi dalam beberapa kasus, cara terbaik untuk mencapai tata letak bentuk tertentu saat menggunakan bentuk, terutama bentuk yang kompleks dengan banyak elemen yang berbeda (bentuk yang menggunakan kotak radio, kotak drop-down, dll.). Mengandalkan sepenuhnya pada CSS untuk menangani bentuk -bentuk seperti itu bisa membuat frustrasi, dan seringkali membutuhkan tambahan <span> dan <div> untuk mengkonsumsi lebih banyak tag daripada tabel.
Selanjutnya, lihat Gambar 5-1. Ini adalah efek dari metode tampilan browser visual umum A:
Gambar 5-1: Pengaruh metode yang ditampilkan di browser
Anda akan menemukan bahwa menggunakan tabel dapat mengatur elemen teks dengan cara yang sangat rapi. Namun, untuk bentuk sederhana seperti itu, saya dapat menghindari menggunakan tabel dan menggunakan metode lain yang tidak memerlukan begitu banyak label. Kecuali desain visual formulir memerlukan pengesahan huruf seperti itu, formulir mungkin tidak diperlukan. Pada saat yang sama, kita juga harus mempertimbangkan beberapa kemudahan penggunaan. Saat mempelajari dua metode berikut, kami akan melakukan kontak dengan bagian ini.
<Form Action =/Path/to/Script Method = Post>
<p>
Nama: <Input Type = Teks Nama = Nama /> <br />
Email: <input type = nama teks = email /> <br />
<Input Tipe = Kirim Nilai = Kirim />
</p>
</form>
Menggunakan satu paragraf dan beberapa tag <br /> adalah cara yang layak untuk memisahkan semua elemen, tetapi mungkin secara visual digambarkan sedikit diperas. Gambar 5-2 Efek tampilan dari versi kesebelas browser:
Gambar 5-2: Pengaruh metode tampilan browser b
Meskipun kita dapat melengkapi tata letak tanpa menggunakan meja, itu terlihat agak ramai dan jelek. Pada saat yang sama, kami juga mengalami masalah yang membentuk elemen tidak dapat disejajarkan dengan sempurna.
Kami dapat menambahkan tambalan tambahan ke elemen <sput> dengan CSS untuk meringankan perasaan berkerumun. Seperti ini:
input {
Margin: 6px 0;
}
Paragraf sebelumnya menambahkan 6 piksel tambalan tambahan ke bagian atas dan bawah masing -masing elemen <sput> (termasuk nama, kotak input email, dan tombol kirim), dan menambahkan ruang tambahan antara elemen. Sama seperti Gambar 5-3:
Gambar 5-3. Efek Metode B Setelah menambahkan tambalan tambahan ke elemen input
Metode B sendiri tidak memiliki masalah besar, tetapi juga dapat disesuaikan untuk membuat bentuk lebih baik. Metode C juga menggunakan teknik penyempurnaan ini, jadi mari kita lihat.
<Form Action =/path/to/script id = Metode Form ini = Posting>
<p> <label for = name> name: < /label> <br />
<Input Tipe = Text ID = Nama Nama = Nama /> </p>
<p> <label untuk = email> Email: </label> <br />
<Jenis input = ID Teks = Nama Email = Email /> </p>
<p> <input type = kirim nilai = kirim /> </p>
</form>
Saya suka beberapa hal tentang metode C. Pertama, untuk bentuk sederhana yang mirip dengan contoh ini, saya merasa lebih nyaman untuk menempatkan setiap deskripsi dan elemen bentuk dalam paragraf terpisah. Tanpa menambahkan tampilan gaya, jarak preset antara paragraf harus cukup untuk membuat Anda membaca konten dengan mudah. Kemudian, kita dapat mengatur interval menggunakan CSS sebagai tag <p> yang terkandung dalam formulir.
Kami bahkan melangkah lebih jauh dan menetapkan ID unik = Formulir ini untuk formulir. Oleh karena itu, interval pasti yang saya sebutkan sekarang dapat ditulis secara kasar seperti ini:
#thisform p {
Margin: 6px 0;
}
Ini berarti mengatur tambalan atas, bawah dan luar dari tag <p> dalam bentuk ini menjadi 6 piksel, yang mencakup nilai -nilai preset yang dipilih oleh browser untuk paragraf umum.
Perbedaan lain antara metode C dan dua metode pertama adalah bahwa meskipun masing -masing kelompok (kotak instruksi dan input) ditempatkan di <p>, kami masih menempatkannya di jalur independen. Dengan menggunakan <br /> untuk memisahkan setiap elemen, kami dapat melewati masalah panjang teks yang berbeda, menghasilkan ketidakmampuan untuk menyelaraskan item input dengan sempurna.
Gambar 5-4 menunjukkan efek dari metode tampilan browser umum C, di mana gaya yang diatur untuk tag <p> digunakan.
Gambar 5-4. Efek Metode Tampilan Browser C, Menggunakan CSS untuk T Tag
Selain efek visual dari metode C, keuntungan yang paling penting adalah meningkatkan kemudahan penggunaan.
Menggunakan tag <label> untuk meningkatkan kemudahan penggunaan formulir membutuhkan dua langkah, dan metode C telah menyelesaikan dua langkah ini. Pertama, gunakan <label> untuk menghubungkan deskripsi teks dengan elemen formulir yang relevan, apakah itu kotak input teks (bidang teks), kotak input blok teks (area teks), kotak radio (radio), kotak centang (kotak centang), dll. Metode C menggunakan tag <label> pada nama: dan email: judul, menghubungkannya dengan elemen yang memasukkan data.
Langkah kedua adalah menambahkan atribut untuk ke tag <label> dan mengisi ID dari kotak input yang sesuai.
Misalnya, dalam metode C, gunakan tag <label> untuk membungkus nama: dan isi atribut untuk dengan nilai yang sama dengan ID kotak input setelahnya.
<Form Action =/path/to/script id = Metode Form ini = Posting>
<p> <label for = name> name: < /label> <br />
<Input Tipe = Text ID = Nama Nama = Nama /> </p>
<p> <label untuk = email> Email: </label> <br />
<Jenis input = ID Teks = Nama Email = Email /> </p>
<p> <input type = kirim nilai = kirim /> </p>
</form>
Mungkin saya telah mendengar orang lain mengatakan bahwa Anda harus menambahkan tag <label> ke dalam formulir. Pertanyaan terpenting adalah mengapa Anda harus menggunakan tag <label>.
Adalah hal yang baik untuk membangun asosiasi label/ID yang memungkinkan pembaca layar membaca label yang benar untuk setiap elemen bentuk tanpa pengaruh pengaturan tata letak. Pada saat yang sama, tag <label> dibuat untuk menandai label batang bentuk . Saat menggunakan tag ini, kami menjelaskan arti dari setiap elemen dan memperkuat struktur bentuk.
Ada manfaat tambahan dari menggunakan tag <label> saat memproses kotak pilihan tunggal dan multi-check, yaitu, sebagian besar browser juga akan mengubah nilai elemen ketika pengguna mengklik teks di <LABEL>. Ini dapat membuat area klik yang lebih besar untuk elemen input, membuatnya lebih mudah bagi pengguna dengan mobilitas-insonvenients untuk mengisi formulir (Mark Pilgrim, menyelam ke dalam aksesibilitas , http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
Misalnya, jika Anda menambahkan kotak multi-check ke formulir sehingga pengguna dapat memilih untuk menuliskan informasi ini, maka kami dapat menggunakan tag <label> seperti ini:
<Form Action =/path/to/script id = Metode Form ini = Posting>
<p> <label for = name> name: < /label> <br />
<Input Tipe = Text ID = Nama Nama = Nama /> </p>
<p> <label untuk = email> Email: </label> <br />
<Jenis input = ID Teks = Nama Email = Email /> </p>
<p> <input type = checkbox id = Remember name = Remember /> <label untuk = ingat> ingat info ini? </label> </p><p> <input type = kirim nilai = kirim /> </p>
</form>
Dengan menandai kotak multi-check dengan cara ini, dua manfaat dapat diperoleh: Pembaca layar dapat membaca teks penjelasan yang benar (seperti contoh ini, teks dapat muncul setelah kotak input), dan kisaran kotak multi-check switching telah menjadi lebih besar. Sekarang, selain kotak multi-check itu sendiri, bagian teks juga disertakan (sebagian besar browser mendukungnya).
Gambar 5-5 menunjukkan efek tampilan dari formulir ini di browser. Kami secara khusus menunjukkan kisaran switching kotak multi-periksa setelah pembesaran:
Gambar 5-5. Beberapa kotak pilihan yang menyertakan teks dalam rentang switching
Selain formulir dan paragraf, saya juga ingin menunjukkan cara lain untuk menandai formulir, menggunakan daftar definisi.
Sebelumnya Halaman 1 2 3 4 Halaman Berikutnya Baca teks lengkapnya