3' Pendalaman HTML

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
• ltTABLEgtlt/TABLEgt tag table
• ltTRgtlt/TRgt baris
• ltTDgtlt/TDgt cell
• ltTHgtlt/THgt table header
• ltCAPTIONgt 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 lttable width100 height100pt
cellspacing2 border0gt lttrgt lttdgtCell
A1lt/tdgtlttdgtCell B1lt/tdgtlttdgtCell
C1lt/tdgt lt/trgt lttrgt lttdgtCell A2lt/tdgtlttdgtCell
B2lt/tdgtlttdgtCell C2lt/tdgt lt/trgt lt/tablegt
4
Table di HTML
5
Form

• Sebagai media untuk koleksi lenbar form (inputan
  bagi user) dalam HTML
• ltFORM METHODPOSTGETACTIONURLgt
• lt/FORMgt
• 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
• ltform namemyForm actiontest.php
  methodGETgt
• Ini text dalam form
• lt/formgt

6
Table di HTML
7
Field Input dlm Form

• TEXTAREA
• ltTextareagt lt/Textareagt
• SELECT
• ltSelectgt
• ltoptiongt .. lt/optiongt
• lt/Selectgt
• INPUT
• ltinput type gt
• 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
  ltTEXTAREAgt default lt/ TEXTAREAgt
• Sample
• ltTEXTAREA NAME"ket" ROWS4 COLS40gtDefault
  textlt/TEXTAREAgt

9
TEXTAREA
10
SELECT

• NAME nama
• SIZE jml pilihan
• MULTIPLE pilihan bisa lebih dari satu
• Tag Option
• value
• Selected
• Sample
• ltSELECT NAME"pilihan1"gt
• ltOPTION SELECTED VALUE"AK"gt Akuntasi lt/OPTIONgt
• ltOPTION VALUE"MG"gt Management lt/OPTIONgt
• ltOPTION VALUE"EK"gt Ekonomi lt/OPTIONgt
• lt/SELECTgt
• ltSELECT MULTIPLE NAME"pilihan2"gt
• ltOPTION SELECTED VALUE"UI"gt Universitas
  Indonesia lt/OPTIONgt
• ltOPTION VALUE"UGM"gt Universitas Gajah Mada
  lt/OPTIONgt
• ltOPTION VALUE"UNPAD"gt Universitas
  Pajajaran lt/OPTIONgt
• lt/SELECTgt

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
• ltINPUT TYPE"text" NAME"siswa" SIZE"15"
  MAXLENGTH"12"gt
• ltINPUT TYPE"password" NAME"pwd" Size"30"
  MAXLENGTH"30"gt
• ltINPUT TYPE"checkbox" NAME"lulus"
  VALUE"YA"gtApakah Lulus?.
• ltINPUT TYPE"radio" NAME"pilih" VALUE"choice1"gt
  Hitam
• ltINPUT TYPE"radio" NAME"pilih" VALUE"choice2"gt
  Putih
• ltINPUT TYPE"radio" NAME"pilih" VALUE"choice1"gt
  Biru
• ltINPUT TYPE"hidden" Name VALUE"sembunyi"gt
• ltINPUT TYPE"button" VALUE"Klik disini"gt
• ltINPUT TYPE"reset" VALUE"Reset Form"gt
• ltINPUT TYPE"submit" VALUE"Submit Form"gt

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
• ltFORM METHOD"POST" ACTION"contoh.htm"gt
• ltTABLEgt
• ltTRgt
• ltTDgtNama lt/TDgtltTDgtltINPUT TYPE"Text"
  NAME"varNama" VALUE"Andy Kurniawan"
  SIZE"15"gtlt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtAlamat lt/TDgtltTDgtltINPUT TYPE"Text"
  NAME"varAlamat" SIZE"30"gtlt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtPassword lt/TDgtltTDgtltINPUT TYPE"Password"
  NAME"varPassword" SIZE"10"gtlt/TDgt
• lt/TRgt
• lt/TABLEgt
• Jenis kelamin
• ltINPUT CHECKED TYPE"Radio" NAME"Kelamin"
  VALUE"Pria"gtPria
• ltINPUT TYPE"Radio" NAME"Kelamin"
  VALUE"Wanita"gtWanita ltBRgtltBRgt
• HobiltBRgt
• ltINPUT TYPE"Checkbox" NAME"Kelamin"
  VALUE"Soccer"gtSepakbola

16
Form dan Table