PENGETAHUAN

MATERI:

Element FORM, Element INPUT, Element SELECT, Element OPTION, Element TEXTAREA





ELEMENT FORM

Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST).




Sintaks:

<form action="action" method="GET"|"POST">

...........................

</form>







ELEMENT INPUT

Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu name, size, type, value, checked.


Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM.



Sintaks:

<input

name="name"

size="number"

type="text"|"checkbox"|"radio"|"submit"|"reset"

value="value"

checked >






ELEMENT SELECT

Element SELECT berfungsi untuk mendefinisikan opsi pilihan pada form kontrol. Element ini mempunyai attribute yaitu name, size, multiple(diizinkan banyak pilihan). Element ini harus berada di dalam element FORM.



Sintaks:


<select

name="name"

size="number"

multiple >

.....................

</select>





ELEMENT OPTION

Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION.




Sintaks:

<option

selected

value="number" >

.....................

</option>







ELEMENT TEXTAREA


Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM



Sintaks:

<textarea

name="name"

cols="number"


rows="number" >

.....................

</textarea>

Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.






Latihan 1:

Buat form dengan input kontrol form seperti text, checkbox, radio, reset, submit, seperti tampilan di bawah ini:





                         






Nama file: latihan7_1.html

Jika diisi namanya adalah Rahmat ; student di check ; umur 21-25 ; maka jika form ini di submit data form yang terkirim adalah var1="Rahmat"&var2="1"&var3="r3"

Latihan 2:

Dari latihan 1 tambahkan menu select seperti gambar di bawah ini:









   

Nama file: latihan7_2.html

Latihan 3:


Dari latihan 2 tambahkan textarea seperti gambar di bawah ini:









   

Nama file: latihan7_2.html