Form - HTML

Tag
dan tag digunakan bersama-sama untuk menerima inputan dari user lalu kemudian dikirimkan ke server. Form menyediakan properti masukan berupa textboxt, check box, radio button, dan button. Standar penulisan form adalah:

…..
…..

Attribut elemen form:
name = variabel (nama untuk form)

method = get / post (method get mengirimkan data pada akhir URL (Uniform Resource Locator) yang ditunjuk, sedangkan method post mengirimkan data secara terpisah, yaitu dari data yang di inputkan melalui properti masukan berupa textboxt, check box, radio button, dll yang kemudian dibawa ke server)

action = lokasi dari nama file (attribut action berisi URL dari nama file yang dipanggil oleh form tersebut)

enctype = multipart/form-data, application/x-www-form-urlencoded (menentukan tipe pengkodeaan MIME dari data yang di-submit ke server untuk pemrosesan)

target = _blank, _parent, _self, _top (menentukan jendela yang akan menampilkan data yang dikembalikan oleh program invoked)


Properti Masukan pada Elemen Form:

1. Text Field:
Digunakan untuk memasukkan data berupa teks.
name = nama untuk textbox
size = ukuran dari textbox dalam karakter, defult 20
maxlenght = maksimal banyaknya karakter yang dapat diterima
value = nilai dari variabel utnuk textbox

2. Password Field:
Digunakan untuk memasukkan password.
name = nama untuk textbox
size = ukuran dari textbox dalam karakter, defult 20
maxlenght = maksimal banyaknya karakter yang dapat diterima
value = nilai dari variabel untuk textbox

3. Textarea:
Digunakan untuk memasukkan data berupa teks-teks yang panjang.
name = nama untuk textarea
cols = angka (panjang textarea)
rows = angka (lebar textarea)
wrap = pilihan pengaturan untuk pemasukan data oleh user yang akan ditampilkan pada saat user memasukkan informasi. Adapun pilihannya adalah:
Off or Default: untuk mencegah teks dari penggulungan ke baris sehingga pada saat user memasukkan kata melebihi batas kanan teks area, maka teks akan menggulung teks sebelah kiri.
Virtual: untuk mengatur penggulungan kata di dalam area teks sehinggga pada user memasukkan informasi melebihi batas kanan teks area, teks akan menggulung teks ke baris berikutnya.
Physical: untuk mengatur penggulungan kata di dalam teks seperti halnya pada saat kata di-submit untuk pemprosesan.

4. Hidden:
Digunakan untuk mengirimkan data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser.

name = nama untuk hidden
value = nilai dari variabel untuk hidden

5. Check Box:
Digunakan untuk dapat memilih lebih dari satu pilihan.
name = nama untuk checkbox
value = nilai dari variabel untuk checkbox
checked (checkbox yang sudah ditandai)

6. Radio Button:
Digunakan agar dapat memilih hanya satu pilihan.
name = nama untuk radio button
value = nilai dari variabel untuk radio button
checked (radio button yang sudah ditandai)

7. Submit Button:
Tombol untuk mengirimkan nama (data) dan nilainya ke suatu aplikasi yang ditentukan dalam attribut ACTION dalam elemen FORM.

name = nama untuk submit
value = label teks untuk tombol

8. Reset:
Tombol untuk mereset semua masukan dalam form.
name = nama untuk reset
value = label teks untuk tombol

9. File:
Digunakan untuk mengupload file sehingga dapat memilih file di dalam komputer untuk di upload ke servernya.

name = nama untuk file
size = angka (panjang file)
maxlenght = maksimal banyaknya karakter yang dapat diterima

10. Select:
Daftar isi dalam properti select menggunakan tag
name = nama untuk select
size = angka (jumlah pilihan yang dapat terlihat)


Contoh : form.htm
  1. <html>
  2. <head>
  3. <title>Fomulir Identitastitle>
  4. head>
  5. <body>
  6. <form name="form1" method="post" action="">
  7. <p>Nama
  8. <input type="text" name="nama">
  9. p>
  10. <p>Alamat
  11. <input type="text" name="alamat">
  12. p>
  13. <p>Jenis kelamin
  14. <input type="radio" name="Laki-laki">Laki-laki
  15. <input type="radio" name="Wanita">Wanita
  16. p>
  17. <p>Pekerjaan
  18. <select name="select">
  19. <option value="Pelajar">Pelajaroption>
  20. <option value="Wiraswasta">Wiraswastaoption>
  21. <option value="PNS">PNSoption>
  22. <option value="Swasta">Swastaoption>
  23. select>
  24. p>
  25. <p>Hobby
  26. <input type="checkbox" name="hobby" value="membaca">membaca
  27. <input type="checkbox" name="hobby" value="berenang">berenang
  28. <input type="checkbox" name="hobby" value="menulis">menulis
  29. <input type="checkbox" name="hobby" value="nonton tv">nonton tv
  30. p>
  31. <p>
  32. <input type="submit" name="Submit" value="KIRIM">
  33. <input type="reset" name="Submit2" value="ULANGI">
  34. p>
  35. form>
  36. body>
  37. html>
HTML Forms

Tentang Kami

Langgan artikel Via Email

Langgan artikel Via Email

© 2011 - Tutorial blog dan belajar SEO blogger