Sabtu, 17 Juli 2010

Membuat form dengan HTML 2

oke sekarang kita akan melanjutkan artikel "membuat form dengan html 1".

5. radio button

merupakan bagian form yang berbentuk bulat dan hanya satu pilihan yang dapat dipilih.

-----------------mulai kode html----------------------

<input type="radio" name="pilihan" value="a" checked>
<input type="radio" name="pilihan" value="b">
<input type="radio" name="pilihan" value="c">

<input type="radio" name="pilihan2" value="a" checked>
<input type="radio" name="pilihan2" value="b">
<input type="radio" name="pilihan2" value="c">

-----------------akhir kode html----------------------

keterangan:

++ atribut 'type' harus diisi 'radio'.
++ untuk atribut 'name' dapat diisi apa saja. atribut 'name' digunakan untuk mengelompokkan satu atau lebih radio button. Dalam contoh di atas, terdapat dua kelompok radio button, yaitu 'pilihan' dan 'pilihan2'.
++ atribut 'value' diisi nilai yang akan diproses nanti.
++ atribut 'checked' untuk menentukan pilihan default (opsi yang langsung terpilih).

Lalu, bagaimana cara menulis teks yang akan ditampilkan di browser. Misal di pilihan pertama 'Audi' lalu di pilhan kedua 'BMW". Berikut kodenya.

-----------------mulai kode html----------------------

Pilihan Mobil<br>
Audi <input type="radio" name="pilihan" value="Audi" checked><br>
BMW <input type="radio" name="pilihan" value="BMW">

<br><br>

Pilihan Motor<br>
Honda <input type="radio" name="pilihan2" value="Honda" checked>
Yamaha <input type="radio" name="pilihan2" value="Yamaha">

-----------------akhir kode html----------------------

Jadi teks yang Audi, BMW, Honda, Yamaha itulah yang akan ditampilkan di browser. Sedangkan teks yang berada di dalam 'value' itulah nilai yang akan diproses.

6. checkbox

merupakan pilihan berbentuk kotak ditandai dengan karakter centang (V).

-----------------mulai kode html----------------------

<input type="checkbox" name="pilihan" value="a" checked>
<input type="checkbox" name="pilihan" value="b">

<input type="checkbox" name="pilihan2" value="a" checked>
<input type="checkbox" name="pilihan2" value="b">

-----------------akhir kode html----------------------

keterangan:

++ sama seperti radio button, hanya berbeda di atribut 'type' yang kita isi 'checkbox'.

7. tombol reset

tombol untuk mereset (mengembalikan ke nilai default) semua bagian form yang dibuat.

-----------------mulai kode html----------------------

<input type="reset" value="Batal">

-----------------akhir kode html----------------------

keterangan:

++ atribut 'type' harus diisi 'reset'.
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.

8. tombol submit

tombol untuk mengeksekusi form ke halaman yang ditentukan di bagian tag <form> pada nilai yang ditulis pada atribut 'action' (lihat artikel Membuat form dengan HTML 1).

-----------------mulai kode html----------------------

<input type="submit" value="Kirim">

-----------------akhir kode html----------------------

keterangan:

++ atribut 'type' harus diisi 'submit'
++ atribut 'value' dapat diisi teks yang ingin ditampilkan di browser.

Jika anda masih bingung silahkan lihat artikel Membuat form dengan HTML 3 untuk contoh lengkap form.

Tidak ada komentar:

Posting Komentar