Cara Membuat Form di HTML

Pada tutorial kali ini kita akan belajar HTML dasar dengan cara membuat form di HTML diamana kita akan membahas dengan lebih detail beserta atribut-atribut tambahan yang bisa digunakan untuk tag select.

Fungsi Tag Select Dalam Form HTML

Jadi fungsi dari tag select di dalam HTML adalah untuk membuat object form berupa list pilihan yang dapat dipilih oleh user. Tag select biasanya digunakan untuk “memaksa” user dalam memilih salah satu pilihan yang disediakan. Pada saat penggunaan tag select, kita juga membutuhkan tag option sebagai “isi” dari tag select. Berikut penulisan dasar select dalam HTML adalah sebagai berikut

<select>

<option>MamiGoNet 1 </option>

<option>MamiGoNet 2 </option>

<option>MamiGoNet 3 </option>

</select>

Hasil

Sebenarnya anda tidak harus menggunakan tag select dalam form HTML, namun anda dapat menggunakannya tanpa tag form jika kita memerlukan bantuan bahasa pemrogaman lain seperti javascript untuk memproses hasilnya.

Atribut Name Untuk Pemrosesan Tag Select

Selanjutnya kita akan bahasa atribut name untuk tag select yang digunakan sebagai identitas dari tag select tersebut. Identitas ini diperlukan saat pemrosesan di sisi server (misalnya menggunakan PHP). Atribut name akan menjadi variable penampung nilai yang dipilih oleh user. Penulisan atribut name diletakan didalam tag select, bukan di dalam tag option. Berikut penulisan atribut name untuk tag select

<select name=”judul1_MamiGoNet”>

<option>MamiGoNet 1 </option>

<option>MamiGoNet 2 </option>

</select>

Hasil:

Atribut Size Menentukan Besar Tampilan Select

Atribut size digunakan untuk menentukan besar dari tampilan tag select. Atribut size umumnya dirancang untuk dapat dipilih dengan beberapa pilihan sekaligus. Biasanya atribut size dikombinasikan dengan atribut multiple. Berikut penulisan atribut size untuk tag select

<select size=”2”>

<option>MamiGoNet 1 </option>

<option>MamiGoNet 2 </option>

</select>

Hasil :

Atribut Multiple Untuk Memilih Lebih Dari 1 Pilihan Tag Select

Pada atribut multiple biasanya digunakan untuk memungkinkan user untuk dapat memilih lebih dari 1 nilai. Sehingga untuk dapat memilih lebih dari 1 nilai, user harus menekan tombol ctrl pada keyboard.

Attribute multiple akan lebih mudah digunakan jika ditambah atribut size. Berikut penulisan atribut multiple yang dikombinasikan dengan atribut size.

<select size=”2” multiple=”multiple”>

<option>MamiGoNet 1 </option>

<option>MamiGoNet 2 </option>

</select>

Hasil :

Atribut Disable: Menonaktifkan Tag Select

Penggunakan atribut ini biasanya dikombinasikan dengan javascript agar dapat berfungsi dengan maksimal, misalnya sebuah select hanya dapat diisi ketika user telah mengisi form diatasnya. Atribut disabled hanya memiliki nilai, yaitu dirinya sendiri. Berikut penulisan atribut disabled untuk tag select HTML.

<select disabled=”disabled”>

<option>MamiGoNet 1 </option>

<option>MamiGoNet 2 </option>

</select>

Hasil :

Tag Optgroup Dan Atribut Label

Tag optgroup biasanya digunakan untuk membuat kelompok-kelompok pilihan. Jika list pilihan anda begitu panjang dengan menggunakan tag optgroup akan memudahkan user dalam menentukan pilihan apabila telah dikelompokkan terlebih dahulu.

Sedangkan atribut label diperlukan untuk menentukan judul dari optgroub. Berikut penulisanya tag optgroup.

<select>

<optgroup label=”kelompok 1”>

<option>MamiGoNet 1 </option>

<option>MamiGoNet 2 </option>

<option>MamiGoNet 3 </option>

<optgroup label=”kelompok 2”>

<option>MamiGoNet 4 </option>

<option>MamiGoNet 5 </option>

<option>MamiGoNet 6 </option>

</select>

Hasil :

Dalam penulisan tag optgoup membutuhkan kombinasi atribut yaitu atribut label yang berisi tulisan yang akan muncul untuk grub pilihan tersebut. Dalam web browser, tag optgroup akan ditampilkan dalam huruf tebal, karena fungsi tag ini memang hanya sebagai keterangan saja.


Demikian tutorial singkat mengenai Cara Membuat Form HTML, semoga bermanfaat.

Share this post

Berlangganan update artikel terbaru via email: