FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian secara online memperoleh feedback dari user mengenai website anda.
Element Form Untuk membuat form : <form> … </form>
HTML Input Element - Button Atribut : type, value, onclick. <html> <head> <title>Contoh Button</title> <script language="JavaScript"> function kirim_form () {window.alert ("Form telah sukses dikirim"); window.open ("http://www.microsoft.com"); } </script> </head> <body> <form> Klik tombol dibawah ini.<br> <input type="button" value="Kirim Form" onclick="kirim_form()"> </form> </body> </html>
HTML Input Element - Text Untuk memasukkan data. Atribut : type, name, size, maxlength, value. <body> <form action="info.htm" method="post"> Nama : <input type="text" name="nama" size="20"> <br> Hobby : <input type="text" name="hobby" size="20"> <input type="submit" value="kirim"> <input type="reset" value="kosongkan"> </form> </body>
HTML Input Element - CheckBox Atribut : Type, Name, Checked. <body> <form> Buah yang anda sukai : <br> <input type="checkbox" name="anggur" checked> Anggur <br> <input type="checkbox" name="jeruk"> Jeruk <br> <input type="checkbox" name="melon"> Melon <br> </form> </body>
HTML Input Element - Radio Atribut : Type, name, value, checked. <body> <form> Jenis Kelamin : <br> <input type="radio" name="sex" value="p" checked> Pria <br> <input type="radio" name="sex“ value="w"> Wanita <br> </form> </body>
HTML Input Element - TextArea Atribut : cols, rows, name, size. <body> <form> Komentar anda : <br> <textarea name="komentar" rows="5" cols="40"> </textarea> </form> </body>
HTML Input Element - Combo Perintah : tag <select> <form> Musik yang paling anda sukai : <br> <select name="musik"> <option value="Jazz"> Jazz <option value="Rock"> Rock <option value="Pop"> Pop <option value="Lain2"> Lain </select> </form>
HTML Input Element – List Box Hampir sama dengan combo, tambahan : size=“jml_yg_ditampilkan” <form> Musik yang paling anda sukai : <br> <select name="musik" size="2"> <option value="Jazz" selected> Jazz <option value="Rock"> Rock <option value="Pop"> Pop <option value="Lain2"> Lain </select> </form>
<html> <head> <title> Form Layout dan Desain</title> </head> <body bgcolor=cyan> <h2>Multiple Form</h2> <!-- tag berikut untuk form pertama --> <form action="tempat.html" method="post"> Silahkan pilih ukuran yang diinginkan!<br> <input name="size" type="radio" value="sm"> Small <input name="size" type="radio" value="md"> Medium <input name="size" type="radio" value="lg"> Large <input name="size" type="radio" value="x"> X-Large <input name="size" type="radio" value="xx">XX-Large <p> <input type="submit" value="Kirim data ini!"> </form> <img src="bingkai.gif" />
<!-- tag berikut untuk form 2 --> <form action="atas.html" method="get"> <table> <tr><td>Nama:</td> <td><input type="text" name="nama" size="50"></td></tr> <tr><td>Email:</td> <td><input type="text" name="email" size="50"></td></tr> <tr><td>Alamat:</td> <td><input type="text" name="alamat1" size="30"></td></tr> <tr><td></td><td><input type="text" name="alamat2" size="30"></td></tr> <tr><td>Kota:</td><td><input type="text" name="kota" size="50"></td></tr> <tr><td>Kode Pos:</td> <td><input type="text" name="kdpos" size="10"></td></tr> </table> </form> <p><input type="submit" value="Kirim data ini!">
<!-- tag berikut untuk form 3 --> <form action="atas1.html" method="post"> <fieldset> <legend>Komentar anda disini</legend> Silahkan anda tulis komentar disini!<br> <textarea name="isi" rows="8" cols="50" tabindex="20"></textarea> </fieldset> </form> <input type="submit" value="Kirim"><input type="reset" value="Batal"> </body> </html>
CASCADING STYLE SHEETS Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru) Support ke semua browser.
Aturan Penulisan CSS Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green; Nama property bersifat case sensitive. color : green; property : color value : green
Cara Penggunaan External Style Sheet Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”> <link, merupakan tag pembuka diakhiri dengan tanda “>” rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet type=“text/css”, file yang dipanggil berupa css href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh External Style Sheet Contoh script efek.css body { color: green; background: white; font-family : arial; } <HTML> <HEAD> <TITLE>centranet</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>PENS ITS</H1> <P> PENS ITS adalah kampus teknik yang concern ke bidang elektro </BODY> </HTML>
Cara Penggunaan – Cont.1 Internal Style Sheet Bentuk umum : <HTML> <HEAD> <TITLE>centranet</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>Zefnet</H1> <P>Zefnet adalah sebuah web Developer dan Linux Center </BODY> </HTML> Internal Style Sheet Bentuk umum : <style type=“text/css”> …definisi style… </style>
Cara Penggunaan – Cont.2 Inline Style sheet <HTML> <HEAD> <TITLE>centranet</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial;“ > <H1>ZEFNET</H1> <P>ZEFNET adalah sebuah web Developer dan Linux Center </BODY> </HTML>