RONA SALWA IHDINA PTI UM

Presentasi berjudul: "RONA SALWA IHDINA PTI UM"— Transcript presentasi:

1 RONA SALWA IHDINA PTI UM
Form HTML RONA SALWA IHDINA PTI UM

2 Mengenal tag HTML <form>..</form>
Untuk membuat form dalam halaman web, kita perlu meggunakan tag HTML <form> dan </form>. *gambar submit Ketika user mengisi data pada form yang tersedia, ada kalanya user salah dalam melakukan hal tersebut sehingga ingin mengembalikan data ke nilai semula (default). Untuk kebutuhan ini, HTML menyediakan tombol reset.

3 Atribut dalam tag form 2 atribut penting yang perlu diketahui kegunaannya, yaitu: Action Method

4 Action untuk menentukan file PHP yang akan digunakan untuk memproses data, yang dikirim melalui tag form. Contoh: <form action=”contoh.php”> … </form>

5 Method untuk menentukan bagaimana cara informasi (isi) dari suatu form (computer klien) dikirimkan ke computer server Terdapat 2 metode (cara) yang dapat dipilih, yaitu: Get Post

6 Get <form action=”contoh.php” method=”get”> … </form>

7 Get User mengirim data ke server –> memerintah web browser menambah nilai yang telah dimasukkan ke dalam URL Informasi yang akan ditambahkan ke URL memiliki format berupa pasangan nama dan nilai, yang ditulis dalam bentuk nama=nilai.

8 Tanda “?” Tanda “?” digunakan sebagai pembatas antara URL dengan parameter-parameter yang dilewatkan oleh form Jika data yang dikirimkan lebih dari satu, maka akan ditambahkan tanda “&”

9 Penyimpanan metode Get
Untuk mengambil nilai (isi) dari elemen control, maka digunakan kode: $nama= $_GET[“nama”]; mengambil nilai dari elemen control yang bernama nama, dikirimkan menggunakan metode get, nilai yang diperoleh kemudian akan disimpan ke dalam variabel $nama.

10 Post <form action=”contoh.php” method=”post”> … </form>

11 $nama=$_POST[“nama”];
data yang dimasukkan oleh user tidak akan ditambahkan/ditampilkan ke dalam URL. Penyimpanan : $nama=$_POST[“nama”];

12 Berbagai Emelen Kontrol pada Form
Elemen text Elemen textarea Elemen checkbox Elemen radio Elemen listbox dan combobox Elemen hidden Elemen password

13 <input type=“text” name=“nama” size=“20” maxlength=“25” />
Elemen text Text field (sering juga disebut text box) merupakan elemen control yang paling banyak dijumpai dalam suatu form, elemen text hanya dapat menampung satu baris teks. <input type=“text” name=“nama” size=“20” maxlength=“25” />

14 <textarea name=”komentar” cols=”40” rows=”5”>
Elemen textarea mampu menampung jumlah teks lebih dari satu baris <textarea name=”komentar” cols=”40” rows=”5”>

15 Elemen checkbox mengizinkan user untuk memilih lebih dari satu opsi
nama control sama dan tanda bracket([]) di belakangnya (array untuk menyimpan) <input type=”checkbox” name=”hobi[]” value=”Membaca”> <input type=”checkbox” name=”hobi[]” value=”Olahraga”>

16 Elemen checkbox penampilan isi array dari checkbox menggunakan statemen foreach Foreach ($hobi as $nilai) { Echo “- $nilai <br />”; }

17 <input type=”radio” name=”gender” value=”p” />
Elemen radio menentukan satu pilihan dari beberapa opsi yang disediakan <input type=”radio” name=”gender” value=”p” />

18 Elemen listbox & combobox
dibuat dengan menggunakan tag <select> dan </select>, sedangkan isi atau item dari list dibuat dengan menggunakan tag <option> dan </option>. <select name=”NamaKontrol” size=”1”> <option value=”Nilai1”>item ke -1</option> <option value=”Nilai2”>item ke-2</option> …. </select>

19 Elemen listbox & combobox
Jika kita ingin membuat elemen list box, maka kita perlu menentukan atribut size pada tag <select> dengan nilai lebih besar dari 1; sedangkan untuk elemen combo box, kita perlu mengisi size dengan nilai 1

20 <input name=”hide” type=”hidden”>
Elemen hidden <input name=”hide” type=”hidden”>

21 <input type=”password” type=”password”>
Elemen password pada saat user mengisikan data pada elemen password, teks yang diketikkan akan ditampilkan dengan tanda asterisk (*) maupun tanda bulatan kecil (tergantung dari web browser yang digunakan) <input type=”password” type=”password”>