Membuat form dengan HTML 1

Jika anda ingin membuat semacam daftar isian (form) di situs web anda, artikel ini akan membahas bagaimana cara membuatnya. Tapi artikel ini hanya akan membuat form nya saja. Untuk memproses data yang diinput dari form, tidak akan dibahas disini.

Oke langsung saja, tag yang digunakan untuk membuat form adalah <form></form>.

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

<form method="???" action="???">
<tag tertentu>
</form>

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

pada tag form terdapat atribut 'method' yang nilainya dapat diisi dengan 'post' atau 'get'. Jika anda mengisi dengan 'post' maka data yang diinput dari form tidak akan terlihat di address bar web browser. Tapi jika anda mengisi 'get' maka data akan terlihat di address bar web browser.

atribut 'action' diisi dengan lokasi file untuk memproses form. misal: action="proses_form.php"

Diantara tag form tersebut (pada bagian yang saya tulis <tag tertentu>) dapat diisi tag-tag lain untuk membuat textarea, textfield, checkbox, radio button, dropdown list dan tombol untuk submit dan reset data.

1. Textfield.

Berikut adalah kode HTML untuk membuat textfield.

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

<input type="text" name="judul" maxlength="20" size="20">

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

penjelasan:
++ pada tag <input> ditambahkan atribut 'type' dengan nilai nya 'text' untuk membuat bagian form berbentuk textfield. atribut ini harus ada untuk membuat textfield.
++ atribut selanjutnya 'name' dengan nilai 'judul' untuk memberikan identitas bahwa textfield tersebut memiliki nama 'judul'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <input>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'maxlength' dengan nilai '20' untuk memberikan batasan jumlah karakter yang boleh diinput pada textfield. Dalam contoh textfield hanya dapat diisi 20 karakter. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.
++ atribut 'size' dengan nilai '20' untuk menentukan panjang textfield sebesar angka yang ditentukan, dalam contoh 20. Hanya dapat diisi dengan angka. Boleh dihilangkan dari tag <input>.

2. Textarea.

Berikut adalah kode HTML untuk membuat Textarea.

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

<textarea name="keterangan" cols="50" rows="5"></textarea>

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

penjelasan:
++ atribut 'name' dengan nilai 'keterangan' untuk memberikan identitas bahwa textarea tersebut memiliki nama 'keterangan'. Nilai dari 'name' dapat diganti sesuai keinginan. Atribut ini dapat dihilangkan dari tag <textarea>, tapi sebaiknya ada untuk menghindari error saat memproses data.
++ atribut 'cols' dengan nilai '50'. Untuk menentukan jumlah kolom atau lebar dari textarea. Atribut ini dapat dihilangkan.
++ atribut 'rows' dengan nilai '5'. Untuk menentukan panjang textarea sebesar angka yang ditentukan. Hanya dapat diisi dengan angka. Atribut ini dapat dihilangkan.

3. Password

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

<input type="password" name="katasandi" maxlength="20" size="20">

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

penjelasan:
++ sama seperti textfield hanya saja atribut 'type' diisi dengan nilai 'password'. Karakter yang diinput akan tidak terlihat diganti dengan simbol lingkaran atau asterisk (*).

4. dropdown box.

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

<select name="pilihan" size="1" multiple><option value="a">apakah benar</option><option value="b" selected>benarkah itu?</option><option value="c">cepatlah kemari!</option><option value="d">dialah orangnya!</option></select>

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

penjelasan:
++ tag 'select' dapat diisi atribut 'name' dan 'size' dan 'multiple'.++ atribut 'name' untuk memberikan identitas tag 'select'.++ 'multiple' dituliskan supaya user dapat memilih lebih dari satu pilihan. Jika tidak ditulis maka hanya boleh memilih satu pilihan.++ 'size' diisi dengan angka positif. Jika diisi dengan '1' atau atribut 'size' tidak ditulis, maka pilihan akan ditampilkan satu buah. Jika diisi lebih dari '1' maka sebanyak angka tersebut pilihan akan ditampilkan.
++ tag 'option' ditulis diantara tag 'select'. Tag ini merupakan pilihan yang akan ditampilkan di browser.++ atribut 'value' merupakan nilai yang akan diproses, tidak terlihat di browser.++ Kalimat diantara tag <option> </option> adalah kalimat yang akan ditampilkan ke browser.++ atribut 'selected' dapat ditambahkan jika ingin membuat satu pilihan langsung sebagai default yang terpilih. Hanya dapat dipakai pada satu option saja.

Oke, sampai sini dulu. Pada artikel selanjutnya akan membahas radio button, checkbox dan tombol submit dan reset. Ciaoo!!!