Ken Ditha Tania Form HTML,
Ken Ditha Tania
Form HTML,
Outline
• Text box
• Radio box
• Check box
• List
• Button
Text box
Combo/radio box List
Check box
Button File Fields
Button reset Button submit
Text area
Fieldset
• Form tidak dapat berbentuk nested
• Syntax:
• Atribut ACTION menspesifikasikan URL yang akan digunakan pemroses field input form
• URL adalah lokasi dokumen yang akan melakukan proses terhadap input form
Form Input HTML
Form Input HTML(2)
• HTTP GET – HTTP GET protocol attaches data to the actual URL text to pass
the data to the target. e.g. http://www.example.com/forms.cgi?id=45678&data=tarrn
– It is easy to implement – Insecure (data is clearly visible in most user and can be easily
sniffed by hackers)
• HTTP POST – HTTP POST method passes data encoded in the HTTP data
stream – It is not typically visible to user – More secure method to pass data – Harder to implement
Form Input HTML(4) • Jenis-jenis masukan dalam form
– Text, digunakan untuk memasukkan suatu nilai untuk dikirimkan kepada server. Nilai yang dimasukkan dapat berupa angka maupun teks.
– Radio, menyediakan beberapa pilihan, hanya satu pilihan yang bisa
dipilih. – Check box, menyediakan beberapa pilihan, bisa lebih dari satu pilihan
yang dipilih. – List, menyediakan pilihan dalam bentuk list pilihan, pilihan yang dipilih
dapat lebih dari satu. – Submit, digunakan untuk memanggil url, setelah input selesai
dimasukkan
Form Input HTML(5)
– Reset, digunakan untuk menginisialisasi setiap elemen form
– Button, digunakan untuk membuat form lebih interaktif, untuk memanggil script yang ada di dalam dokumen html
– Text area, digunakan untuk memasukkan data dalam bentuk teks berupa memo.
– File, digunakan untuk memasukan data file
Input type = “text”
• Untuk Membuat Text box
• syntax:
• Keterangan :
size: besar text box
maxlength: jumlah karakter maksimum yang dapat ditampung
Contoh
Input type = “radio”
• Untuk Membuat Radio box
• syntax:
Contoh
Input type = “checkbox”
• Check Box
• syntax:
Contoh
Input type List
• List
• syntax:
<optgroup> tag is optional (used when we might want to group options of a list together for clarity)
Contoh
Input type Textarea
• Text Area
• syntax:
setiap elemen dapat diberikan nama (ditambahkan atribut Name dengan value berupa string yang mendefenisikan nama elemen
Contoh
Input Type Button
• Submit and Reset Button
• submit button
• Reset button:
• Ouptut program
Input Type Button
• File Fields
Fieldsets and Legend
• Fieldsets
– <fieldset> tag is used as a container for form elements in thin border.
Fieldsets and Legend
– <legend> tag allows the surrounding <fieldset> box to be captioned is used as a container for form elements in thin border.