Sunday, January 25, 2015

Tag select required HTML5

Tag <select> HTML5 mempunyai atribut required yang mengharuskan pilihan tidak boleh kosong - pilihan yang dipilih harus mempunyai nilai. Misalnya tag select berisi option pertama kosong, kedua jeruk, ketiga jambu, keempat apel. Jika dipilih pilihan pertama maka tampilan select timbul warna pink tanda peringatan pilihan tak boleh kosong.

Atribut required bernilai boolean, true jika diaktifkan dan false jika sebaliknya.

Contoh: srequired.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag select required</title>
            <style>
                select{width: 90px; padding: 4px}
            </style>
        </head>
    <body>
        <h2>Contoh penerapan tag select required</h2>
        <select name="pilihan" required="true">
            <option></option>
            <option value="opsi1">Jeruk</option>
            <option value="opsi2">Jambu</option>
            <option value="opsi3">Apel</option>
        </select>
    </body>
</html>


Output:

Pilihan ke-3 dipilih.
Ketika pilihan pertama dipilih, kemudian klik sembarang (pindah kursor). Maka tampilan select berubah.
Referensi tulisan:
  1. <select>; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Januari 2015.
    About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

No comments:

Post a Comment