cari

Rumah >hujung hadapan web >tutorial css >Cara Mereka Bentuk Borang Boleh Diakses dengan HTML dan CSS

Cara Mereka Bentuk Borang Boleh Diakses dengan HTML dan CSS

DDD
DDDasal
2025-01-06 18:35:41995semak imbas

How to Design Accessible Forms with HTML and CSS

Jadual Kandungan

  1. Pengenalan
  2. Komponen bentuk
  3. Borang Boleh Dicapai dengan HTML
  4. Kesimpulan

pengenalan

Borang adalah bahagian penting dalam membina tapak web. Ia digunakan untuk mengumpul data daripada pengguna apabila mereka menyerahkan butiran mereka. Borang adalah penting dalam interaksi pengguna menghantar borang pendaftaran mereka, log masuk dalam borang, melanggan surat berita atau menghantar mesej untuk menerima maklum balas. Mencipta borang yang boleh diakses adalah penting kepada semua orang terutamanya pembaca skrin untuk mengisi borang tanpa sebarang masalah.

Komponen sesuatu borang

Sesuatu borang terdiri daripada komponen yang berbeza seperti

  • borang: ini ialah bekas yang menerima semua elemen borang lain seperti teg input, butang hantar, kawasan teks, kotak pilihan dan butang radio 
<form></form>
  • input: ini ialah elemen HTML yang menerima butiran pengguna. Teg input dihidangkan bergantung pada tujuan input; teks, nombor, kata laluan, e-mel antara lain 
<form>
      <input type="text" />
      <input type="email" />
      <input type="password" />
      <input type="radio" />
      <input type="checkbox" />
      <input type="file" />
      <input type="range" />
      <input type="color" />
      <input type="date"/>
</form>
  • label: tag ini yang memberikan garis besar butiran untuk mengisi input. Ia dikaitkan dengan teg input. 
<form>
<label for="email">Email</label>
<input type="email">
  • textarea: this is an multi-line input tag that accept 524,288 characters by default except the maxlength attribute is set up to a value. It is used to accept reviews, messages and comments from the users 
<form>
<label for="message">Message:</label>
<textarea>
  • select: this element is for creating a dropdown in which the users are able to select one option by default or more options when the attribute multiple is being used. 
<form>
<select>
  • checkbox: this element allow users to select one or more options. 
<form>
<label for="subscribe"></label>
<input type="checkbox">
  • button: this tag will the users the opportunity to submit their details upon completion. These details are submitted to server. 
<form>
<button type="submit">Submit</button>
</form>

Borang yang boleh diakses dengan HTML

  • Sertakan tag sematik

Menggunakan teg sematik yang betul seperti

,,