Formulir HTML

Apa itu HTML Form

HTML form adalah salah satu elemen dalam web development yang memungkinkan
user untuk memasukkan data dan berinteraksi dengan website. Elemen ini biasanya
digunakan untuk pendaftaran, login, pencarian, dan banyak lagi.

Struktur dari HTML form cukup sederhana, biasanya terdiri dari elemen yang di
dalamnya terdapat berbagai jenis kontrol seperti teks, tombol, kotak centang, dan
lain-lain.

Bagi developer, adanya HTML form tidak hanya membantu dalam membangun
website yang responsif dan mudah digunakan, tetapi juga memungkinkan
pengumpulan data dari user dengan cara yang efisien.

Contoh Form

Halaman 1
Pemrosesan form terbagi menjadi : Client Side dan Server Side
Pembahasan kali ini pad form dari sisi Clint Side, dari sisi user.

Formulir HTML digunakan untuk mengumpulkan input/masukan dari user/pengguna.

Input pengguna paling sering dikirim ke server untuk diproses.

Form HTML terdiri dari :

1. Elemen
2. Atribut

1. Elemen HTML
Elemen dalam formulir HTML adalah sebuah komponen yang menyusun dokumen
formulir dalam HTML.

Jenis jenis elemen Form dalam HTML

a. Elemen Form
Elemen HTML <form>digunakan untuk membuat formulir HTML untuk input
pengguna:

<form>
.
form elements
.
</form>

Elemen <form>adalah wadah untuk berbagai jenis elemen masukan, seperti:

bidang teks, kotak centang, tombol radio, tombol kirim, dan lain lain.

Halaman 2
b. Elemen <input> / masukan

Elemen HTML <input>adalah elemen formulir yang paling banyak digunakan.

Suatu <input>elemen dapat ditampilkan dalam berbagai cara, bergantung pada

atributnya type.

Berikut beberapa contohnya:

c. Elemen Type

Mendefinisikan <input type="text">bidang input satu baris untuk input teks.

d. Elemen <label>

Tag <label>mendefinisikan label untuk banyak elemen formulir.

Elemen tersebut <label>berguna bagi pengguna membaca tulisan pada layar,

karena pembaca tulisan pada layar akan membacakan label dengan lantang saat
pengguna berfokus pada elemen input.

Elemen ini <label>juga membantu pengguna yang mengalami kesulitan mengklik

wilayah yang sangat kecil (seperti tombol radio atau kotak centang) - karena ketika
pengguna mengklik teks di dalam elemen <label>, tombol radio/kotak centang
akan dialihkan.

Atribut fortag <label>harus sama dengan idatribut elemen <input>untuk mengikat

keduanya.

2. Atribut
Atribut adalah kata kunci khusus yang berada di dalam tag pembuka. Atribut juga
disebut sebagai modifier yang akan menentukan perliaku dari elemen.

Atribut dalam form antara lain.

a. Atribut Action / Tindakan

Atribut action mendefinisikan tindakan yang akan dilakukan saat formulir
dikirimkan.

Halaman 3
 Biasanya data formulir dikirim ke file di server ketika pengguna mengklik tombol
kirim.
Pada contoh di bawah, data formulir dikirim ke file bernama "action_page.php".
File ini berisi skrip sisi server yang menangani data formulir:

Contoh
Saat dikirimkan, kirim data formulir ke "action_page.php":

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

b. Atribut Target / Sasaran

Atribut target menentukan tempat untuk menampilkan respons yang diterima

setelah mengirimkan formulir.

Atribut targetdapat memiliki salah satu dari nilai berikut:

Contoh

Di sini, hasil yang dikirimkan akan terbuka di tab browser baru:

<form action="/action_page.php" target="_blank">

c. Atribut Metode

Atribut methodmenentukan metode HTTP yang akan digunakan saat

mengirimkan data formulir.

Data formulir dapat dikirim sebagai variabel URL (dengan method="get") atau
sebagai transaksi kiriman HTTP (dengan method="post").

Metode HTTP default saat mengirimkan data formulir adalah GET.

Contoh
Contoh ini menggunakan metode GET saat mengirimkan data formulir:

Halaman 4
 <form action="/action_page.php" method="get">

Contoh

Contoh ini menggunakan metode POST saat mengirimkan data formulir:

<form action="/action_page.php" method="post">

Elemen HTML

Elemen akan dijelaskan lebih lengkap pada bagian ini, jenis jenis elemen dalam HTML
antara lain :

Elemen HTML <form>

Elemen HTML <form>dapat berisi satu atau lebih elemen formulir berikut:
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

Elemen <input>
Salah satu elemen bentuk yang paling banyak digunakan adalah <input>elemen.
Elemen <input>dapat ditampilkan dalam beberapa cara, bergantung pada atributnya
type.

Contoh
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

Elemen <label>
Elemen <label>mendefinisikan label untuk beberapa elemen formulir.
Elemen ini <label>berguna bagi pengguna pembaca layar, karena pembaca layar akan
membacakan label dengan lantang saat pengguna fokus pada elemen input.

Elemen ini <label>juga membantu pengguna yang mengalami kesulitan mengklik

wilayah yang sangat kecil (seperti tombol radio atau kotak centang) - karena ketika
pengguna mengklik teks di dalam elemen <label>, tombol radio/kotak centang akan
dialihkan.

Atribut fortag <label>harus sama dengan idatribut elemen <input>untuk mengikat

keduanya.

Halaman 5
Elemen <select>
Elemen <select>mendefinisikan daftar drop-down:

Contoh

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Elemen <textarea>
Elemen ini <textarea>mendefinisikan kolom input multi-baris (area teks):

Contoh
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Atribut rowsmenentukan jumlah baris yang terlihat di area teks.

Atribut colsmenentukan lebar area teks yang terlihat.

Elemen <button> / tombol

Elemen <button>mendefinisikan tombol yang dapat diklik:

Contoh
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Elemen <fieldset> dan <legend>

Elemen <fieldset>digunakan untuk mengelompokkan data terkait dalam suatu
formulir.
Elemen <legend>mendefinisikan keterangan untuk <fieldset>elemen tersebut.

Contoh
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Halaman 6
Elemen <keluaran>
Elemen <output>mewakili hasil penghitungan (seperti yang dilakukan oleh skrip).

Jenis Input Masukan HTML

Elemen Form HTML

Berikut beberapa elemen utama form HTML:

Inputs
Elemen < input > adalah komponen utama dalam form HTML. Inputs membuat
pengunjung bisa memasukkan data, seperti teks, angka, atau bahkan file.

Ada berbagai jenis input, seperti 'text', 'password', dan 'checkbox' yang bisa kamu
gunakan sesuai kebutuhan.

Inputs digunakan dengan tag < input > dan tipe yang sesuai, misalnya < input
type="text" > untuk bidang teks.

Contoh: input nama pengguna dan kata sandi

Labels
berfungsi untuk memberikan keterangan atau judul pada input. Dengan kata lain,
labels membantu user memahami apa yang harus dimasukkan di kolom tertentu.
Misalnya, label "Nama" menunjukkan bahwa user harus memasukkan namanya di
kolom tersebut.

Labels dideklarasikan dengan tag < label >, seperti < label for="nama">Nama.

Contoh: menambahkan keterangan atau judul pada input.

Buttons
< button > dalam form HTML biasanya digunakan untuk mengirimkan form. Ada
beberapa jenis buttons, seperti 'submit' yang digunakan untuk mengirimkan data
atau 'reset' yang akan mengosongkan semua bidang input.

Buttons dapat dibuat dengan < input type="submit" > atau < button
type="submit">Kirim.

Contoh: tombol kirim dan hapus

Halaman 7
Select
Elemen < select > memungkinkan user memilih beberapa daftar opsi yang disediakan.
Select bisa berbentuk dropdown menu atau list yang dapat dipilih lebih dari satu.

Elemen ini dideklarasikan dengan < select > dan di dalamnya terdapat opsi yang
didefinisikan dengan < option >, seperti < select> < option > Pilihan 1 .

Contoh: dropdown menu Bahasa

Textarea
Jika kamu ingin user dapat menulis teks dalam beberapa baris, seperti komentar atau
alamat, kamu bisa menggunakan elemen < textarea >.
Textarea dipakai untuk input teks multi-baris, ditulis sebagai < textarea> .

Contoh: teks berbasis baris

Fieldset dan Legend

Fieldset digunakan untuk mengelompokkan elemen-elemen terkait dalam form. Di sisi
lain, legend berfungsi sebagai judul untuk grup tersebut. Kedua elemen ini membantu
dalam membuat form yang terstruktur dan mudah dipahami.
Fieldset dideklarasikan dengan < fieldset > dan judul grup didefinisikan dengan <
legend >, seperti < fieldset > < legend > Judul Grup< /legend >< /fieldset >.

Contoh: mengelompokkan elemen terkait

Radio Buttons
Radio buttons membuat user bisa memilih salah satu dari beberapa opsi, seperti
memilih jenis kelamin.
Radio buttons ditulis menggunakan < input type="radio" >, di mana setiap pilihan
memiliki tipe "radio".

Contoh: memilih jenis kelamin

Halaman 8
Check Boxes
Berikutnya adalah checkbox atau cek lis. Bedanya dengan radio, kita bisa memilih
lebih dari satu pilihan dalam satu set opsi.

Contoh: check box

ELEMEN INPUT
Atribut yang bisa digunakan dalam elemen input HTML sebagai berikut :
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Pembahasan jenis input dalam form HTML.

Input type text.

<input type="text">mendefinisikan bidang input teks satu baris :

<form>
<label for="fname">First name:</label><br>

Halaman 9
 <input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Input type password.

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Input submit.

<input type="submit">mendefinisikan tombol untuk mengirimkan data formulir ke

penangan formulir .

Pengendali formulir biasanya merupakan halaman server dengan skrip untuk

memproses data masukan.
Pengendali formulir ditentukan dalam atribut formulir action:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Input reset.
<input type="reset">mendefinisikan tombol reset yang akan mengatur ulang semua
nilai formulir ke nilai defaultnya:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

Input radio button.

<input type="radio">mendefinisikan tombol radio .

Halaman 10
Tombol radio memungkinkan pengguna memilih HANYA SATU dari sejumlah pilihan:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

Input check box.

<input type="checkbox">mendefinisikan kotak centang .

Kotak centang memungkinkan pengguna memilih opsi NOL atau LEBIH BANYAK dari
sejumlah pilihan terbatas.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Input button.
Input untuk membuat tombol (button).
<input type="button">mendefinisikan tombol :

Contoh

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Input color.
Input untuk memilih warna (color).

Digunakan <input type="color">untuk kolom input yang harus berisi warna.

Tergantung pada dukungan browser, pemilih warna dapat muncul di kolom input.

Contoh

<form>
<label for="favcolor">Select your favorite color:</label>

Halaman 11
 <input type="color" id="favcolor" name="favcolor">
</form>

Input tanggal / date.

Input untuk memilih tanggal (date).

Ini <input type="date">digunakan untuk kolom input yang harus berisi tanggal.

Bergantung pada dukungan browser, pemilih tanggal dapat muncul di kolom input.

Contoh

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

Kita juga dapat menggunakan atribut min dan max untuk menambahkan batasan
pada tanggal:

Contoh

<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-
02">
</form>

Input tanggal dan waktu lokal.

Input untuk memilih waktu dan tanggal local.

Menentukan <input type="datetime-local">kolom input tanggal dan waktu, tanpa

zona waktu.

Bergantung pada dukungan browser, pemilih tanggal dapat muncul di kolom input.

Contoh

<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Halaman 12
Input email.
Input untuk memasukkan email.

Ini <input type="email">digunakan untuk kolom input yang harus berisi alamat email.

Tergantung pada dukungan browser, alamat email dapat divalidasi secara otomatis
saat dikirimkan.

Beberapa ponsel cerdas mengenali jenis email, dan menambahkan ".com" ke

keyboard untuk mencocokkan masukan email.

Contoh

<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

Input gambar/image.
Input untuk memasukkan gambar sebagai tombol kirim.

Mendefinisikan <input type="image">gambar sebagai tombol kirim.

Jalur ke gambar ditentukan dalam srcatribut.

Contoh

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Input file.
Input untuk memasukkan file, dokumen.

Mendefinisikan <input type="file">bidang pemilihan file dan tombol "search" untuk

mengunggah file.

Contoh

<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Halaman 13
Input bulan/month.
Input untuk memasukkan bulan.

Memungkinkan <input type="month">pengguna untuk memilih bulan dan tahun.

Bergantung pada dukungan browser, pemilih tanggal dapat muncul di kolom input.

Contoh

<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input nomor/number.
Input untuk memasukkan nomor ke dalam form.

Mendefinisikan <input type="number">bidang input numerik .

Anda juga dapat mengatur batasan nomor mana yang diterima.

Contoh berikut menampilkan kolom input numerik, tempat Anda dapat memasukkan
nilai dari 1 hingga 5:

Contoh

<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Input range (antara).

Input untuk memasukkan range, nilai antara ke dalam form.

Mendefinisikan <input type="range">kontrol untuk memasukkan angka yang nilai

pastinya tidak penting (seperti kontrol penggeser). Rentang defaultnya adalah 0
hingga 100. Namun, Anda dapat menetapkan batasan pada angka apa yang diterima
dengan atribut min, max, dan step:

Contoh
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Halaman 14
Input telepon (tel).
Input untuk memasukkan nomor telepon ke dalam form.

Digunakan <input type="tel">untuk kolom input yang harus berisi nomor telepon.

Contoh

<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Input url (alamat url).

Input untuk memasukkan alamat URL ke dalam form.

Ini <input type="url">digunakan untuk kolom input yang harus berisi alamat URL.

Bergantung pada dukungan browser, bidang url dapat divalidasi secara otomatis saat
dikirimkan.

Beberapa ponsel cerdas mengenali jenis url, dan menambahkan ".com" ke keyboard
untuk mencocokkan masukan url.

Contoh

<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Latihan Membuat Form

Halaman 15
form.html

Halaman 16
Halaman 17
Halaman 18
Form dengan filedset dan legend

formfielsetlegend.html

Halaman 19
Form dengan Tabel

formtabel.html

TUGAS 1.
Buatlah sebuah form seperti tampilan dibawah

Halaman 20
LATIHAN 2
Buatlah form dengan table seperti tampilan dibawah

Halaman 21
Halaman 22