html form & css - · pdf filejenis-jenis form inputan text password radio button...

Pengembangan Web

Ramos Somya, S.Kom., M.Cs.

HTML Form & CSS

HTML Form Kegunaan:

Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang disediakan

Memperoleh feed back dari user

Menggunakan tag: <form> … </form>

Form Element:

Method: menentukan bagaimana data dikirim ke server.

Action: menentukan lokasi dari script yang akanmemproses data dari form.

Jenis-Jenis Form Inputan

TEXT

PASSWORD

RADIO button

CHECKBOX

COMBO BOX

TEXTAREA

HTML Input Elemen

Text : digunakan user untuk menginputkan huruf, kalimat atau angka dalam form.

<form>

First name:

<input type="text" name="firstname“>

<br>

Last name:

<input type="text" name="lastname">

</form>

...

Radio Button: digunakan untuk memilih satu dari

beberapa pilihan.

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

... CheckBox: digunakan untuk memilih satu atau

beberapa pilihan dalam form.<form>I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>

Submit Button

<form name="input" action=“save.php" method="get">

Username:

<input type="text" name="user">

<input type="submit" value="Submit">

</form>

HTML Form & Tabel

CSS (Cascading Style Sheet)

Cascading Style Sheets (CSS) adalah suatu teknologi yang

digunakan untuk memperindah halaman website (situs),

dengan CSS kita dapat dengan mudah mengubah

keseluruhan warna dan tampilan yg ada di situs kita

sekaligus memformat ulang situs kita.

Kelebihan CSS

Memisahkan desain dengan konten halaman web.

Mengatur desain seefisien mungkin.

Jika kitai ngin mengubah suatu tema halaman web, cukup

modifikasi pada css saja.

Satu CSS dapat digunakan banyak halaman web.

Kekurangan CSS

Tampilan pada browser berbeda-beda.

Kadang ada browser yang tidak support CSS.

Menggunakan tag:

<style> ...... </style>

Format CSS

Sebuah style sheet terdiri dari beberapa aturan (rules).

Masing-masing aturan terdiri dari satu atau lebih selektor

(selector) dan sebuah blok deklarasi (declaration block).

Sebuah blok deklarasi terdiri dari beberapa deklarasi

yang dipisahkan oleh titik koma (;). Masing-masing

deklarasi terdiri dari property, titik dua (:) dan nilai

(value).

Contoh

Contoh

Selector: class dan id

Terdapat dua type paragraph dalam suatu dokumen: satu

paragraf rata kanan, dan paragraf yang lain rata tengah.

...

Pendefinisian style untuk elemen HTML dapat dilakukan

dengan selector id. Selektor ID didefinisikan sebagai #.

Contoh:

Aturan style berikut akan menyesuaikan elemen yang

mempunyai sebuah atribut id dengan nilai “hijau”.

<font id=“green”>Warna Hijau</font>

Penulisan CSS

Dapat digunakan secara internal, eksternal maupun

inline (langsung ditulis dalam tag HTML).

CSS eksternal menggunakan ekstensi *.css

Dianjurkan untuk menggunakan CSS eksternal.

CSS Internal

CSS Eksternal

CSS Inline

Tugas Take Home

Halaman New Phonebook

Halaman View Phonebook

Halaman Edit & Hapus Phonebook

Ketentuan

Kerjakan dengan HTML dan CSS.

Kerjakan 1 kelompok maksimal 4 mahasiswa.

Dikumpulkan ke email ramos.somya@gmail.com paling

lambat hari Rabu, 19 Februari 2014 pukul 12.00 WIB.

Subject email:TGS<spasi>2<spasi>PW<spasi>kelas

contoh:TGS 2 PW A

Nama file:TGS_PW_2_Kelas_NIMKETUA.rar

contoh:TGS_PW_2_A_672014001.rar

Subject email dan nama file yang dikirimkan harus sesuai

ketentuan, jika tidak sesuai maka tidak akan dinilai.

Jangan Lupa:

Tuliskan NIM anggota kelompok

pada bagian “Contact Me” di web

yang dibuat.

ramos672006005.wordpress.com

Terima Kasih