Anda di halaman 1dari 10

BAB I

LANDASAN TEORI

A. Sumber Buku Pustaka


FORM HTML
Form adalah cara untuk mendapatkan umpan balik dari pengunjung
ke situs web yang diawali dan diakhir dengan tag <FORM> dan
</FORM>. Field-field yang berada diantaranya, digunakan untuk
menentukan ukuran dan jenis dari masing- masing input field. Walaupun
dapat dimiliki banyak form dalam satu halaman, tetapi anda tidak dapat
melakukan form dalam form.

B. Sumber Modul

Elemen-elemen dalam suatu form

1. Text Field adalah kotak berukuran kecil yang digunakan untuk


memasukkan data. Dibawah ini adalah skrip HTML untuk membuat
Text Field
<INPUT TYPE TEXT>
Hasilnya

Jika ingin menambahkan isi yang muncul otomatis saat website dibuka
maka gunakan tambahan Value='isi text field' seperti contoh

<INPUT TYPE TEXT VALUE='tulisan'>


Hasilnya

1
Jika ingin agar Text Field yang dibuat tidak bisa diedit ketika dibuka di
browser maka tambahkan skrip readonly='true' seperti contoh
dibawah ini
<INPUT TYPE TEXT VALUE='tulisan' readonly='true'>
Hasilnya

2. Textarea adalah tempat meletakan text atau tulisan dengan tatakan


area putih pada umumnya. Biasanya Textarea digunakan untuk
meletakan kode - kode html yang bisa dicopy dan paste oleh orang lain
atau pengunjung. Saya akan mengajarkan cara membuat textarea
dalam 3 model, silahkan Anda suka yang mana.

Textarea ini sangat sederhana, hanya saya


tambahkan kode rows dan cols yang
berfungsi mengatur jumlah baris dan
kolom. Ini bisa dikatakan juga sebagai
pengaturan lebar dan tinggi textarea. untuk
mem-blok isinya, harus disorot manual.
Kelemahannya adalah kadang bisa ada
kode yang tertinggal jika saat melakukan
sorot/blok dengan mouse kurang hati-hati.
Terus terang saya kurang suka dengan
textarea jenis ini.

kode untuk membuat:

<textarea rows="5" cols="25">


Ini adalah Contoh Text area, Ini adalah Contoh Text area, Ini adalah
Contoh Text area
</textarea>

2
3. Combo Box merupakan kombinasi dari text box dan list box dimana
pemasukan data dapat dilakukan dengan pengetikan maupun pemilihan
List Box mengandung sejumlah item dan user dapat memilih lebih dari
satu (bergantung pada property multi select)
Check Box digunakan untuk pilihan yang isinya berisi yes/no,
true/false
Option Button sering digunakan lebih dari satu sebagai pilihan
terhadap beberapa option yang hanya dapat dipilih satu
4. CHECKBOX

Checkbox adalah kontrol sederhana TRUE/ FALSE, yang mana


kalau di check adalah TRUE, dan kosong menyatakan FALSE.

5. HIDDEN
Kontrol ini tidak ditampilkan oleh viewer dari halaman. Kontrol ini
dapat digunakan untuk mengirim status informasi kembali ke program
form-processing.

6. IMAGE
form data dikirim dan nilainya dilewatkan oleh image dalam x,y
kordinat pixel.

7. PASSWORD

Fungsi ini seperti textbox, tetapi tulisan ditampilkan


dengan asteriks sebagai penggantinya.

8. RADIO

Fungsi ini menyerupai checkbox control, tetapi hanya satu option


button dari group yang dapat dipilih setiap saat. Pilih Ya atau Tidak

9. RESET
form data dikembalikan ke keadaan awal sesuai dengan nilai initial
masing-masing.

3
10. SUBMIT
Klik pada tombol akan mengirim form data ke FORM ACTION URL.

11. TEXT
Ketik disini
Kontrol ini digunakan untuk menggumpulkan satu
baris tunggal dari tulisan. Atribut SIZE dan MAXLENGTH dapat
ditentukan untuk membatasi

Perbedaan dari:

a) Combo Box dan List Box


Dalam Combo Box:
* User dapat mengisi nilai yang baru
* User dapat mengisi nilai pada bagian atas kotak
* Item text tidak perlu digulung dan disembunyikan
* User bisa memasukkan pilihan melalui daftar/menuliskannya
*User dapat memilih lewat daftar drop-down
Dalam List Box:
* Pencarian data pada item
* Menampilkan daftar pilihan yang bisa digulung
* Menampilkan daftar item yang dapat dipilih salah satu oleh
pemakai

b) Check Box dan Option Button


Dalam Check Box:
*Untuk membuat kotak check yang mudah pemakaiannya
* Bisa digunakan untuk pemilihan 2 keadaan atau lebih
*User dapat memilih satu check box secara bersamaan
* digunakan untuk pilihan ya/tidak/benar/salah
Dalam Option Button:
* User hanya dapat memilih satu option pada grup pilihan

4
* Untuk pemilihan 2 keadaan dari banyak pilihan
namun hanya 1 pilihan saja yang bisa diaktifkan

BAB II
HASIL PRAKTIKUM

Hasil praktikum 4 adalah membuat formulir pendaftaran mahasiswa baru


dengan menyertakan 8 komponen-komponen form seperti : textfield, password,
radio, combo box, list box, check box, textarea dan upload gambar.

Latihan
<html>
<head><title>Contoh formulir</title></head>
<body bGCOLOR="BLUEBERRY">
<MARQUEE DIRECTION="LEFT"><font COLOR="BLUE"><font SIZE="15">Selamat datang
di laman FORMULIR PENDAFTARAN MEHASISWA BARU ATB Pematangsiantar</font
SIZE></font COLOR></MARQUEE>
<IMAGE SRC="LOGOA.JPG" WIDTH="750" HEIGHT="200">
<center><h2> FORMULIR PENDAFTARAN MAHASISWA BARU<BR>
AMIK TUNAS BANGSA <BR>PEMATANGSIANTAR</center>
<form>
<pre>
<b><font color="RED">login</font color><p></b>
user name <input type="text" name="user"><br>
password <input type="password"name="pass"><br>
<input type="submit" value="login">
<hr>
<b><font color="RED">DATA DIRI</FONT COLOR></B>
firstname <input type="text" name="first"><br>
lastname<input type="text"name="last"><br>
<input type="submit"value="add">

5
jenis kelamin <input type="radio" name="jenkel" value="pria">pria <br>
<input type="radio" name="jenkel" value="wanita">wanita<br>

alamat <input type="text" name="alamat"><br>


tempat lahir <input type="text" name="tempat lahir"><br>
tanggal lahir <input type="text" name="tanggal lahir"> - <input type="text" name="tanggal
lahir">-<input type="text" name="tanggal lahir">

agama <input type="radio" name="agama" value="islam">islam <br>


<input type="radio" name="agama" value="katolik">katolik<br>
<input type="radio" name="agama" value="protestan">protestan<br>
<input type="radio" name="agama" value="Hindu">Hindu<br>
<input type="radio" name="agama" value="Budha">Budha<br>
<p>kegemaran <br>
<input type="checkbox" name="gemar" value="membaca">membaca<br>
<input type="checkbox" name="gemar" value="menyanyi">menyanyi<br>
<input type="checkbox" name="gemar" value="berenang">berenang<br>
<input type="checkbox" name="gemar" value="melukis">melukis<br>
<hr>

<b><font color="RED">DATA ORANGTUA</FONT COLOR></B>


nama Ayah <input type="text" name="ayah"><br>
nama ibu <input type="text" name="ibu"><br>
nama wali <input type="text" name="wali"><br>

pekerjaan ayah <input type="text" name="kerjaa"><br>

pekerjaan ibu <input type="text" name="kerjaaa"><br>

pekerjaan wali <input type="text" name="kerjaaa"><br>


alamat ayah <input type="text" name="aya"><br>
alamat ibu <input type="text" name="ibu"><br>
alamat wali <input type="text" name="wali"><br>
<hr>
<b><font color="RED">DATA PRogram studi</font color></b>
jurusan yang diambil <select name="jurus">
<option value="" selected="selected">pilih jurusan</option>

6
<option value="Manajemen Informatika">Manajemen
Informatika</option>
<option value="Komputerisasi Akuntansi">Komputerisasi
Akuntansi</option>
</select>

sesi waktu <select name="sesi" size="3" multiple="multiple">


<option value="" selected="selected">pilih sesi</option>
<option value="pagi">pagi</option>
<option value="siang">siang</option>
<option value="malam">malam</option>
<select>
Mengapa anda memilih ATB Pematangsiantar?
<textarea rows="8" cols="50" name="command">
tuliskan alasan anda
</textarea>
Upload gambar anda :
<input type="file" name="upload">
</form>
</html>
Hasilnya:

7
8
BAB III
PENUTUP

Demikian Laporan Praktikum Web I ini penulis paparkan mengenai materi


praktikum yang menjadi pokok bahasan dalam laporan ini, tentunya masih banyak
kekurangan dan kelemahannya.
Penulis sangat berharap kritik dan saran dari Dosen pengajar study Web I
untuk perbaikan yang lebih baik.

Oleh: Diperiksa oleh: Disetujui oleh:

9
LASMARIA HTB RAHMAD SANTOSO,Amd MUHAMMAD SYAFII, S.Kom,M.Kom
NIM. 201201030461 Asisten Lab 2 Dosen Pengajar

10