^ Zona Info: Atribut tag select pada html

Atribut tag select pada html

Zona Info | Ilmu Komputer |  Oktober 10, 2017
Post by: Ian

Atribut Pilihan


AtributDeskripsiNilai yang mungkin
name
  • Nama bentuk kontrol, untuk dipasangkan dengan nilainya.
  • Value: Teks (tidak ada spasi).
Contoh atribut <select name> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
<select name="Planet">
  <option value="Merkurius">Merkurius</option>
  <option value="Venus">Venus</option>
  <option value="Bumi">Bumi</option>
  <option value="Mars">Mars</option>
</select>
<input type="Submit">
</form>

</body>
</html>

 Preview:
disabled
  • Nonaktifkan kontrol bentuk.
  • Value: Tidak ada
Contoh atribut <select disabled> :

 <!DOCTYPE html>
<html>
<body>

<select disabled>
  <option value="Harimau">Harimau</option>
  <option value="Singa">Singa</option>
  <option value="Kelinci">Kelinci</option>
  <option value="Kucing">Kucing</option>
</select>

</body>
</html>

 Preview:
autofocus
  • Menunjukkan bahwa kontrol formulir harus berfokus pada pemuatan halaman. Sebaiknya hanya digunakan pada satu bentuk kontrol di halaman.
  • Value: Tidak ada
Contoh atribut <select autofocus> :

 <!DOCTYPE html>
<html>
<body>

<select autofocus>
<option value="Mangga">Mangga</option>
<option value="Apel">Apel</option>
<option value="Jeruk">Jeruk</option>
<option value="Melon">Melon</option>
</select>

<p><strong>Catatan:</strong> Atribut autofocus dari tag pilih tidak didukung di Internet Explorer 9 dan versi sebelumnya, atau di Firefox.</p>

</body>
</html>

 Preview:
Catatan: Atribut autofocus dari tag pilih tidak didukung di Internet Explorer 9 dan versi sebelumnya, atau di Firefox.

form
  • Secara eksplisit menghubungkan kontrol ke formelemen, yang mungkin atau mungkin tidak disarangkan di dalamnya.
  • Jika absen, kontrol akan dikaitkan dengan formleluhurnya.
  • Teks yang cocok dengan nilai atribut formelemen id.
Contoh atribut <select form> :

 <html>
<body>

<form action="/action_page.php" id="carform">
  Nama Depan:<input type="text" name="fname">
  <input type="Kirim">
</form>
<br>
<select name="Flowerlist" form="Flowerform">
  <option value="Mawar">Mawar</option>
  <option value="Anggrek">Anggrek</option>
  <option value="Kamboja">Kamboja</option>
  <option value="Melati">Melati</option>
</select>

<p>Daftar drop-down berada di luar elemen form, namun tetap harus menjadi bagian dari form.</p>
<p><b>Catatan:</b> Atribut bentuk tidak didukung di Internet Explorer.</p>

</body>
</html>

 Preview:
Nama Depan:

Daftar drop-down berada di luar elemen form, namun tetap harus menjadi bagian dari form.
Catatan: Atribut bentuk tidak didukung di Internet Explorer.

required
  • Menunjukkan bahwa bidang formulir harus diisi.
  • Value: Tidak ada
Contoh atribut <select required> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
<select required>
  <option value="">None</option>
  <option value="Indonesia">Indonesia</option>
  <option value="Singapura">Singapura</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Australia">Australia</option>
</select>
<input type="Kirim">
</form>

</body>
</html>

 Preview:

multiple
  • Menunjukkan bahwa pengguna dapat memilih lebih dari satu nilai.
  • Value: Tidak ada
Contoh atribut <select multiple> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
<select name="cars" multiple>
  <option value="Jawa">Jawa</option>
  <option value="Sumatera">Sumatera</option>
  <option value="Sulawesi">Sulawesi</option>
  <option value="Kalimantan">Kalimantan</option>
</select>
<input type="Kirim">
</form>

<p>Tahan tombol Ctrl (windows) / Command (Mac) untuk memilih beberapa pilihan.</p>

</body>
</html>

 Preview:
Tahan tombol Ctrl (windows) / Command (Mac) untuk memilih beberapa pilihan.

size
  • Jumlah pilihan yang diharapkan pengguna untuk dilihat sebelum membuat pilihan.
  • Default bila digunakan dengan multiple atribut adalah 4, jika tidak default adalah 1.
  • Value: Jumlah.
Contoh atribut <select size> :

 <!DOCTYPE html>
<html>
<body>

<select size="3">
  <option value="Boomerang">Boomerang</option>
  <option value="Jamrud">Jamrud</option>
  <option value="Power Metal">Power Metal</option>
  <option value="Rif/">Rif/</option>
</select>

</body>
</html>

 Preview:
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Copyright © 2016. Zona Info | powered by: Blogger