Untuk menciptakan suatu interaksi hubungan antara user dengan website ataupun pemilik website, dibutuhkan sebuah media, dimana user dapat mengisikan data ke dalam media tersebut dan data-data yang sudah diisikan akan dapat dikirimkan ke email pemilik website ataupun disimpan ke dalam sebuah database.
Media yang dibicarakan ini disebut dengan form. Dengan form, kita dapat mengisi data-data kita dan nantinya data-data itu akan disubmit langsung ke si pemilik website.
Dapatkah anda sebutkan aplikasi form di internet?
Komponen sebuah form
Untuk menyisipkan form ke dalam sebuah halam web kita dapat menggunakan tag FORM, contoh:
<FORM>
</FORM>
Berikut kita akan mengenal komponen-komponen sebuah form:
1. Text Field
Digunakan untuk menampung sebuah isian / input dari user. Bentuknya adalah sebagai berikut:
Adapun tag HTMLnya adalah: <input name="textfield" type="text" value="input" size="10" maxlength="20">
2. Text Area
Hampir sama seperti text field, hanya saja text area digunakan untuk menampung teks yang lebih panjang dan banyak
Adapun tag HTMLnya adalah: <textarea name="textarea" cols="30" rows="5"></textarea>
3.Check Box
biasanya digunakan untuk menentukan pilihan. Pilihan yang ada di check box bisa dipilih lebih dari satu pilihan.
Satu
Dua
Adapun tag HTMLnya adalah: <input type="checkbox" name="checkbox" value="Satu">Satu
<input type="checkbox" name="checkbox2" value="Dua">Dua
4. Radio Button
sama dengan check box, komponen form ini digunakan untuk menentukan pilihan. Hanya bedanya untuk radio button, user hanya bisa memilih satu pilihan dari beberapa pilihan yang ada.
Satu
Dua
Adapun tag HTMLnya adalah: <input name="radiobutton" type="radio" value="radiobutton">Satu
<input name="radiobutton" type="radio" value="radiobutton">Dua
5. List/Menu
komponen form ini masih tentang pilihan, dan bentuknya adalah drop down box yang berisi pilihan dan hanya satu pilihan saja yang boleh dipilih. Jadi cara kerjanya sama seperti radio button.
6. File Field
terkadang user perlu menyeleksi file dari lokal harddisknya untuk disubmit atau diupload ke website yang sedang dibuka. Dalam hal ini digunakan komponen form file field.
Adapun tag HTMLnya adalah: <input type="file" name="file">
7. Image Field
Image field biasanya digunakan untuk mengubah tombol submit pada form sehingga menjadi tombol dengan gambar yang bisa kita definiskan sendiri.
Adapun tag HTMLnya adalah: <input type="image" name="imageField" src="../../images/more2.jpg">
8. Button
dan akhirnya setelah mengisikan
semua isian/input, diperlukan sebuah trigger untuk mengirimkan semua data-data tersebut ke si pemilik website,dalam hal ini kita gunakan sebuah button atau tombol sbb.
Adapun tag HTMLnya adalah: <input type="submit" name="Submit" value="Kirim">
Latihan:
Buatlah form pengisian data siswa sebagai berikut: