Cara Membuat Pull Down, Scrolling List, dan Textarea Pada HTML

Cara Membuat Pull Down, Scrolling List, dan Textarea Pada HTML - Pada chapter Sebelumnya kita sudah membahas tentang :

Chapter 1: Cara Membuat Tulisan Bold, Italic, Larger, smaller, dan Struktur Dokumen Pada HTML.
Chapter 2: Cara Membuat Headings (h1,h2,h3) dan Horizontal Ruled Lines Pada HTML.
Chapter 3: Cara Membuat paragraph, Align Attribute, Line Break, dan Preformatted Text Pada HTML.
Chapter 4: Cara Membuat Center Tag dan Body Attributes Pada HTML
Chapter 5: Penulisan Font dan Text color di HTML
Chapter 6: Cara Membuat Tag Links dan Images Pada HTML
Chapter 7: Cara Membuat List Tulisan Pada HTML
Chapter 8: Penulisan kode HTML (Clean code), Escape Code, dan Comment Tag Pada HTML
Chapter 9: Cara Membuat Link Navigasi Dalam 1 Halaman (Navigation Within A Document)
Chapter 10: Cara Membuat Tag Tables di HTML
Chapter 11: Cara Membuat Tag Frames (Bingkai) Pada HTML
Chapter 12: Cara Membuat Meta Tags di HTML yang SEO Friendly
Chapter 13: Cara Membuat Forms, Radio Button, dan Checkbox Pada HTML

Selanjutnya, pada artikel ini kita akan belajar tentang Cara Membuat Pull Down, Scrolling List, dan Textarea Pada HTML.

Cara Membuat Pull Down, Scrolling List, dan Textarea Pada HTML

Pull Down dan Scrolling Lists

Jenis input selanjutnya selain membuat input form adalah membuat Pull Down List. Dengan jenis ini Anda bisa menggunakan tag <SELECT> dan tag tersebut memiliki tag penutup yaitu </SELECT>

<SELECT> </SELECT>

hanya dengan membuat kode diatas, maka hasilnya akan seperti dibawah ini :

Jangan lupa untuk memberi sebuah 'name'.

<SELECT NAME="POSITION"> </SELECT>

Selanjutnya tambah beberapa option.

<SELECT NAME="POSITION"> <OPTION>Berani <OPTION>Jujur <OPTION>Tidak Keduanya </SELECT>

Maka hasilnya :

dan berikan sebuah value pada <OPTION> .

<SELECT NAME="POSITION"> <OPTION VALUE="PB">Berani <OPTION VALUE="DBA">Jujur <OPTION VALUE="NOTA">Tidak Keduanya </SELECT>

Pilihan defaultnya adalah salah satu option yang ditulis paling pertama.

Kita bisa lebih menspesifikasikan default option seperti yang kita inginkan dengan menggunakan perintah SELECTED.

<SELECT NAME="POSITION"> <OPTION VALUE="PB">Berani <OPTION VALUE="DBA" SELECTED>Jujur <OPTION VALUE="NOTA">Tidak Keduanya </SELECT>

Pembuatan Scrolling List sangat mirip dengan pembuatan Pull Down List. pertama kita hanya menambahkan beberapa option. kemudian, yang kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE ke tag <SELECT>.

<SELECT NAME="POSITION" SIZE=4> <OPTION VALUE="PB">Berani <OPTION VALUE="DBA">Jujur <OPTION VALUE="VB">Adil <OPTION VALUE="ADMIN">Pantang Menyerah <OPTION VALUE="Disiplin">Disiplin <OPTION VALUE="NOTA">Tidak salah satu dari atas </SELECT>

atribut SIZE berfungsi untuk menampilkan option yang sesuai dengan valuenya. Misalkan Size=4 maka option yang akan tampil berjumlah empat.

Kita juga bisa memilih default <OPTION>, dengan menggunakan perintah SELECTED.

<SELECT NAME="POSITION" SIZE=4> <OPTION VALUE="PB">Berani <OPTION VALUE="DBA" SELECTED>Jujur <OPTION VALUE="VB">Adil <OPTION VALUE="ADMIN">Pantang Menyerah <OPTION VALUE="Disiplin">Disiplin <OPTION VALUE="NOTA">Tidak Keduanya </SELECT>

Membuat Textarea

Tipe input jenis <TEXTAREA> sangat berguna.

<TEXTAREA NAME="COMMENTS"> </TEXTAREA>