3. Pendalaman HTML Penggunaan format table di HTML

Presentasi berjudul: "3. Pendalaman HTML Penggunaan format table di HTML"— Transcript presentasi:

1 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

2 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

3 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>

4 Table di HTML

5 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>

6 Table di HTML

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

8 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>

9 TEXTAREA

10 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>

11 SELECT

12 SELECT

13 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">

14 INPUT

15 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>

16 Form dan Table