3. Pendalaman HTML Penggunaan format table di HTML Koleksi input dalam Form beserta fields komponennya (Submit & Reset Buttons, Text Input, Radio Buttons, Check Boxes, Text Areas, Selections fields, dan Hidden Fields) Penggunaan Methoda POST dan GET dalam Form HTML dan URL

Format Table di HTML Table tag : <TABLE></TABLE> : tag table <TR></TR> : baris <TD></TD> : cell <TH></TH> : table header <CAPTION> : judul table Atribut : Width : Lebar ukuran table Height : Tinggi ukuran table Cellspacing : jarak antar cell Cellpading : jarak isi cell ke batas cell Border : ukuran tebal garis cell Align : rata letak text secara horizontal VAlign : rata letak text secara vertical Rowspan : grouping cell sebaris Colspan : grouping cell sekolom

Format Table di HTML Satuan Width: Sample : Suffix Value px, [none] pixels pt points pi picas in inches cm centimeters mm millimeters em em units % percent of screen width Sample : <table width=“100%” height=“100pt” cellspacing=“2” border=“0”> <tr> <td>Cell A1</td><td>Cell B1</td><td>Cell C1</td> </tr> <td>Cell A2</td><td>Cell B2</td><td>Cell C2</td> </table>

Table di HTML

Form Sebagai media untuk koleksi lenbar form (inputan bagi user) dalam HTML <FORM [METHOD=”[POST|GET]”ACTION=”URL”]> … </FORM> ACTION : URL yg dituju yg akan menerima informasi form METHOD : bagaimana informasi dikirim ke script, POST : informasi form dikirim secara tersendiri dari URL (dlm body protocol HTTP). GET: informasi form dikirim dengan diletakkan di akhir URL. Sample : <form name=“myForm” action=“test.php” method=“GET”> Ini text dalam form </form>

Table di HTML

Field Input dlm Form TEXTAREA <Textarea> … </Textarea> SELECT <Select> <option> .. </option> </Select> INPUT : <input type=‘…’ > Text Password Checkbox Radio Hidden Reset Submit button

TEXTAREA NAME : nama textarea ROWS : jml baris yg terlihat COLS : lebar kolom dalam karakter Default text untuk text area diletakkan diantara <TEXTAREA> default </ TEXTAREA> Sample : <TEXTAREA NAME="ket" ROWS=4 COLS=40>Default text</TEXTAREA>

TEXTAREA

SELECT NAME : nama SIZE : jml pilihan MULTIPLE : pilihan bisa lebih dari satu Tag Option : value Selected Sample: <SELECT NAME="pilihan1"> <OPTION SELECTED VALUE="AK"> Akuntasi </OPTION> <OPTION VALUE="MG"> Management </OPTION> <OPTION VALUE="EK"> Ekonomi </OPTION> </SELECT> <SELECT MULTIPLE NAME="pilihan2"> <OPTION SELECTED VALUE="UI"> Universitas Indonesia </OPTION> <OPTION VALUE="UGM"> Universitas Gajah Mada </OPTION> <OPTION VALUE="UNPAD"> Universitas Pajajaran </OPTION>

SELECT

SELECT

INPUT Sample : NAME : nama input SIZE : ukuran panjang text MAXLENGTH : maksimal karakter yg bisa dimasukkan VALUE : isi default CHECKED : default check TYPE : text, password, checkbox, radio, hidden, reset, submit, button Sample : <INPUT TYPE="text" NAME="siswa" SIZE="15" MAXLENGTH="12"> <INPUT TYPE="password" NAME="pwd" Size="30" MAXLENGTH="30"> <INPUT TYPE="checkbox" NAME="lulus" VALUE="YA">Apakah Lulus?. <INPUT TYPE="radio" NAME="pilih" VALUE="choice1"> Hitam <INPUT TYPE="radio" NAME="pilih" VALUE="choice2"> Putih <INPUT TYPE="radio" NAME="pilih" VALUE="choice1"> Biru <INPUT TYPE="hidden" Name VALUE="sembunyi"> <INPUT TYPE="button" VALUE="Klik disini"> <INPUT TYPE="reset" VALUE="Reset Form"> <INPUT TYPE="submit" VALUE="Submit Form">

INPUT

KOMBINASI FORM DAN TABLE Untuk meletakkan dan format tampilan yg bagus dan sesuai, maka Form dan table HTML bisa saling dikombinasikan Sample : <FORM METHOD="POST" ACTION="contoh.htm"> <TABLE> <TR> <TD>Nama :</TD><TD><INPUT TYPE="Text" NAME="varNama" VALUE="Andy Kurniawan" SIZE="15"></TD> </TR> <TD>Alamat :</TD><TD><INPUT TYPE="Text" NAME="varAlamat" SIZE="30"></TD> <TD>Password :</TD><TD><INPUT TYPE="Password" NAME="varPassword" SIZE="10"></TD> </TABLE> Jenis kelamin: <INPUT CHECKED TYPE="Radio" NAME="Kelamin" VALUE="Pria">Pria <INPUT TYPE="Radio" NAME="Kelamin" VALUE="Wanita">Wanita <BR><BR> Hobi:<BR> <INPUT TYPE="Checkbox" NAME="Kelamin" VALUE="Soccer">Sepakbola <INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Badminton">Bulutangkis <INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Computer">Komputer <BR> <INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Game">Permainan video <INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Internet">Internet <INPUT TYPE="Submit" VALUE="Send info"> <INPUT TYPE="Reset" VALUE="Clear form"> </FORM>

Form dan Table