Scribd
Unggah
34 tayangan24 halaman

2 - Penggunaan Form Pada Dokumen HTML

Diunggah oleh

januarkristian2
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
34 tayangan24 halaman

2 - Penggunaan Form Pada Dokumen HTML

Diunggah oleh

januarkristian2
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 24

Penggunaan Form

pada halaman web


Achmad Khaerudin
Tujuan Pembelajaran
Setelah menyelesaikan bab ini, siswa diharapkan dapat :
 Menjelaskan konsep formulir dalam halaman web
 Menjelaskan tag-tag HTML untuk formulir dalam halaman web
 Menjelaskan berbagai metode inputan formulir dalam halaman web
 Menentukan prosedur pembuatan format formulir dalam halaman web
 Merancang program untuk menampilkan formulir dalam halaman web
 Membuat program tampilan formulir dalam halaman web
 Menguji program tampilan formulir dalam halaman web
Apa itu
Form
Form dalam Halaman Web
 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.
 Masukan dari pengguna tersebut diolah menggunakan bahasa pemrograman
web, baik secara server side scripting(misalkan PHP, JSP) ataupun client-side
scripting ( javascript).
 Form dapat digunakan untuk berbagai keperluan seperti keperluan login,
transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari
pengguna, menawarkan barang /jasa secara on-line dan sebagainya.
Penulisan Form
<Form metode=”post/get” action=”….”>
……
……
……
</form>
Metode Pengiriman Data
● Metode GET adalah metode yang digunakan oleh browser untuk meminta
server mengirim kembali resource yang diberikan : "hey, server, kirimkan
resource ini." Dalam hal ini, browser mengirimkan sebuah body kosong.
Karena body kosong, jika formulir dikirim menggunakan metode ini, data
yang dikirim ke server ditambahkan ke URL

● Metode POST sedikit berbeda, POST mengirimkan server untuk meminta


respon yang memperhitungkan data yang tersedia dalam request. HTTP : "
hey Server, lihatlah data ini dan saya mengirimkan kembali hasil yang baik. "
Jika form yang dikirim dengan menggunakan data metod POST akan
ditambahkan dalam body dari HTTP yang request.
Contoh Pengiriman data dengan get
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<form action="http://foo.com"
method="get">
<input name="say" value="Hallo">
<input name="to" value="Semua">
<button>kirimkan salam</button>
</form
</body>
</html>
Contoh Pengiriman data dengan post
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<form action="http://foo.com"
method="post">
<input name="say" value="Hall">
<input name="to" value="Semua">
<button>kirim POST</button>
</form>
</body>
</html>
Elemen <input> pada html form
 Input type text digunakan untuk inputan data berupa text tulisan sebanyak 1 baris
 Input type password digunakan untuk inputan berupa password sehingga tulisannya
ditutupi dengan simbol *

<form>
First name: <input type=“text” name=“firstname”><br />
Last name: <input type=“text” name=“lastname”>
</form>

<form>
Password: <input type=“password” name=“pwd”>
</form>
Elemen <input> pada html form
 Text area seperti text field namun bedanya adalah text area dapat terdiri dari beberapa
line/baris dan kolom
 Label digunakan untuk mendefinisikan penanda pada tag elemen <input>

<textarea rows=“4” cols=“50”>


Ini adalah mata pelajaran Pemrograman Dasar. Pemrograman Dasar yang dipelajari adalah dasar-
dasar HTML yang merupakan sebuah pemrograman dengan menggunakan kode HTML.
</textarea>

<form action="">
<label for="buku">Buku</label>
<input type="radio“ name="barang" id="buku“ value="buku"><br>
</form>
Elemen <input> pada html form
 Radio button digunakan untuk memilih inputan hanya satu pilihan saja. Contoh: Jenis kelamin
 Check box digunakan apabila pilihan lebih dari satu

<form>
<input type=“radio” name=“jk” value=“pria”>Laki-laki<br/>
<input type=“radio” name=“jk” value=“wanita”>Perempuan
</form>

<form>
<input type=“checkbox” name=“kendaraan” value=“Mobil” />Mobil <br />
<input type=“checkbox” name=“kendaraan” value=“Motor” />Motor
</form>
Elemen <input> pada html form
 Drop Down List/Combo Box merupakan inputan html form berupa pilihan list kebawah
 Optgroup digunakan untuk mendefinisikan group options yang berhubungan satu sama lain dalam
bentuk drop-down list, merupakan bagian dari tag elemen <select>

<form action=“”> <select>


<select name=“kendaraan”> <optgroup label="Swedish Cars">
<option value=“volvo”>Volvo</option> <option value="volvo">Volvo</option>
<option value=“saab”>Saab</option> <option value="saab">Saab</option>
<option value=“fiat”>Fiat</option> </optgroup>
<option value=“audi”>Audi</option> <optgroup label="German Cars">
</select> <option value="mercedes">Mercedes</option>
</form> <option value="audi">Audi</option>
</optgroup>
</select>
Elemen <input> pada html form
 Fieldset digunakan untuk mengelompokan elemen yang berhubungan satu sama lain
 Legend digunakan untuk mendefinisikan judul elemen <fieldset>

<form>
<fieldset>
<legend>Personalia : </legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form
Elemen <input> pada html form
 Datalist merupakan Daftar/list khusus yang didefinisikan dalam elemen tag <input> (elemen baru
HTML 5)

<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Elemen <input> pada html form
 Output menampilkan hasil dari suatu perhitungan (elemen baru HTML 5)
 Keygen merupakan generator key-pair field untuk form (elemen baru HTML 5)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0
<input type="range" id="a“ value="50">100
+ <input type="number" id="b“ value="50">
=<output name="x" for="ab"></output>
</form>

<form action="“ method="get">


Username: <input type="text“ name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
Elemen <input> pada html form
 Button dan Submit digunakan untuk mengirim data
 Reset digunakan untuk mengosongkan inputan

< button type=button> <input type=submit>


< button type=button name=name> <input type=submit name=name>
< button type=button value=value> <input type=submit value=value>

<!doctype html>
<html>
<body>
<button type="button" onclick="alert('hallo
selamat datang')">
klik mulai !</button>
</body>
</html>
THANK YOU
Praktikum
Latihan 1
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"> <br><br>
Kelas: <input type="text" name="kelas" maxlength="2"><br><br>
No : <input type="text" name="nomor" value="10"><br><br>
Hobby: <input type="text" name="hobby" size="8"><br><br>
Password: <input type="password" name="password"><br><br>
<input type="submit" name="submit"value="Submit">&nbsp;&nbsp;&nbsp;
<input type="reset“ name="reset" value="Reset">
</form>
</body>
</html>
Latihan 2
Latihan 3
Latihan 4
Latihan 5
TUGAS
1. Buatlah sebuah halaman website
tentang formulir pendaftaran online
masuk sekolah !
2. Gunakan tabel untuk merapikan
form dan gabungkan beberapa kontrol
elemen HTML form yang sudah
dipelajari !

Anda mungkin juga menyukai