Tuesday, 3 May 2016

Belajar HTML Mudah Pemula Chapter 8

Membuat Optional

Ada kalanya kita ingin memberikan beberapa opsi bagi pengunjung saat mereka mengisikan formulir. Di HTML, ada beberapa macam cara untuk menampilkan optional. Dan kita akan membahasnya disini.
Oh iya, sebelum diteruskan, artikel ini masih satu rangkaian dengan artikel tentang cara membuat form HTML ya. Jadi, kode-kode ini harus diletakkan di dalam blok form yang sudah kita bahas di artikel sebelumnya. Dan inilah beberapa cara untuk menampilkan opsi kepada pengunjung:

RADIO BUTTON

Radio button adalah opsi berbentuk bulatan dimana pengunjung harus memilih salah satu dari beberapa opsi yang ada. Misalnya untuk toko garmen, opsi ini bisa dipakai untuk memilih ukuran pakaian yang diinginkan. Contohnya seperti ini:
<p>Ukuran:<br/>
<input type="radio" name="ukuran" value="S"/> S<br/>
<input type="radio" name="ukuran" value="M"/> M<br/>
<input type="radio" name="ukuran" value="L"/> L</p>
Kode diatas, akan menghasilkan seperti ini:
Ukuran:
 S
 M
 L
Mudah sekali bukan? Nah, kita coba lagi optional yang lain yaitu

CHECKBOX

Prinsipnya hampir sama dengan radio button, hanya saja di opsi ini, pengunjung bisa memilih lebih dari 1 pilihan. Biasanya dipakai di form subscribe yang memiliki lebih dari 1 berita. Yuk, kita langsung lihat contohnya:
<p>Info yang diinginkan (bisa lebih dari satu):<br/>
<input type="checkbox" name="info" value="bisnis"/> Bisnis<br/>
<input type="checkbox" name="info" value="marketing"/> Marketing<br/>
<input type="checkbox" name="info" value="blogging"/> Blogging</p>
Kode diatas, akan menghasilkan optional seperti ini:
Info yang diinginkan (bisa lebih dari satu):
 Bisnis
 Marketing
 Blogging
Sangat mudah bukan? Masih ada 2 cara lagi untuk menentukan pilihan. Yang dua ini kita pakai jika pilihannya cukup banyak. Mungkin pilihan nama propinsi atau pilihan yang lainnya. Yang jelas, jika pilihan itu kita tampilkan semua sebagaimana contoh diatas, tentunya akan sangat memakan tempat. Insya Allah kita bahas di artikel mendatang ðŸ™‚

0 comments:

Post a Comment