Pemrograman Web HTML (5) Form CSS Andy Haryoko, ST Upload : indocafein.wordpress.com
FORM (1) Form digunakan untuk mengumpulkan informasi dari user. Untuk membuat form digunakan tag <FORM>…</FORM>. <BODY> <FORM METHOD=”POST/GET” ACTION=”” NAME=”FORM_1”> </FORM> </BODY> Atribut METHOD berfungsi untuk menentukan cara mengirimkan data yang dimasukkan user ke server. Ada 2 cara yang dapat dipakai yaitu GET dan POST atribut ACTION berisi lokasi ke mana data form tsb akan dikirimkan. Atribut NAME berisi nama form tsb.
FORM (2) TEXTFIELD adalah satu baris tunggal yang digunakan untuk memasukkan data berupa teks maupun angka. <INPUT TYPE=”TEXT” SIZE=25 VALUE=”KETIK NAMA ANDA”>
FORM (3) PASSWORD FIELD Prinsip kerjanya sama dengan TEXTFIELD, hanya saja karakter yang diketikkan diganti dengan karakter *****. <INPUT TYPE=”PASSWORD”>
FORM (4) TEXTAREA Digunakan untuk memasukkan beberapa baris text yang dapat digulung naik atau turun. <TEXTAREA COLS=40 ROWS=5 NAME=”KOMENTAR”>
FORM (5) CHECKBOX Digunakan untuk membuat kotak pilihan <INPUT TYPE=”CHECKBOX” NAME=”PILIHAN1”>SEPAKBOLA RADIO BUTTON Kegunaannya sama dengan checkbox hanya saja bentuknya lingkaran. <INPUT TYPE=”RADIO” NAME=”GROUP1”>BULU TANGKIS
FORM (6) DROP DOWN MENU Digunakan untuk membuat daftar menu. Untuk membuatnya digunakan tag <SELECT> dan daftar pilihan menggunakan <OPTION> <SELECT NAME=”MENU”> <OPTION VALUE=”SEPAKBOLA”>FOOTBALL</OPTION> <OPTION VALUE=”BULU TANGKIS”>BADMINTON</OPTION> <OPTION VALUE=”TENIS”>TENIS</OPTION> </SELECT>
FORM (7) SUBMIT BUTTON Mengirimkan data yang dimasukkan melalui form oleh pembaca ke server. <INPUT TYPE=”TEXT” VALUE=”MASUKKAN NIM ANDA”> <INPUT TYPE=”SUBMIT” VALUE=”KIRIM”> RESET BUTTON Membatalkan data yang telah diketik di form sehinnga form menjadi kosong. <INPUT TYPE=”RESET” VALUE=”CANCEL”>
PENGENALAN CSS CSS = Cascading Style Sheet Fungsi : mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.
MEMBUAT CSS CARA PERTAMA : mengetikkan langsung dalam tag html sebagai atribut . <body> <b style = “color : blue”> teks tebal dan biru </b> </body>
CARA KEDUA : Menggunakan tag style di dalam tag head. <head> <style type=“text/css”> ……… style definitions ……… </style> </head>
Selector { property1 : value1 ; Style definitions : adalah defenisi style yang ingin dibuat. Format penulisannya adalah : Selector adalah tag yang digunakan web browser. Property : value adalah efek dari style yang diinginkan untuk selector. Selector { property1 : value1 ; property2 : value2;…. propertyN : valueN ; }
CARA KETIGA : Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css Memanggil file css dalam html dengan tag link yang diletakkan dalam tag head. <head> <link rel=“stylesheet” type=“text/css” href=“namafile.css”/> </head>
Contoh : <style type=“text/css” > hr { color : red ; height : 5px ; width : 50%; } </style> Keterangan : Tag adalah style Atribut adalah type=“text/css” Selector adalah hr Property adalah color, height, width Value adalah red, 5px, 50%
ID SELECTOR dan CLASS ID selector didefenisikan sendiri ID selector diawali tanda # ( octothorpe) CLASS diawali dengan tanda titik ( . )