Scribd
Unggah
25 tayangan

Modul 05 - Membuat Form

Diunggah oleh

Tenita Agustin
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
25 tayangan

Modul 05 - Membuat Form

Diunggah oleh

Tenita Agustin
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

MODUL

MEMBUAT FORM

A. Tujuan
1. Menjelaskan konsep formulir dalam halaman web
2. Menjelaskan tag-tag HTML untuk formulir dalam halaman web
3. Menjelaskan berbagai metode inputan formulir dalam halaman web
4. Menentukan prosedur pembuatan format formulir dalam halaman
web
5. Merancang program untuk menampilkan formulir dalam halaman
web
6. Membuat program tampilan formulir dalam halaman web
7. Menguji program tampilan formulir dalam halaman web

B. Dasar Teori
Pengertian Form
Secara global, form adalah suatu bagian di dalam halaman web yang
berfungsi untuk mengizinkan pengunjung mengirim data ke web server.
Dengan kata lain, form berperan sebagai user-interface (antarmuka) atau
media untuk berkomunikasi antar user dan web server.
Tipe kontrol yang digunakan di dalam form memiliki bentuk yang
beragam: text, combo box, list box, radio button, check box, dan lain-lain,
tergantung dari jenis data yang akan dikirimkan ke web server.
HTML form digunakan untuk memberikan data ke sebuah server.
Sebuah HTML form dapat memiliki input-input element antara lain text
field, checkbox, radio button, submit button, dan lain-lain. Sebuah form juga
dapat mengandung select list, textarea, fieldset, legend, dan element label.
Tag yang digunakan untuk membuat HTML form adalah <form>.
<form>
.
input elements
.
</form>

MODUL MEMBUAT 1
FORM
Elemen <input> HTML Forms

MODUL MEMBUAT 2
FORM
Hal yang terpenting dari element form adalah elemen <input>.
Elemen untuk
digunakan <input>
mengambil informasi dari user. Sebuah elemen input
dapat dipakai dengan berbagai cara tergantung dari tipe attributnya.
Sebuah elemen input dapat berupa text field, checkbox, password, radio
button, submit button, dan lain-lain.
Input type yang secara umum digunakan antara lain:
1) Text Field
Input yang digunakan akan berupa kotak text berikut ini:
<form>
First name: <input type=”text” name=”firstname”><br
/> Last name: <input type=”text” name=”lastname”>
</form>

2) Password Field
Password field adalah kotak yang ketika anda menuliskan password
disitu maka huruf akan diganti dengan simbol lingkaran untuk melindungi
tulisan password yang diketik.
<form>
Password: <input type=”password” name=”pwd”>
</form>

3) Radio Button
Radio button digunakan untuk memilih inputan hanya satu pilihan saja.
Contoh: Jenis kelamin.
<form>
<input type=”radio” name=”sex” value=”male”>Laki-laki<br />
<input type=”radio” name=”sex” value=”female”>Perempuan
</form>

4) Drop Down List / Combo Box


<form action=””>
<select name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”fiat”>Fiat</option>
<option value=”audi”>Audi</option>
</select>
</form>

5) Check Box

MODUL MEMBUAT 3
FORM
Perbedaan dengan radio button adalah dapat mencentang / memilih
lebih dari
satu pilihan.
<form>
<input type=”checkbox” name=”vehicle” value=”Bike” />I have a
bike<br />
<input type=”checkbox” name=”vehicle” value=”Car” />I have a car

6) Text Area
Text area seperti text field namun bedanya adalah text area dapat
terdiri dari beberapa line/baris dan kolom.
<textarea rows=”4” cols=”50”>
Ini adalah mata pelajaran Pemrograman Web. Pemrograman web
merupakan sebuah pemrograman dengan menggunakan kode HTML.
</textarea>

C. Latihan
Kontrol Text

MODUL MEMBUAT 3
FORM
Kontrol Textarea

Kontrol Radiobutton

MODUL MEMBUAT 4
FORM
Kontrol Checkbox

MODUL MEMBUAT 5
FORM
Kontrol Listbox

Kontrol Combobox

MODUL MEMBUAT 6
FORM
Kontrol Password

Kontrol Reset

MODUL MEMBUAT 7
FORM
D. Tugas Mandiri
1. Buatlah sebuah halaman website tentang formulir pendaftaran
online masuk perkuliahan atau dunia kerja !
2. Gunakan dan gabungkan beberapa kontrol elemen HTML form
yang sudah dipelajari !
3. Optimalkan pada desain tampilannya (Desain Tiap Individu Harus
Berbeda) !

MODUL MEMBUAT 8
FORM

Anda mungkin juga menyukai