Form Input HTML, Scriptingsi.ilkom.unsri.ac.id/.../uploads/2018/11/3b-html-form.pdf•Form tidak...

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.