1 / 16

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. 3 . Pendalaman HTML.

arden
Download Presentation

3 . Pendalaman HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 3.Pendalaman HTML

  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 : <table width=“100%” height=“100pt” cellspacing=“2” border=“0”> <tr> <td>Cell A1</td><td>Cell B1</td><td>Cell C1</td> </tr> <tr> <td>Cell A2</td><td>Cell B2</td><td>Cell C2</td> </tr> </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> </SELECT>

  11. SELECT

  12. SELECT

  13. INPUT 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> <TR> <TD>Alamat :</TD><TD><INPUT TYPE="Text" NAME="varAlamat" SIZE="30"></TD> </TR> <TR> <TD>Password :</TD><TD><INPUT TYPE="Password" NAME="varPassword" SIZE="10"></TD> </TR> </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

More Related