Scribd
Unggah
641 tayangan

Membuat Form HTML

1. Form digunakan untuk membuat halaman web menjadi interaktif dengan menerima umpan balik dari pengunjung melalui elemen seperti input, checkbox, dan select. 2. Elemen form mencakup input teks, password, radio button, checkbox, select, dan textarea. 3. Atribut seperti name, type, value, size digunakan untuk mengkonfigurasi elemen form.

Diunggah oleh

soul_schooling5982
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
641 tayangan

Membuat Form HTML

1. Form digunakan untuk membuat halaman web menjadi interaktif dengan menerima umpan balik dari pengunjung melalui elemen seperti input, checkbox, dan select. 2. Elemen form mencakup input teks, password, radio button, checkbox, select, dan textarea. 3. Atribut seperti name, type, value, size digunakan untuk mengkonfigurasi elemen form.

Diunggah oleh

soul_schooling5982
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

HTML 5 (Membuat Form)

filed in Aplikasi IT, Kuliah, Windows on Jan.07, 2009 10.1 Form Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif , karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagianya.

Gambar 10.1 Contoh Form Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya. Perintah untuk membuat form yaitu :

<FORM [METHOD=POST/GET ACTION=URL> <INPUT> <INPUT> </FORM> Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action sering diisi dengan URL tempat pemrosesan form selankjutnya. 10.2 Elemen-elemen pada Form Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form :

Elemen INPUT Top of Form Bottom of Form NAME VALUE SIZE MAXLENGTH INPUT Top of Form Bottom of Form NAME VALUE CHEKED INPUT Top of Form Bottom of Form NAME VALUE CHEKED SELECT Top of Form Bottom of Form OPTION VALUE SELECTED SIZE TEXTAREA Top of Form Bottom of Form NAME

Atribut

fungsi Bentuk masukan. Diisi dengan TEXT atau PASSWORD

TYPE

Nama komponen input Isi/nilai dari komponen input Panjang komponen input Batasan panjang penulisan isi input

TYPE

Bentuk masukan RADIO

Nama komponen input radio Pemberian nilai pada radio Memilih salah satu radio

TYPE

Bentuk masukan CHECKBOX

Nama komponen input checkbox Pemberian nilai pada checkbox Memilih checkbox Nama komponen select /pull down list

NAME

Pilihan dalam list Isi pada list Option yang dipilih Ukuran list Bentuk komponen TEXTAREA TYPE

Nama komponen textarea

ROWS COLS INPUT VALUE Contoh pembuatan form <HTML> <HEAD>

Jumlah baris pada textarea Jumlah kolom pada textarea TYPE Judul pada tombol Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET

<TITLE>Contoh Membuat Form</TITLE></HEAD> <BODY> <H1 ALIGN=CENTER>FORM PENDAFTARAN ONLINE</H1> <HR size=3 color=black> <FORM METHOD=POST ACTION=contohform.htm> <TABLE> <TR> <TD><B>Nama :</B></TD> <TD><INPUT TYPE=Text NAME=varNama SIZE=15></TD> </TR> <TR> <TD><B>Alamat :</B></TD> <TD><INPUT TYPE=Text NAME=varAlamat SIZE=30></TD> </TR> <TR> <TD><B>Agama :</B></TD>

<TD><SELECT NAME=agama SIZE=1> <OPTION>Islam</OPTION> <OPTION>Kristen</OPTION> <OPTION>Budha</OPTION> <OPTION>Hindu</OPTION> </SELECT> </TD> </TR> <TR> <TD><B>Password :</B></TD> <TD><INPUT TYPE=Password NAME=varPassword SIZE=10></TD> </TR> </TABLE> <B>Jenis kelamin: </B><INPUT CHECKED TYPE=Radio NAME=Kelamin VALUE=Pria>Pria <INPUT TYPE=Radio NAME=Kelamin VALUE=Wanita>Wanita <BR> <B>Hobi:</B><BR> <INPUT TYPE=Checkbox NAME=Kelamin VALUE=Soccer>Sepakbola <INPUT CHECKED TYPE=Checkbox NAME=Hobi VALUE=Badminton>Bulutangkis <INPUT TYPE=Checkbox NAME=Hobi VALUE=Computer>Komputer <BR> <INPUT TYPE=Checkbox NAME=Hobi VALUE=Game>Permainan video <INPUT CHECKED TYPE=Checkbox NAME=Hobi VALUE=Internet>Internet <BR> <B>Komentar</B><BR>

<TEXTAREA Cols=30 Rows=5 Name=komentar></TEXTAREA><BR> <INPUT TYPE=Submit VALUE=Send info> <INPUT TYPE=Reset VALUE=Clear form> </FORM> </BODY> </HTML> Hasil pembuatan form dapat dilihat sebagai berikut :

10.2 Form Pendaftaran

6 . <select> dan <option> - Perintah select ini digunakan untuk menampilkan suatu pilihan berbentuk menu pulldown. - Form ini banyak digunakan untuk meminta pengguna memilih salah satu pilihan yang banyak alternatif nya, akan tetapi karena terbatasnya ruangan halaman web maka menu pilihan pulldown ini digunakan. Selain itu tampilan menu puldown ini juga dapat memungkinkan pilihan yang majemuk yang menarik, sebagai contoh Anda lihat di pilar kiri website ini di bagian Pilih Halaman. perintah <select> ini harus diikuti oleh perintah <option>, seperti halnya perintah <ol> dan <li> Contoh penulisan nya : Bulan apa Anda dilahirkan...? <select name="pilihmana"> <option selected value="">Pilihan Anda...</option> <option value="pil1">Januari</option> <option value="pil2">Februari</option> <option value="pil3">Maret</option> <option value="pil4">April</option> <option value="pil5">Mei</option> <option disabled label value="pil6">Juni</option> <option value="pil7">Juli</option> <option value="pil8">Agustus</option> <option value="pil9">September</option> <option value="pil10">Oktober</option> <option value="pil11">November</option> <option value="pil12">Desember</option> </select> Jalankan dibrowser dan lihat hasinya Perhatikan.., setiap pilihan <option> diakhiri oleh penutupnya yaitu </option>, isi atau content yang akan diproses oleh form adalah yang terdapat dalam atribut value. Pada contoh diatas, nilai value untuk pilihan September adalah pil9, maka yang diproses oleh form bukan September tetapi pil9. Kata September bisa Anda rubah sesuka hati Anda, misal : Saya lahir bulan September. Ada beberapa atribut yang dapat Anda gunakan dalam perintah <select> maupun <option> antara lain : I. Untuk perintah <select>

name - Atribut ini digunakan untuk memberikan nama pada form select. multiple - Atribut ini digunakan untuk menampilkan keseluruhan pilihan yang ada di perintah <option> dalam satu kotak, jadi bila Anda memakai atribut ini, maka pilihan option akan ditampikan semuanya nya, user tidak perlu menekan tab untuk melihat pilihan yang lain nya.

size - Atribut ini digunakan untuk menampilkan beberapa pilihan yang terlihat. Nilainya diisi dengan angka, misalkan Anda mengisinya dengan angka 2 / <select size="2">, maka pilihan yang terlihat akan tampak 2 baris. disabled - Atribut ini digunakan untuk me-non aktifkan pilihan tetapi tetap akan ditampilkan, untuk lebih jelas lihat keterangan mengenai atribut yang sama pada perintah <option>, bedanya adalah bila atribut ini diletakkan pada perintah <select>, maka keseluruhan pilihan akan non-aktif. tabindex - Atribut ini digunakan untuk menampilkan posisi index dari pilihan yang ditentukan, nilainya diisi dengan Angka. onfocus - Atribut ini digunakan untuk mengeksekusi pilihan yang disorot oleh kursor, misalkan Anda mempunyai sebuah program yang akan dijalankan bila pilihan dari option disorot oleh kursor maka program itu secara otomatis dikerjakan. Program ini biasanya berupa program JAVASCRIPT. II. Untuk perintah <option>

value - Atribut ini digunakan sebagai content yang akan diproses oleh form. - jadi setelah di submit maka nilai value ini yang akan diproses. selected - Atribut ini digunakan sebagai pilihan initial. - bila pilihan option diberi atribut ini maka pilihan ini tidak dijadikan suatu pilihan yang akan diproses oleh form karena merupakan initial. Sebagai contoh Anda lihat pada contoh penulisan diatas, kata-kata " Pilihan Anda.. " diberi atribut ini, sehingga bila user memilih pilihan ini maka dianggap user belum memilih artinya pilihan ini bukan suatu pilihan yang diharuskan untuk dipilih. disabled - Atribut ini digunakan untuk me-non aktifkan suatu pilihan. - bila user menggunakan browser FIREFOX/MOZILLA dan Anda menggunakan atribut ini maka pilihan tersebut tidak akan bisa disorot oleh kursor sehingga tidak bisa dipilih akan tetapi pilihan ini tetap eksis dalam form. Sebagai contoh, coba Anda pilih bulan Juni pada contoh diatas, bulan juni tidak akan bisa Anda pilih. Atribut ini tidak berfungsi di browser Internet Explorer. label - Atribut ini digunakan untuk memberi label pada suatu pilihan. - bila user tidak memilih salah satu pilihan yang disarankan, maka form akan memilih pilihan yang diberi atribut ini sebagai pilihan nya.

7. <textarea> - Perintah textarea ini digunakan untuk meminta user untuk memasukan suatu input berupa text yang panjang. - Perintah ini banyak digunakan untuk memasukan input berupa teks yang panjang, misalnya Anda ingin meminta saran atau pendapat dari pengguna situs Anda, yang mungkin pendapat atau saran itu bisa jadi akan memerlukan kalimat yang panjang. Maka perintah ini dapat Anda gunakan untuk keperluan tersebut. Perintah ini harus ditutup dengan perintah </textarea>.

Perintah ini mempunyai beberapa atribut antara lain :


name - Atribut ini digunakan untuk penamaan text area yang akan diproses oleh form. rows - Atribut ini digunakan untuk menentukan banyaknya baris yang akan ditampilkan di browser, nilainya diisi dengan angka. contoh : bila Anda ingin membuat text area sebanyak 3 baris maka perintah nya adalah : <textarea rows="3">. cols - Atribut ini digunakan untuk menentukan banyaknya kolom yang akan ditampilkan di browser, nilainya diisi dengan angka (perbandingan nya dilihat dari banyaknya karakter). contoh : bila Anda ingin membuat text area sebanyak 20 kolom / karakter maka perintahnya adalah : <textarea cols="20">. Masih ada beberapa atribut untuk text area ini, akan tetapi itu sudah cukup untuk bekal Anda dalam mempelajari dasar design web ini, Anda dapat mencari referensi dari media lain mengenai atribut text area yang lainnya karena disini saya tidak akan menerangkan nya satu persatu dikarenakan terbatasnya halaman dan bandwith space yang kami miliki. Contoh penulisan nya : <textarea name="pesansaya" rows="5" cols="20"> </textarea> jalankan di browser dan cobalah anda masukan kata-kata apa saja pada text area diatas, bila kata-kata tersebut melebihi ukuran text area yang disediakan maka secara otomatis tab scroll akan muncul.

8. <input name="nn" type="submit" value="xx"> - Perintah submit ini digunakan untuk mengakhiri atau menuntaskan sebuah deretan form. - Setelah semua daftar form dibuat, maka harus ada sebuah tombol yang akan meng-eksekusi suatu rancangan form. Perintah submit ini mempunyai beberapa atribut antara lain :

name - Atribut ini digunakan untuk menamakan form submit. value - Atribut ini digunakan untuk menampilkan teks yang terdapat dalam content nya. Misalkan Anda memberi isi atau content value ini dengan " Kirim ", maka tombol submit ini akan bertuliskan kata tersebut. onclick - Atribut ini digunakan untuk menjalankan sebuah program yang akan dieksekusi sebelum form itu benar-benar di submit. - Misalkan Anda mempunyai suatu program yang akan mengingatkan user untuk mengecek kembali isian form agar tidak terdapat kesalahan sebelum form itu benar-benar dikirim yang berisi sebuah peringatan berikut : " Apakah Anda yakin untuk mengirim form isian ini..?, tekan OK untuk melanjutkan tekan CANCEL untuk membatalkan. ". Dengan adanya program ini, maka sebuah form yang dikirim akan dapat di cek ulang oleh user, bila user yakin tidak terdapat kesalahan dalam mengisi form maka user dapat menekan tombol OK seperti yang diberitahukan, bila user

tidak yakin atau ingin memeriksa ulang isian form nya maka user dapat menekan tombol CANCEL untuk memperbaiki nya. Contoh penulisan nya : <center> Silahkan tekan tombol ini untuk mengirim form yang telah Anda isi.. <form name="testsubmit" action="#"> <input name="submita" type="submit" value="Kirim" onclick="confirm('Apakah Anda yakin Untuk mengirim Form ini..?')"> </form> </center> Jalankan di Browser maka akan tampil tombol kirim 9. <input name="nn" type="reset" value="xx"> - Perintah reset ini digunakan untuk membersihkan isian form menjadi sepert ke-adaan semula sebelum diisi. - Dengan perintah reset ini maka user dapat mengulang pengisian form yang mungkin terdapat kesalahan dan perlu diperbaiki. Contoh dari perintah reset ini dapat Anda lihat di perintah " type teks " diatas yang berupa tombol " Hapus Isian ". Kata-kata yang akan ditampilkan dapat Anda isi di atribut value. Contoh penulisan nya : <input name="reset" type="reset" value="Hapus isian"> 10. <fieldset> dan <legend> - Perintah fieldset ini digunakan untuk memberikan tampilan kotak yang mengelilingi sebuah kelompok Form, sedangkan perintah legend adalah untuk menampilkan teks penjelas sebuah kelompok Form yang dikurung oleh perintah fieldset. Perintah legend harus dituliskan diantara perintah fieldset dan ditutup dengan perintah </legend> , sebelum perintah penutup dari fieldset yaitu </fieldset> dituliskan. Contoh penulisan nya : <fieldset> <legend>Ini contoh legend</legend> Kata-kata dalam kurung fieldset ini sebagai contoh saja, anggap saja ini merupakan kelompok dari suatu form. </fieldset> jalankan di browser ya..? Catatan : Perintah fieldset hanya berfungsi bila kelompok form yang akan dikelilingi oleh kotak fieldset ini terdapat dalam satu space atau ruangan yang tidak terhalangi oleh perintah <TR> dalam pembuatan tabel.

Demikian sepuluh perintah pembuatan FORM diatas, semoga dapat menjadi bekal yang cukup untuk men-design sebuah tampilan website yang sederhana tapi profesional.

Anda mungkin juga menyukai