Formulir HTML

Formulir HTML digunakan untuk mengumpulkan berbagai jenis input pengguna.

<form> elemen

Formulir HTML digunakan untuk mengumpulkan input pengguna.

<form> elemen menentukan formulir HTML:

Contoh

<form>
 .
form elements
 .
</form>

Formulir HTML mengandungelemen formulir。

Elemen formulir mengacu pada jenis-jenis elemen input yang berbeda, kotak centang, tombol pilihan tunggal, tombol submit, dan sebagainya.

Elemen <input>

<input> elemen ini adalah yang paling pentingelemen formulir。

Elemen <input> memiliki banyak bentuk, berdasarkan type properti.

Ini adalah jenis yang digunakan di bab ini:

Tipe Deskripsi
text Definisi input teks biasa.
radio Definisi input tombol pilihan tunggal (memilih salah satu pilihan yang berbeda)
submit Definisi tombol submit (mengirimkan formulir)

Keterangan:Anda akan belajar lebih banyak tentang jenis input ini nanti di tutorial ini.

Input teks

<input type="text"> Definisi untukInput teksbidang input baris tunggal:

Contoh

<form>
 Nama depan:<br>
<input type="text" name="firstname">
<br>
 Nama belakang:<br>
<input type="text" name="lastname">
</form>

Coba sendiri

Di browser, hal ini akan kelihatan seperti ini:

Nama Depan:


Nama Terakhir:

Keterangan:Formulir itu sendiri tidak terlihat. Harap dicatat bahwa lebar default untuk bidang teks adalah 20 karakter.

Input tombol pilihan tunggal

<input type="radio"> DefinisiTombol pilihan tunggal。

Tombol pilihan tunggal memungkinkan pengguna untuk memilih salah satu opsi dari jumlah yang terbatas:

Contoh

<form>
<input type="radio" name="sex" value="male" checked>Laki-laki
<br>
<input type="radio" name="sex" value="female">Perempuan
</form>

Coba sendiri

Tombol pilihan tunggal kelihatan seperti ini di browser:

Laki-laki

Perempuan

Tombol submit

<input type="submit"> Definisi yang digunakan untukProgram penanganan formulir（form-handler）SubmitTombol formulir.

Program penanganan formulir biasanya adalah halaman server yang berisi skrip untuk menangani data input.

Program penanganan formulir berada di action Didefinisikan dalam properti:

Contoh

<form action="action_page.php">
Nama depan:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nama belakang:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Coba sendiri

Di browser, hal ini akan kelihatan seperti ini:

Nama Depan:


Nama Terakhir:


Properti Action

Properti actionDefinisi tindakan yang dijalankan saat mengirimkan formulir.

Percayaan umum untuk menyubmit formulir adalah menggunakan tombol submit.

Biasanya, formulir akan disubmit ke halaman web yang berada di server web.

Dalam contoh di atas, disebutkan skrip server yang ditugaskan untuk menangani formulir yang disubmit:

<form action="action_page.php">

Jika atribut action diabaikan, action akan diatur menjadi halaman saat ini.

Atribut Method

Atribut methodTentukan metode HTTP yang digunakan saat mengirim formulir (GET atau POST)

<form action="action_page.php" method="GET">

atau:

<form action="action_page.php" method="POST">

Kapan menggunakan GET?

Anda dapat menggunakan GET (metode baku):

Jika pengiriman formulir adalah pasif (contoh: pencarian mesin pencari) dan tidak ada informasi sensitif.

Ketika Anda menggunakan GET, data formulir terlihat di halaman alamat browser:

action_page.php?firstname=Mickey&lastname=Mouse

Keterangan:GET paling cocok untuk pengiriman data kecil. Peramban akan menetapkan batas kapasitas.

Kapan menggunakan POST?

Anda seharusnya menggunakan POST:

Jika formulir sedang mengupdate data atau mengandung informasi sensitif (contoh: sandi).

Keamanan POST lebih baik karena data yang disubmit di halaman alamat browser tidak terlihat.

Atribut Nama

Setiap bidang input harus diatur dengan atribut name untuk dapat disubmit dengan benar.

Contoh ini hanya akan mengirimkan bidang input "Nama belakang":

Contoh

<form action="action_page.php">
Nama depan:<br>
<input type="text" value="Mickey">
<br>
Nama belakang:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Coba sendiri

Menggunakan <fieldset> untuk menggabungkan data formulir.

<fieldset> Elemen menggabungkan data yang relevan dalam formulir.

<legend> Elemen <fieldset> menentukan judul.

Contoh

<form action="action_page.php">
<fieldset>
<legend>Informasi pribadi:</legend>
Nama depan:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Nama belakang:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

Coba sendiri

Kode HTML di atas akan terlihat seperti ini di browser:

Informasi Pribadi:
Nama Depan:


Nama Terakhir:


Atribut Form HTML

Elemen <form> HTML, yang telah diatur semua atribut yang mungkin, seperti ini:

Contoh

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

Berikut adalah daftar atribut <form>:

Atribut Deskripsi
accept-charset Tentukan charset yang digunakan dalam formulir yang disubmit (default: charset halaman).
action Tentukan alamat tempat formulir disubmit (URL) (halaman pengiriman).
autocomplete Tentukan apakah peramban harus mengisi otomatis formulir (default: aktif).
enctype Tentukan pengkodean data yang disubmit (default: url-encoded).
method Tentukan metode HTTP yang digunakan untuk mengirimkan formulir (default: GET).
name Tentukan nama yang digunakan untuk mengenali formulir (untuk DOM: document.forms.name).
novalidate Tentukan bahwa peramban tidak memverifikasi formulir.
target Tentukan tujuan alamat dalam atribut action (default: _self).

Keterangan:Anda akan belajar lebih banyak tentang atribut di bab di bawah ini.