Form menggunakan input hidden
Format tag form input hidden HTML-nya adalah sebagai berikut :
<INPUT TYPE=HIDDEN NAME=name VALUE=value>
Pada format form input hidden ditandai dengan atribut form type =hidden pada tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak tampilkan. Untuk selengkapnya dapat dilihat pada program berikut
Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan sebagai berikut :
<!doctype html> <html> <head> <title>hidden input file </title> </head> <body> <form > Nama : <input type=” name=”fnama”><br> <input type=”hidden” name=”negara” value=”Indonesia”>
Pemrograman Web
Page | 14
<input type=”submit” value=”Submit”> </form> </body> </html>
Bila tag type=”hidden” dihilangkan maka pada <input type=”hidden”> maka menghasilkan tampilan sebagai berikut :
<form > Nama : <input type=”text” name=”fnama”><br> <input type=”submit” value=”Submit”> </form>
Pembuatan form biodata dengan input text
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana :
<html> <head> <title> Form 1 </title> </head> <body> <form name=”form1” method=”POST” action=”inputdata.php”>
<input name=”negara” value=”Indonesia”>
Pemrograman Web
Nama : <input type="text" name="nama"><br><br> Kelas: <input type="text" name="kelas" maxlength="2"><br><br> No : <input type="text" name="nomor" value="10"><br><br> Hobby: <input type="text" name="hobby" size="8"><br><br> Password: <input type="password" name="password"> <br><br> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> </form> </body> </html>
Apabila dibuka di dalam browser, maka tampilan dari susunan kode HTML di atas adalah sebagai berikut :
6) Pembuatan form dengan elemen fieldset
Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet serta input form :
Pemrograman Web
<!DOCTYPE html> <html> <head> <title>Hooya</title> </head> <body> <fieldset > <legend>Proses Sign in</legend> <td width="256" align="center" valign="top"><p align="center"><font color="#000000" size="+3">YAHOO! <label for="textfield" ></label> </font><font color="#000000" size="+3"> <label for="textfield" ></label> </font><font size="+3"> <label for="textfield" ></label> </font> <label for="textfield" ></label> </p> <p align="center"> <input type="text" name="textfield" id="textfield" value="ID Yahoo" /> </p> <p align="center"> <label for="textfield2"></label> <input type="text" name="textfield2" id="textfield2" value="Password" /> </p> <p align="center"> <input type="submit" name="button" id="button" value="Sign in" /> </p>
Pemrograman Web
<p align="center" ><font color="#0000FF">Tidak bisa mengakses account </font></p> <p align="center" ><font color="#0000FF">Bantuan Sign in</font></p><p align="center">------------Atau ------------ </p> <p align="center"> <input type="submit" name="button2" id="button2" value="Buat Account Baru" /> </p> <p align="center">------------------------------</p> <p align="center"> Masuk dengan Facebok atau Google</p> <p> </p></td> </fieldset> </body> </html>
Bila listing code diatas dijalankan akan menghasilkan tampilan sebagai berikut :
Pemrograman Web
Tidak ada komentar:
Posting Komentar