Pemrograman Web 1 Mohamad Syafri Tuloli
Materi Form
Tag Form <form action="http://www.eko.com/aksi.php" method="post"> </form>
Setiap input dalam form Memiliki atribut name yang FormSederhana.html <html><body> <form method=POST action=" http://www.eko.com/aksi.php"> Nama: <input type=text name=nama size=32 maxlength=80> <br> Jenis Kelamin : <input type=radio name=sex value=P > Pria <input type=radio name=sex value=M> Wanita IPK: <select name=ipk size=1> <option>0-2.0</option> <option>2.1-3.0</option> <option>3.1-4.0</option> </select> <input type=submit value=kirim><input type=reset value=hapus> </form> </body></html> Setiap input dalam form Memiliki atribut name yang Akan menjadi variabel yang Menyimpan nilai-nilai yang diinputkan
Input Reset Input reset adalah untuk mengembalikan nilai dari komponen-komponen pada form pada keadaan awalnya. <input type=reset value=hapus>
Input Submit Input submit adalah berfungsi mengirimkan data inputan sesuai dengan metode yang ditentukan pada atribut method [post/get] ke alamat yang ditentukan pada atribut action pada tag <form >. Contoh : <form method=POST action="http://www.eko.com/aksi.php"> …. Komponen-komponen lain…. <input type=submit value=kirim> </form>
FormSederhana.html <html><body> <form method=GET action=" http://www.eko.com/aksi.php"> Nama: <input type=text name=name size=32 maxlength=80> <br> Jenis Kelamin : <input type=radio name=sex value="P"> Pria <input type=radio name=sex value="M"> Wanita IPK: <select name=ipk size=1> <option>0-2.0</option> <option>2.1-3.0</option> <option>3.1-4.0</option> </select> <input type=submit value=kirim><input type=reset value=hapus> </form> </body></html>
Perbedaan POST dan GET Menggunakan method POST, nama variabel dan nilai-nilainya tersembunyi. Menggunakan method GET, nama variabel dan nilai-nilainya ditampilkan pada alamat. Dengan format: http://server/namafile.php?variabel1=nilai1&variabel2=nilai2&variabel3&nilai3
Atribut action <form action="mailto:eko@yahoo.com" method=POST enctype="text/plain"> </form>
Input text <input type=text name=komentar ><br> <input type=text name=pobox size=10 maxlength=10 ><br> <input type=text name=alamat size=30 maxlength=256 ><br> <input type= text name=rating size=3 maxlength=3 value=100 ><br>
Input password Kata Sandi : <input type=password name=sandi>
Input File File anda : <input type=file size=20 name=fav_file>
Input Checkbox Binatang peliharaan anda ? <br> <input type="checkbox" name="binatang" value=“dog" > anjing <input type="checkbox" checked="checked" name="binatang" value=“cat" /> kucing <input type="checkbox" name="binatang" value=“bird" > burung <input type="checkbox" name="binatang" value=“fish" > ikan
Input Radio Atribut name harus sama untuk kelompok pilihan . Hobby anda ? <br><br> <input type=radio name=hobi value=“membaca”> Baca<br> <input type=radio checked name=hobi value=“berenang”> Renang<br> <input type=radio name=hobi value=“internet”> Surfing Internet<br> <input type=radio name=hobi value=“sepakbola">Bola Kaki<br> Atribut name harus sama untuk kelompok pilihan .
Input button <input type=button value="Tekan tombol ini"><br> <input type=button value="Pilih"><br> <input type=button value="Contoh Tombol"><br>
Input hidden Kadang kita ingin mengirimkan suatu nilai yang tersembunyi dari user. Untuk keperluan ini input jenis hidden digunakan. Input ini tidak memiliki representasi yang bisa kelihatan oleh user (tidak tampak). <input type=hidden name=harga value=434>
Textarea Komentar <br> <textarea name=komen cols=40 rows=4> Masukkan komentar anda disini </textarea>
Input Select Merk handphone anda ? <br> <select name=“Handphone" size="3" > <option>Nokia</option> <option>Siemens</option> <option selected>Sony Erricsson</option> <option>Blackberry</option> </select> <br>
Input Select (2) Merk handphone anda ? <br> <select name=“Handphone” size=“3“ multiple=“multiple”> <option>Nokia</option> <option>Siemens</option> <option selected>Sony Erricsson</option> <option selected>Blackberry</option> </select> <br>
Input Select Group Merk notebook anda ? <br> <select name=notebook> <optgroup label=Asia> <option>Toshiba</option> <option>Samsung</option> </optgroup> <optgroup label=Amerika> <option>Compact</option> <option>Acer</option> </select>
Latihan Buatlah form seperti berikut. Spesifikasi : Apabila tombol “Daftar” diklik, maka akan mengirimkan data ke alamat www.ung.co.id/daftar.php Apabila tombol “Hapus” diklik, maka input akan kembali pada nilai awalnya.