Senin, 16 Maret 2015

Form

assalamualaikum wr.wb
pada kesempatan kali ini saya akan membahas tentang Form HTML.
Form di html berfungsi untuk melewatkan data dari klien ke server. form di html dapat berupa elemen input seperti submit, reset, text, radio, checkbox, password.
untuk latihan mari kita liat scriptnya
pertama siapkan notepad++ untuk membuat code (silahkan download di google banyak)
kedua siapkan browser misalnya Mozilla atau Google Chrome
1. silahkan buka Notepad++ nya
2. silahkan liat scriptnya. saya akan menyediakan beberapa script sekaligus untuk referensi agar mudah dipahami.
 - Yang pertama ini script yang sangat simple hanya menggunakan memasukan text

<!DOCTYPE>
<form><pre>
Nama : <input type="text" name="fname"><br>
Negara : <input name="negara" value=""><br>
</pre>
<input type="submit" value="Kirim">
<input type="reset" value="Batal">
</form>

berikut hasilnya :


- Ini script yang kedua udah mulai banyak script

<!DOCTYPE>
<form>
ISIKAN BIODATA DIBAWAH INI<pre>
Nama : <input type=text name=fname>

Kelas : <select name=kelas>
<option value="pilih" SELECTED>--PILIH--
<option value="X TKJ 1"> X TKJ 1
<option value="X TKJ 2"> X TKJ 2
<option value="X TKJ 3"> X TKJ 3
<option value="X TKJ 4"> X TKJ 4
</select> <hr  width=350 align=left>
Username : <input type=text name=fname maxlength=10>

Password : <input type=password name=password maxlength=6>

Re-Type Password : <input type=password name="repassword">
</pre>
<input type="submit" value="Kirim">
<input type="reset" value="Ulangi">

berikut hasilnya:


- Ini script yang ke tiga udah banyak kombinasi

<!DOCTYPE>
Isikan Biodata Sederhana
<form><pre>
Nama : <input type="text" name="fname" size=30 maxlensth=25>

Kelas : <input type="text" name="fkelas" size=10 maxlensth=7>

Jenis Kelamin :<input type=radio name=R1 value=laki-laki>Laki-Laki <Input type=radio name=R1 value=Perempuan>Perempuan

Agama : <select name=agama>
<option value="Pilih" SELECTED>--Pilih--
<Option value="Islam"> Islam
<option value="Kristen"> Kristen
<option value="Katolik"> Katolik
</select>
Hobby : <input type=checkbox name=Hobby> Membaca <input type=checkbox name=Gamers> Bermain Games
<input type=checkbox name=Berenang> Berengang
</pre>
<input type="submit" value="Kirim">
<input type="reset" value="Batal">


berikut hasilnya:



3. jika sudah kita simpan code dengan cara CTRL+S atau FIle > Save. simpan dengan exstensi html (ex: latihan.html)
4. selesai kita tinggal buka file htmlnya

 sekian dari saya.

selamat mencoba






Tidak ada komentar:

Posting Komentar