Membuat Formulir Tag FORM

FORMULIR

Membuat Formulir Tag FORM

Format:

<FORM> . . . . . . </FORM>

Formulir dibentuk dengan menggunakan pasangan tag <form> dan </form>. Dua atribut yang umum digunakan pada tag <form> berupa action dan method.

No. Atribut Fungsi

1. action Menentukan URL yang akan dijalankan dan menerima semua masukkan dari formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan Web itu sendiri.

2. method Menentukan cara pengiriman informasi, yaitu dengan nilai GET dan POST. GET digunakan jika informasi yang dikirim menjadi satu dengan URL, sedangkan POST digunakan jika informasi dikirim secara terpisah dengan URL

Tag <input>

Tag <input> digunakan untuk melakukan pemasukan data dan letaknya berada dalam pasangan tag <form> dan </form>. Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol submit dan reset. Tag <input> memiliki sejumlah atribut. Atribut-atributnya dapat dilihat pada tabel dibawah:

1. type Menentukan tipe kotak masukan 2. name Menentukan nama data 3. size Menentukan ukuran kotak masukan 4. maxlength

Menentukan jumlah karakter yang dapat dimasukkan dalam kotak isian 5 value Menentukan nilai awal untuk kotak masukan 6 checked

Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal Dan Tipe yang ada dalam atribut type antara lain :

No. Tipe Fungsi

1. text Sebagai kotak isian untuk memasukkan data 2. submit Membuat tombol. Jika tombol diklik maka URL yang disebutkan pada atribut ACTION dalam tag

<FORM> akan dijalankan 3. reset Mengembalikan nilai field teks ke default 4. password Membuat teks yang diketikkan diganti dengan tanda

5. checkbox Membuat kotak cek 6. radio Membuat tombol radio dalam bentuk 2 pilihan atau lebih yang mana user hanya dapat memilih satu pilihan.

Tipe text bermanfaat untuk memasukkan data seperti data seperti nama orang atau alamat seseorang. Contoh pemakaian:

<html> <body> <pre> <form action=""> Nama depan : <input type="text" name="firstname"> Nama belakang: <input type="text" name="lastname" size="50" maxlength="10" > Nama lengkap : <input type="text" name="namalengkap" value="ini nama lengkapku"> </form> </pre> </body> </html>

Hasilnya:

Pada kode diatas, field teks yang dibentuk diberi nama firstname tidak diberikan nilai panjang input dan panjang karakter yang dimasukkan,tetapi untuk input teks yang kedua dengan panjang tampilan sebanyak 50 karakter dan jumlah karekter maksimal yang dapat diisi oleh pemakai sebesar 10 karakter. Sedangkan untuk input teks yang ketiga, kita mecoba memberikan nilai awal yang muncul di kotak input pada saat browser dijalankan yaitu dengan menambahkan atribut VALUE pada tag <INPUT> seperti berikut :

<input type="text" name="namalengkap" value="ini nama lengkapku">

sehingga pada inputan tersebut akan dimunculkan “ini nama lengkapku” sesuai dengan nilai yang ada pada value.

Tombol SUBMIT

Tipe Submit pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada Action pada tag <FORM> akan dimuat. Contoh penulisan kode dengan tombol Submit yang paling sederhana adalah seperti berikut:

<input type=”submit”>

Hasilnya: Pada keadaan seperti ini, tombol akan ditampilkan dengan tulisan Submit, sedangkan kalau tulisan pada tombol tidak berisi submit, kita bisa menambahkan atribut value pada tag input, contoh:

<input type=”submit” value=”kirim”>

Hasilnya:

Tombol RESET

Tombol reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan.

Contoh penulisan kode dengan tombol Submit yang paling sederhana adalah seperti berikut:

<input type=”reset”>

Hasilnya: Pada keadaan seperti ini, tombol akan ditampilkan dengan tulisan Reset, sedangkan kalau tulisan pada tombol tidak berisi reset, kita bisa menambahkan atribut value pada tag input, contoh:

<input type=”reset” value=”batal”>

Hasilnya:

Contoh penggunaan tombol submit dan tombol reset

<html> <body> <form action="konfirmasi.html" method="post"> <h3>Form ini akan mengarah ke konfirmasi</h3> Nama:<br> <input type="text" name="nama" size="20"> <br> email:<br> <input type="text" name="mail" size="20"> <br><br> <input type="submit" value="Kirim"> <input type="reset" value="Batal"> </form> </body> </html>

Dari kode tersebut maka tombo l akan bertuliskan „Kirim‟ dan „Batal‟ sesuai yang ada di value nya.

Kita bisa tuliskan nama dan email pada input teks tersebut misalnya seperti berikut : Ketika di klik tombol kirim, maka akan menuju ke konfirmasi.html yang ada pada atribut action pada form. Sehingga akan ditampilkan halaman seperti berikut:

Tetapi kalau kita klik batal maka teks akan kembali dikosongkan karena fungsi dari tombol reset adalah untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan.

Tipe Password

Tipe password yang disebutkan pada atribut TYPE pada tag <input> akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya dengan diganti tanda * untuk setiap karakter yang diketikkan pemakai). <html>

<body> <form action=""> Username: <input type="text" name="user" /><br /> Password: <input type="password" name="password" /> </form> </body> Hasilnya:

Tipe Checkbox

Tipe checkbox berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukkan yang memungkinkan pemakai mencentang atau tidak mencentang kotak tersebut dengan mengklik mouse pada saat penunjuk mouse menunjuk kotak cek.

<html>

<form action=""> Hobi : <br> <input type="checkbox" name="mancing"> mancing<br> <input type="checkbox" name="masak"> masak<br> <input type="checkbox" name="makan"> makan<br> </form> </body>

</html>

Hasilnya:

<html> <body> <form action=""> Hobi : <br> <input type="checkbox" name="mancing"> mancing<br>

<input type="checkbox" name="makan"> makan<br> </form> </body>

</html> Hasilnya:

Tombol Radio

Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol. Tombol radio diimplementasikan dengan menggunakan tag <INPUT> dengan atribut TYPE diberi nilai “RADIO”. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Seperti halnya kotak cek, salah satu tombol radio bisa dilengkapi dengan atribut

CHECKED yang menyatakan bahwa tombol itulah yang menjadi nilai bawaan. Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol tersebut diklik

<input type="radio" name="jk" value="P"> Perempuan<br> <input type="radio" name="jk" value="L"> Laki-laki<br> </form> </body>

</html>

Hasilnya:

<html> <body> <form action=""> Jenis Kelamin : <br> <input type="radio" name="jk" value="P" checked> Perempuan<br> <input type="radio" name="jk" value="L"> Laki-laki<br> </form>

</body> </html>

Hasilnya:

<html> <body> <form action=""> Jenis Kelamin : <br> <input type="radio" name="jekel" value="P"> Perempuan<br> <input type="radio" name="jk" value="L"> Laki-laki<br> </form> </body>

</html>

Tag </SELECT> … </SELECT>

Tag ini digunakan untuk menampilkan beberapa pilihan dengan menggunakan kotak kombo (drop-down). Untuk menampilkan daftar pilihannya dapat menggunakan tag <OPTION> dan menyertakan atribut VALUE untuk menyatakan nilai-nilai pilihan. Sedangkan untuk menyatakan nilai default (nilai bawaan pada saat halaman ditampilkan) dapat menggunakan atribut SELECTED.

Contoh:

<select name="platform" size="1"> <option value="NT">Windows NT <option value="95"> Windows 95 <option value="XP"> Windows XP <option value="i7"> Windows 7 <option value="linux"> Linux <option value="MacOS">MacOS Hasilnya: Yang ditampilkan pada kotak kombo adalah option yang paling atas dalam skrip di atas adalah Windows NT, ketika tombol drop down di tarik, maka akan muncul

Atribut selected

Untuk mengubah option yang akan ditampilkan saat pertama browser dijalankan bisa ditambahkan dengan atribut SELECTED pada tag <OPTION> misalnya seperti berikut : <option value="i7" selected> Windows 7

Atribut size

<select name="platform" size="3"> <option value="NT">Windows NT <option value="95"> Windows 95 <option value="XP"> Windows XP <option value="i7"> Windows 7 <option value="linux"> Linux <option value="MacOS">MacOS </select>

Hasilnya:

Atribut Multiple

<select name="platform" size="4" multiple> <option value="NT">Windows NT <option value="95"> Windows 95 <option value="XP"> Windows XP <option value="i7"> Windows 7 <option value="linux"> Linux <option value="MacOS">MacOS </select>

Hasilnya:

Tag <TEXTAREA> … </TEXTAREA>

Tag ini dibutuhkan untuk masukan teks yang panjang. Beberapa atribut yang terdapat dalam tag <TEXTAREA>

No. Atribut Fungsi

1. name Menentukan nama teksarea 2. cols Menentukan lebar teksarea 3. wrap Menentukan teks secara otomatis akan dilipat atau tidak pada area teks dengan memberikan nilai Hard, off, atau soft 4. rows Menentukan panjang tekxarea

Contoh:

<TEXTAREA NAME="foo" ROWS=4 COLS=40></TEXTAREA><br><br> ini contoh textarea dengan isi awal<br> <TEXTAREA NAME="foo" ROWS=4 COLS=40> ini adalah isi awalnya.

</TEXTAREA> Pada kode di atas jumlah baris yang disediakan adalah dalam tampilan mencakup 4 baris, sedangkan jumlah karakter per baris adalah sebesar 40 karakter. Hasilnya:

<TEXTAREA NAME="foo" ROWS=4 COLS=40 wrap="off"></TEXTAREA><br><br> ini contoh textarea dengan isi awal<br> <TEXTAREA NAME="foo" ROWS=4 COLS=40> ini adalah isi awalnya.

</TEXTAREA> Hasilnya: Latihan: Buatlah script dengan tampilan sebagai berikut:

Jawaban latihan: 1.

</head> <body> <table border="10"> <tr><td colspan="2" align="center"><B>FORM INPUT DATA</B></td></tr> <form action="proses_p_web3.php" method="post"> <tr><td>username </td>

<td><input name="username" type="text" value=""></td></tr> <tr><td>password </td>

</table> </pre> </body> </html>

Membuat Formulir Tag FORM