Formulir HTML

Formulir HTML digunakan untuk mengumpulkan berbagai jenis input pengguna.

<form> elemen

Formulir HTML digunakan untuk mengumpulkan input pengguna.

<form> elemen mendefinisikan formulir HTML:

Contoh

<form>
 .
form elements
 .
</form>

Formulir HTML mengandungelemen formulir.

Elemen formulir merujuk kepada jenis-jenis elemen input, kotak centang, tombol pilihan tunggal, tombol submit, dan lainnya.

Elemen <input>

<input> elemen yang paling pentingelemen formulir.

Elemen <input> memiliki banyak bentuk, menurut yang berbeda type properti

Jenis yang digunakan di bab ini adalah:

Jenis Deskripsi
text Definisi input teks biasa.
radio Definisi input tombol pilihan tunggal (memilih salah satu pilihan)
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 pertama:<br>
<input type="text" name="firstname">
<br>
 Nama belakang:<br>
<input type="text" name="lastname">
</form>

Cuba sendiri

Dalam pelayar, hal ini terlihat seperti ini:

Nama depan:


Nama belakang:

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 memilih salah satu dari jumlah pilihan terbatas:

Contoh

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

Cuba sendiri

Tombol pilihan tunggal terlihat seperti ini di pelayar:

Laki-laki

Wanita

Tombol submit

<input type="submit"> Definisi untuk mengirim kepadaProgram pemroses formulir(form-handler)SubmitTombol formulir

Program pemroses formulir biasanya adalah halaman pelayan yang mengandung skrip untuk mengelola data input.

Program pemroses formulir berada di action Didefinisikan dalam properti:

Contoh

<form action="action_page.php">
Nama pertama:<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>

Cuba sendiri

Dalam pelayar, hal ini terlihat seperti ini:

Nama depan:


Nama belakang:


Properti Action

Properti actionDefinisi tindakan yang dijalankan saat mengirimkan formulir.

Cara biasa untuk menyubmit formulir ke pelayan adalah menggunakan tombol submit.

Biasanya, formulir akan disubmit ke halaman web di pelayan web.

Dalam contoh di atas, disediakan skrip pelayan untuk mengendalikan formulir yang disubmit:

<form action="action_page.php">

Jika attribute action diabaikan, action akan diatur ke halaman semasa.

Attribute Method

Attribute methodTentukan HTTP method yang digunakan untuk menghantar borang (GET atau POST)

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

atau:

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

Ketika hendak menggunakan GET?

Anda boleh menggunakan GET (default):

Jika penghantaran borang adalah pasif (contohnya kerucut carian penuh), dan tiada maklumat sensitif.

Ketika anda menggunakan GET, data borang di dalam pelayar alamat halaman adalah dapat dilihat:

action_page.php?firstname=Mickey&lastname=Mouse

Keterangan:GET paling sesuai untuk penghantaran data kecil. Pelayar akan menetapkan had kapasiti.

Ketika hendak menggunakan POST?

Anda sepatutnya menggunakan POST:

Jika borang sedang mengemaskini data, atau mengandungi maklumat sensitif (contohnya kata laluan).

Keamanan POST lebih baik kerana data yang disemak di dalam pelayar alamat halaman adalah tak dapat dilihat.

Attribute Nama

Setiap medan input mesti ditetapkan seorang name bagi untuk disemak dengan betul untuk disemak.

Contoh ini hanya akan menghantar "Nama belakang" medan input:

Contoh

<form action="action_page.php">
Nama pertama:<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>

Cuba sendiri

Guna <fieldset> untuk gabungkan data borang.

<fieldset> Elemen digabungkan untuk data yang relevan dalam borang.

<legend> Elemen <fieldset> digunakan untuk menentukan tajuk.

Contoh

<form action="action_page.php">
<fieldset>
<legend> Maklumat peribadi:</legend>
Nama pertama:<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>

Cuba sendiri

HTML kod ini akan kelihatan seperti ini di pelayar web:

Informasi pribadi:
Nama depan:


Nama belakang:


Atribut Form HTML

Elemen <form> HTML, 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 dikirim (default: charset halaman).
action Tentukan alamat tempat formulir dikirim (URL) (halaman pengiriman).
autocomplete Tentukan apakah peramban harus melengkapkan formulir secara otomatis (default: aktif).
enctype Tentukan pengkodean data yang dikirim (default: url-encoded).
method Tentukan metode HTTP yang digunakan untuk mengirim formulir (default: GET).
name Tentukan nama yang digunakan untuk mengenali formulir (untuk DOM gunakan: 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.