E-Commerce Bab 05

5
FORM DAN INPUT HTML
Tujuan Instruksional :
1. Mahasiswa memahami apa yang dimaksud dengan form dan input

dalam HTML
2. Mahasiswa mengetahui unsur-unsur form dan input dalam HTML
3. Mahasiswa dapat membuat form input sederhana pada dokumen HTML
Form dan Input HTML
A. Form Input HTML
1. Form adalah sebuah area yang dapat berisi elemen form.

2. Elemen form adalah elemen yang memungkinkan user untuk mema-
sukkan informasi ( seperti text field, drop-down menu, radio button,
checkbox, dan lain-lain) dalam sebuah form.
3. Sebuah form didefinisikan dengan tag <form> dan diakhiri dengan
</form>.
4. Format dasar penulisan tag <form> adalah sebagai berikut :
<form>
<input>
<input>
</form>
Tag <input> adalah tag yang paling sering digunakan pada tag <form>.
Jenis-jenis input ditentukan oleh jenis atribut yang disertakan. Jenis input
yang umum digunakan akan dijelaskan pada bagian berikut ini.
B. Elemen Form HTML
Text Field
Text field digunakan bila menghendaki user untuk mengetikkan sesuatu pada
form. Untuk itu pada tag <input> ditambahkan sebuah atribut TYPE=TEXT
untuk menampilkan text field tersebut. Bila perlu bisa ditambahkan atribut
NAME untuk memberikan nama bagi elemen form tadi, misalnya
NAME=NAMADPN.
<form>
Nama depan: <input type="text" name="namadpn">
<br>
Nama belakang: <input type="text" name="namablk">
</form>
HTML di atas akan ditampilkan kurang lebih seperti berikut ini :

First name:
Last name:
Perhatikan bahwa tag <form> sendiri tidak akan ditampilkan pada web
browser. Secara default panjang text field adalah 20 karakter, kecuali bila di-
sertakan atribut SIZE untuk menentukan panjang text field tersebut.
Radio Button
Radio button digunakan bila menghendaki user untuk memilih satu dari bebe-
rapa pilihan yang ada. Untuk itu pada tag <input> ditambahkan sebuah
atribut TYPE=RADIO untuk menampilkan radio button tersebut. Atribut VALUE
diperlukan untuk memberikan nilai bagi pilihan si user, misalnya
VALUE=PRIA. Bila perlu bisa ditambahkan atribut NAME untuk memberikan
nama bagi elemen form tadi, misalnya NAME=SEX.
52 E-Commerce - Akademi Akuntansi Y.A.I

Form dan Input HTML
<form>
<input type="radio" name="sex" value="pria"> Pria
<br>
<input type="radio" name="sex" value="wanita"> Wanita
</form>
 Pria
 Wanita
Perhatikan bahwa hanya ada satu pilihan yang dapat diberikan oleh user.
Checkbox
Checkbox digunakan bila menghendaki user untuk memilih satu atau lebih
jawaban dari beberapa pilihan yang ada. Untuk itu pada tag <input> ditam-
bahkan sebuah atribut TYPE=CHECKBOX untuk menampilkan checkbox terse-
but. Bila perlu bisa ditambahkan atribut NAME untuk memberikan nama bagi
elemen form tadi, misalnya NAME=MOBIL.
<form>
<input type="checkbox" name="mobil"> Mobil sedan
<br>
<input type="checkbox" name="motor"> Sepeda motor
</form>
 Mobil sedan
 Sepeda motor
Drop-Down Menu
Drop-down menu digunakan bila menghendaki user untuk memilih satu dari
beberapa pilihan yang ada. Namun tag yang digunakan adalah <select>. Bila
perlu bisa ditambahkan atribut NAME untuk memberikan nama bagi elemen
form tadi, misalnya NAME=MOBIL. Atribut VALUE diperlukan untuk membe-
rikan nilai bagi pilihan si user, misalnya VALUE=MERCY bila user menjatuhkan
pilihan pada Mercy.
<html>
<body>
<form>
<select name="mobil">
<option value="mercy">Mercy
<option value="bmw">BMW
<option value="volvo">Volvo
<option value="audi">Audi
</select>
</form>
</body>
</html>
E-Commerce - Akademi Akuntansi Y.A.I 53

Form dan Input HTML
Button
Button atau tombol adalah elemen form yang digunakan untuk mengirimkan
data yang telah dimasukkan pada elemen form lainnya. Atribut yang diguna-
kan adalah TYPE=BUTTON, sedangkan atribut VALUE digunakan untuk mem-
berikan teks pada tombol tersebut.
<html>
<body>
<form>
<input type="button" value="Halo!">
</form>
</body>
</html>
Contoh di atas akan menghasilkan tombol dengan teks Halo! diatasnya.
Contoh-contoh latihan berikut akan menjelaskan variasi elemen form.
 Latihan 1 : Password Field

1. Jalankan aplikasi Notepad
2. Ketik baris perintah berikut ini :
<html>
<body>
<form>
Username: <input type="text" name="user">
<br>
Password: <input type="password" name="password">
</form>
</body>
</html>
3. Simpan file di My Document sebagai “coba5-1.html” dengan cara klik

menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada
bagian Save as type pilih All Files, lalu ketik “coba5-1.html” pada
bagian File name, klik tombol Save.
4. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang
muncul klik Browse, cari file “coba5-1.html” yang baru dibuat tadi
(misalnya di C:\My Documents\coba5-1.html), lalu klik OK.
 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana dengan atribut
TYPE=PASSWORD pada tag <input> akan menghasilkan text field un-
tuk password, di mana teks yang diketikkan tidak akan ditampilkan,
namun hanya diwakili dengan simbol  saja.

Form dan Input HTML
 Latihan 2 : Radio Button

<html>
<body>
<form>
Pria :
<input type="radio" checked="checked" name="Sex"
value="pria">
<br>
Wanita :
<input type="radio" name="Sex" value="wanita">
</form>
</body>
</html>
3. Simpan file sebagai “coba5-2.html”

 Penjelasan
Contoh latihan di atas mendemonstrasikan penambahan atribut
CHECKED=CHECKED yang akan menjadikan pilihan Pria menjadi pilih-
an default pada radio button.
 Latihan 3 : Drop-Down Menu

<html>
<body>
<form>
<select name="mobil">
<option value="mercy">Mercy
<option value="bmw">BMW
<option value="volvo">Volvo
<option value="audi" selected="selected">Audi
</select>
</form>
</body>
</html>

Form dan Input HTML

 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana dengan adanya
atribut SELECTED menyebabkan pilihan Audi menjadi pilihan default
pada drop-down menu.
 Latihan 4 : Form Input Sederhana (1)

<html>
<body>
<form name="input">
Nama depan : <input type="text" name="NamaDpn"
value="Mickey" size="20">
<br>
Nama belakang : <input type="text" name="NamaBlk"
value="Mouse" size="20">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

 Penjelasan
Contoh latihan di atas mendemonstrasikan sebuah form input seder-
hana, yaitu dua buah text field dan sebuah tombol submit untuk me-
ngirimkan data yang dimasukkan pada text field tersebut. Pada contoh
kedua text field telah diberi VALUE masing-masing VALUE=MICKEY
dan VALUE=MOUSE, sehingga bila tombol submit ditekan maka kedua
value tersebutlah yang akan diproses.

Form dan Input HTML

<html>
<body>
<form name="input">
Sepeda : <input type="checkbox" name="Sepeda"
checked="checked">
<br>
Mobil : <input type="checkbox" name="Mobil">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

 Penjelasan
Contoh latihan di atas mendemonstrasikan sebuah form input
sederhana yang kedua, yaitu dua buah checkbox dan sebuah tombol
submit untuk mengirimkan data yang dipilih pada checkbox tersebut.

<html>
<body>
<form name="input">
Pria : <input type="radio" name="Sex" value="Pria"
checked="checked">
<br>
Wanita : <input type="radio" name="Sex" value="Wanita">
<br>
<input type ="submit" value ="Submit">
</form>
</body>
</html>


Form dan Input HTML
 Penjelasan
Contoh latihan di atas mendemonstrasikan sebuah form input seder-
hana yang ketiga, yaitu dua buah radio button dan sebuah tombol
submit untuk mengirimkan data yang dipilih dari radio button tersebut.
Pada contoh kedua radio button telah diberi VALUE masing-masing
VALUE=PRIA dan VALUE=WANITA, sehingga bila tombol submit di-
tekan maka salah satu value tersebutlah yang akan diproses. Perlu
diingat bahwa pada radio button hanya salah satu pilihan saja yang
dapat dipilih.
 Latihan 7 : Form Pengiriman Email

<html>
<body>
<form action="MAILTO:nama@alamat.com" method="post"
enctype="text/plain">
<h3>Form ini untuk mengirim email ke nama@alamat.com</h3>

<br>
Nama : <input type="text" name="email" value="nama"
size="20">
<br>
Email : <input type="text" name="email" value="email"
size="20">
<br>
Pesan : <input type="text" name="pesan" value="pesan"
size="40">
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>

 Penjelasan
Contoh latihan di atas mendemonstrasikan pembuatan form untuk me-
ngirimkan pesan ke alamat email tertentu. Pada form ini digunakan
tiga input berupa tiga text field untuk memasukkan nama, email, dan
pesan dari si pengirim. Lalu ada dua tombol submit dan reset. Tombol
reset digunakan untuk mengosongkan isi seluruh text field apabila ter-
jadi kesalahan dalam memasukkan data dan ingin mengulangi mema-
sukkan data kembali.

Form dan Input HTML
Sebagai tambahan, pada tag <form> ditambahkan atribut

ACTION=MAILTO:NAMA@ALAMAT.COM yang digunakan untuk melaku-
kan proses pengiriman isi form yang ditujukan ke alamat email
nama@alamat.com.
C. Soal Latihan
No. Soal Nilai

1 Buatlah sebuah halaman Web yang menampilkan form
berkut ini :
REGISTRASI ANGGOTA
Nama lengkap :
Nama login :
Password :
Alamat e-mail :
Jenis kelamin Pria

: Wanita
Pekerjaan :
Submit Reset
Isilah combo box Pekerjaan dengan item : Pegawai

Negri, Pegawai Swasta, Dosen/guru, Wirausaha, dan
Mahasiswa

E-Commerce Bab 05

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

E-Commerce Bab 05

Diunggah oleh

Hak Cipta:

Format Tersedia

5

FORM DAN INPUT HTML

1. Mahasiswa memahami apa yang dimaksud dengan form dan input

A. Form Input HTML

1. Form adalah sebuah area yang dapat berisi elemen form.

B. Elemen Form HTML

HTML di atas akan ditampilkan kurang lebih seperti berikut ini :

52 E-Commerce - Akademi Akuntansi Y.A.I

HTML di atas akan ditampilkan kurang lebih seperti berikut ini :

HTML di atas akan ditampilkan kurang lebih seperti berikut ini :

E-Commerce - Akademi Akuntansi Y.A.I 53

Contoh di atas akan menghasilkan tombol dengan teks Halo! diatasnya.

Contoh-contoh latihan berikut akan menjelaskan variasi elemen form.

 Latihan 1 : Password Field

3. Simpan file di My Document sebagai “coba5-1.html” dengan cara klik

54 E-Commerce - Akademi Akuntansi Y.A.I

 Latihan 2 : Radio Button

3. Simpan file sebagai “coba5-2.html”

 Latihan 3 : Drop-Down Menu

E-Commerce - Akademi Akuntansi Y.A.I 55

3. Simpan file sebagai “coba5-3.html”

 Latihan 4 : Form Input Sederhana (1)

3. Simpan file sebagai “coba5-4.html”

 Latihan 5 : Form Input Sederhana (2)

56 E-Commerce - Akademi Akuntansi Y.A.I

1. Jalankan aplikasi Notepad

3. Simpan file sebagai “coba5-5.html”

 Latihan 6 : Form Input Sederhana (3)

3. Simpan file sebagai “coba5-6.html”

E-Commerce - Akademi Akuntansi Y.A.I 57

 Latihan 7 : Form Pengiriman Email

<h3>Form ini untuk mengirim email ke nama@alamat.com</h3>

3. Simpan file sebagai “coba5-7.html”

58 E-Commerce - Akademi Akuntansi Y.A.I

Sebagai tambahan, pada tag <form> ditambahkan atribut

No. Soal Nilai

Jenis kelamin Pria

Isilah combo box Pekerjaan dengan item : Pegawai

E-Commerce - Akademi Akuntansi Y.A.I 59

Anda mungkin juga menyukai