</select></font></p> </form> </body>... Hasil:

Ukuran: px

Mulai penontonan dengan halaman:

Download "</select></font></p> </form> </body>... Hasil:"

Indra Gunawan
7 tahun lalu
Tontonan:

1 FORM Adalah Input/masukkan dari pengguna yang kemudian diproses untuk mendapatkan hasil yang diinginkan pengguna, proses penyimpanan, proses sunting atau edit, proses hapus dan browse.. <Form Name= Nama_Form Method= Post/Get action= URL >. </Form> Keterangan: 1. Name adalah nama form yang sedang digunakan. 2. Method adalah metode yang digunakan dalam penyimpanan ke dalam server. 3. Action adalah alamat yang digunakan untuk pemrosesan input form di dalam server. Form memiliki kontrol form yang digunakan untuk mengklasifikasikan input/masukkan dari pengguna. Kontrol Form terdiri dari : 1. Kontrol Text digunakan untuk memberikan input atau masukkan berupa kotak isian. Sintaksnya : <Input Type= Text [Properti]> Ket. Property/atribut: Name : Nama dari kontrol text Size : Ukuran dari kontrol text Value : Text yang tertulis pada kontrol text Maxlength : Panjang maximal karakter yang diijinkan Style : Pengaturan Style dalam kontrol text, nilainya bisa berupa font, Dir paragraf, numbering, border, position. : Pengaturan arah text dari kontrol text, seperti rlt(right to left)/kanan ke kiri dan kebalikannya yaitu ltr(left to right). Nama : <input type= text name= text1 size= 40 maxlength= 50 style= fontfamily:comic San Ms; Font-size=12; text-align=left > Hasil : 2. Kontrol Password adalah sebuah kontrol html yang penggunaanya mirip dengan kontrol text akan tampil dengan text biasa, sedangkan kontrol password akan ditampilkan dengan tanda asteris(*)atau. Hal :1/7

2 Sintaksnya : <Input Type= Password [Properti]> Name Size Value Maxlength Dir Contoh: PASSWORD :<input type= password name= pass size= 20 maxlength= 50 > Hasil : 3. Kontrol Radio digunakan untuk menampilkan salah satu pilihan dari satu kumpulan/grup pilihan. Sintaksnya : <Input Type= Radio [Properti]> Ket Properti: - Checked adalah Kontrol radio yang menjadi pilihan <font face= Comic San Ms > Jenis Kelamin Anda : <input type= Radio name= OptJenis Value= Pria checked>pria <input type= Radio name= OptJenis Value= Wanita >Wanita Hasil : 4. Kontrol CheckBox digunakan untuk memilih beberapa pilihan dari pilihan yang tersedia. Pengunaanya sama dengan dengan kontrol radio, perbedaanya terletak pada pilihan yang dimungkinkan lebih dari satu. <Input Type= CheckBox [Properti]> Ket. properti: Hal :2/7

3 - Checked Contoh: <font face= Comic San Ms > Hobby Anda Adalah : <input type= CheckBox name= C1 Value= Olah Raga >Olah Raga <input type= CheckBox name= C2 Value= Musik >Musik <input type= CheckBox name=c3 Value= Jalan-Jalan >Jalan-Jalan <input type= CheckBox name=c4 Value= Nonton >Nonton 5. Kontrol Select digunakan untuk membuat sebuah daftar pilihan. <select [properti]>...<option> item 1...<option> item2 </select> - Selected adlah item yang dipilih - Size adalah banyaknya item yang ditampilkan pada layar monitor(defaultnya 1). - Multiple adalah Tampilan dari drop down box, seperti tombol spinner. <font face= Comic San Ms > Agama Yang Ada Di Indonesia Adalah : <Select size= 1 name= CBOAgama > <option selected value= Islam >Islam</option> <option value= Kristen >Kristen</option> <option value= Katolik >Katolik</option> <option value= Hindu >Hindu</option> <option value= Budha >Budha</option> <option value= Keyakinan >Keyakinan</option> Hal :3/7

4 </select></font></p>. 6. Kontrol Text Area merupakan kontrol text yang dapat menliskan text lebih banyak karena memiliki ruang/kapasitas lebih besar dibandingkan dengan kontrol text. <TextArea [properti]> Isi text area </textarea> - Cols adalah jumlah kolom dari kontrol text area - Rows adalah jumlah baris dari kontrol text area - Maxlength - Dir <HTML> <HEAD> <TITLE>Contoh Penggunaan Formulir</TITLE> </HEAD> <BODY> <FORM> Komentar Anda:<BR> <TEXTAREA NAME = "komentar" ROWS = "5" COLS = "40" WRAP>123...ABC </TEXTAREA> <BR> </FORM> </BODY> </HTML> 7. Kontrol Button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur / event. Ada tiga tipe yang termasuk dalam kontrol button, yaitu Button, Submit, Reset. Button digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari VBScript. Submit digunakan utnuk mengirim data-data ke server (lebih banyak berhubungan dengan pemrogramman yang berbasis Server Side seperti ASP), Sedangkan Reset digunakan untuk meghapus data-data yang ada pada suatu form. Hal :4/7

5 <Input Type= Button [properti]> <Input Type= Submit [properti]> <Input Type= Reset [properti]> Contoh: <BODY> <FORM> Cobalah untuk mengklik tombol berikut<br> <INPUT TYPE = "BUTTON" VALUE = "Ke Sebelumnya" ONCLICK = "self.history.back();"> Button/Tombol Submit: <INPUT TYPE = "Submit" VALUE = "Ok"> Button/Tombol Reset: <INPUT TYPE = "Reset" VALUE = "Cancel"> <BR> </FORM> </BODY> 8. Kontrol Image digunakan untuk mengolah /mengelola gambar. <Input Type= Image [properti]> Ket properti: - Align : meratakan teks di sekeliling gambar - Alt : teks yang muncul jika tombol mouse berada diarea gambar - Border : Batas tepi dari kontrol image - Heigth : Ketinggian dari gambar - Hspace : Pengatran batas(margin) horisontal gambar - Ismap : Penentuan gambar sebagai imagemap - Lowsrc : Pengaturan gambar dengan resolusi rendah - Src - Usemap :Penentuan gambar sebagai imagemap - Vspace : Pengaturan batas(margin) vertikal gambar - Width : Lebar dari gambar Hal :5/7

6 Kode Programnya : <html> <head> <title>buku Tulis</title> </head> <body text="white"> <form method="post" action="simpan.asp"> <table text="white" cellpadding="10" cellspacing="1" width="100%" height="100"> <td width="100%" colspan="2" align="center" heigth="48" bgcolor="red"> <font face="microsoft San Serif" size="6" color="white">buku Tamu</font></td> <td width="23%" heigth="19" bgcolor="blue">password</td> <td width="77%" heigth="19" bgcolor="blue"> <input type="password" name="passwd" size="40"></td> <td width="23%" heigth="19" bgcolor="blue">nama lengkap</td> <td width="77%" heigth="19" bgcolor="blue"> Hal :6/7

7 <input type="text" dir=rtl name="textnama" size="40"></td> <td width="23%" height="19" bgcolor="blue">jenis Kelamin</td> <td width="77%" heigth="19" bgcolor="blue"> <input type="radio" value="pria" checked name="optjenis">pria <input type="radio" value="wanita" name="optjenis">wanita </td> <td width="23%" height="19" bgcolor="blue">agama</td> <td width="77%" height="19" bgcolor="blue"> <select size="1" name="cboagama"> <option selected value="islam">islam</option> <option value="katolik">katolik</option> <option value="kristen">kristen</option> <option value="hindu">hindu</option> <option value="budha">budha</option> <option value="keyakinan">keyakinan</option> </select></td> <td width="23%" height="19" bgcolor="blue">hobby</td> <td width="33%" height="19" bgcolor="blue"> <input type="checkbox" name="c1" value="on">sport <input type="checkbox" name="c2" value="on">nonton</td> <td width="23%" height="19" bgcolor="blue"></td> <td width="77%" height="19" bgcolor="blue"> <input type="checkbox" name="c3" value="on">musik <input type="checkbox" name="c4" value="on">panjat Tebing</td> <td width="23%" height="16" bgcolor="blue">komentar</td> <td width="77%" height="16" bgcolor="blue"> <textarea wrap rows="6" name="s1" cols="60"></textarea></td> <td width="100" heigth="51" bgcolor="blue" colspan="2"> <p align="center"> <input type="submit" value="submit" name="b1"> <input type="reset" value="reset" name="b2"> </td> </table> </html> Hal :7/7

dokumen-dokumen yang mirip

Perancangan & Pemprograman WEB. Pertemuan 4 Materi Formulir &Latihan HTML

Perancangan & Pemprograman WEB Pertemuan 4 Materi Formulir &Latihan HTML Dasar Penggunaan Formulir Untuk membuat formulir maka kita menggunakan tag dan . Dua atribut yang umum digunakan pada