Kompetensi Dasar :

3.6 Menerapkan format formulir pada halaman web

4.6 Membuat kode html untuk menampilkan formulir pada halaman web

Materi Pokok :

1. Konsep formulir dalam HTML.

2. Penggunaan tag form pada HTML.

3. Membuat program tampilan formulir dalam halaman web.

Konsep Formulir Dalam HTMl

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.

HTML form digunakan untuk memberikan data ke sebuah server tergantung dari jenis data yang akan dikirimkan ke 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

    • Sebuah HTML form dapat memiliki input-input element antara lain :

  • text field
  • checkbox
  • radio button
  • submit button, dan lain lain


    • Sebuah form juga terdapat :

  • select list
  • textarea
  • fieldset
  • legend
  • element label
  • element label



    • Penggunaan Tag Form Pada HTML

    Tag yang digunakan untuk membuat HTML form adalah <form>.



    Nama TagKeterangan/Fungsi
    <form> Tag digunakan untuk membuat sebuah form HTML untuk input pengguna.
    <input> Tag digunakan untuk membuat sebuah kontrol input.
    <textarea> Tag digunakan untuk membuat sebuah kontrol input multi baris (text area).
    <button> Tag digunakan untuk membuat sebuah tombol yang dapat diklik.
    <select> Tag digunakan untuk membuat sebuah daftar drop-down.
    <optgroup> Tag digunakan untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down.
    <option> Tag digunakan untuk membuat sebuah pilihan dalam daftar drop-down.
    <label> Tag digunakan untuk membuat sebuah label untuk sebuah elemen <input>.
    <fieldlist> Tag digunakan untuk membuat grup unsur terkait dalam bentuk.
    <fieldset> Tag digunakan untuk merepresentasikan pengelompokkan daftar input pada sebuah form.
    <legend> Tag digunakan untuk membuat sebuah caption untuk sebuah elemen <fieldset, <figure>, atau <details>.
    <datalist> Tag digunakan untuk menentukan daftar pilihan yang ditetapkan untuk kontrol input, (Tag baru HTML5).
    <keygen> Tag digunakan untuk membuat key-pair generator kolom input, (Tag baru HTML5).
    <output> Tag digunakan untuk membuat hasil perhitungan, (Tag baru HTML5).


    Elemen <input> HTML Forms

    Hal yang terpenting dari element form adalah elemen <input>. Elemen <input> digunakan untuk mengambil informasi dari user. 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:


    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.

    3) Radio Button
    Radio button digunakan untuk memilih inputan hanya satu pilihan saja. Contoh: Jenis kelamin.

    4) Drop Down List / Combo Box

    5) Check Box
    Perbedaan dengan radio button adalah dapat mencentang / memilih lebih dari satu pilihan.

    Contohnya:


    <!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mengenal Form Nusantech Academy</title>
	<body>
	<form action="latihan.html" method="get">
		<p>Silahkan isi data berikut :</p>
		Nama        : <input type="text" name="nama"> <br />
		Jenis Kelamin :
			<input type="radio" name="jenkel" value="laki-laki">Laki-laki
			<input type="radio" name="jenkel" value="perempuan">Perempuan
			<br />
		Username    : <input type="text" name="username"> <br />
		Password    : <input type="password" name="password"> <br />
		Course yang diikuti:
		<input type="checkbox" name="html">HTML & CSS
		<input type="checkbox" name="javascript">Javascript
		<input type="checkbox" name="react">React JS
		<input type="checkbox" name="node">Node Js 
		<br /><br />
		<button type="submit" name="submit" value="simpan">Simpan</button>
	</form>
	</body>
	</html>

    Hasilnya seperti ini:



    6) Text Area
    Text area seperti text field namun bedanya adalah text area dapat terdiri dari beberapa line/baris dan kolom.

    Contohnya :


    <!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Mengenal Form Nusantech Academy</title>
		<style>
			#alamat{
				font-size: 10px;
					color: red;
				font-style: normal;
			}
		</style>
		<body>
		<form action="latihan.html" method="get">
				<p>Alamat:</p>
				<textarea name="alamat" id="alamat" cols="30" rows="10"></textarea>
		</form>
		</body>
		</html>

    Hasilnya seperti ini:



    7 ) Tag Select
    Tag <select> ini digunakan untuk memberikan pilihan pada user dari data yang sudah tersedia. Dalam tag <select> terdapat tag <option> yang digunakan untuk membuat pilihan data.

    Contohnya :


    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mengenal Form Nusantech Academy</title>
<body>
<form action="latihan.html" method="get">
	<p>Pilih Course:</p>
	<select name="select">
		<option value="html">HTML</option>
		<option value="javascript">Javascript</option>
		<option value="react">React JS</option>
		<option value="node">Node JS</option>
	</select>
</form>
</body>
</html>

    Hasilnya seperti ini:




    Membuat program tampilan formulir dalam halaman web

    Form ini berisi :

  • Inputan nama lengkap.
  • Inputan username.
  • Inputan password.
  • Inputan jenis kelamin.
  • Inputan tanggal lahir.
  • Inputan pilih course.
  • Inputan agama.
  • Inputan email.
  • Inputan alamat.

    • Langsung saja kita buat form nya.


    <!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Mengenal Form Nusantech Academy</title>
	<body>
	<form action="latihan.html" method="POST">
		<fieldset>
			<legend><h1>Formulir Peserta Nusantech Academy</h1> </legend>
		<p>
			<label>Nama :</label>
			<input type="text" name="nama" placeholder="Masukan nama lengkap">
		</p>
		<p>
			<label>Username :</label>
			<input type="text" name="username" placeholder="Masukan username">
		</p>
		<p>
			<label>Password :</label>
			<input type="text" name="password" placeholder="Masukan password">
		</p>
		<p>
			<label>Jenis Kelamin :</label>
			<input type="radio" name="jenkel" value="laki-laki">Laki-laki
			<input type="radio" name="jenkel" value="perempuan">Perempuan
		</p>
		<p>
			<label>Tanggal Lahir :</label>
			<input type="date" name="tanggal">
		</p>
		<p>
			<label>Agama :</label>
			<select name="agama">
				<option value="budha">Budha</option>
				<option value="hindu">Hindu</option>
				<option value="islam">Islam</option>
				<option value="katholik">Kristen Katholik</option>
				<option value="protestan">Kristen Protestan</option>
			</select>
		</p>
		<p>
			<label>Email :</label>
			<input type="email" name="email" placeholder="Masukkan email">
		</p>
		<p>
			<label>Pilih Course:</label>
			<input type="checkbox" name="html">HTML & CSS
			<input type="checkbox" name="javascript">Javascript
			<input type="checkbox" name="react">React JS
			<input type="checkbox" name="node">Node Js 
		</p>
		<p>
			<p>Alamat :</p>
			<textarea name="alamat"cols="50" rows="10"></textarea>
		</p>
		<p>
			<input type="submit" name="submit" value="Daftar">
		</p>
		</fieldset>
</form>
</body>
</html>

    Hasilnya seperti ini:



    Dan ini hasil yang sudah diisi datanya :




    Latihan

    Kontrol Text


    Kontrol Textarea


    Kontrol Radiobutton


    Kontrol Checkbox


    Kontrol Listbox


    Kontrol Combobox


    Kontrol Password


    Kontrol Reset




    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) !