HTML Formulir

<Form> Elemen

Bentuk HTML digunakan untuk mengumpulkan input pengguna.

The <form> elemen mendefinisikan bentuk HTML:

Contoh

<form>
.
form elements
.
</form>

Bentuk HTML mengandung unsur bentuk .

Elemen bentuk berbagai jenis elemen input, checkbox, tombol radio, tombol submit, dan banyak lagi.

---

<Input> Elemen

The <input> elemen yang paling penting bentuk elemen .

<Input> elemen memiliki banyak variasi, tergantung pada jenis atribut.

Berikut adalah jenis-jenis yang digunakan dalam bab ini:

Jenis	Deskripsi
teks	Mendefinisikan input teks biasa
radio	Mendefinisikan tombol radio masukan (untuk memilih salah satu dari banyak pilihan)
menyerahkan	Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)

Text Input

<Input type = "text"> mendefinisikan input lapangan satu-line untuk input teks :

Contoh

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

Ini adalah bagaimana hal itu akan terlihat seperti dalam browser:

First name:


Last name:

Keterangan : Bentuk itu sendiri tidak terlihat. Juga mencatat bahwa lebar default kolom teks adalah 20 karakter.

Tombol radio Masukan

<Input type = "radio"> mendefinisikan tombol radio .
Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan:

Contoh

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

Male
Female

 

Submit Tombol

<Input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir untuk bentuk-handler .

Bentuk-handler biasanya halaman server dengan script untuk memproses input data.

Bentuk-handler ditentukan dalam form tindakan atribut:

Contoh

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Johan Andy">
<br>
Last name:<br>
<input type="text" name="lastname" value="Agasi">
<br><br>
<input type="submit" value="Submit">
</form>

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

First name:



Last name:

 

Atribut Aksi

The tindakan atribut mendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan.

Cara yang umum untuk menyerahkan formulir ke server, adalah dengan menggunakan tombol kirim.

Biasanya, formulir tersebut diajukan ke halaman web pada server web.

Dalam contoh di atas, script sisi server yang ditentukan untuk menangani formulir yang diajukan:

<form action="action_page.php">

atau:

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

 

Ketika Menggunakan GET?

Anda dapat menggunakan GET (metode default):

Jika pengiriman formulir pasif (seperti permintaan mesin pencari), dan tanpa informasi sensitif.

Bila Anda menggunakan GET, data form akan terlihat di alamat halaman:

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

Keterangan : GET paling cocok untuk jumlah pendek data. Keterbatasan ukuran ditetapkan pada browser Anda. 

Ketika Menggunakan POST?

Anda harus menggunakan POST:

Jika formulir adalah pemutakhiran data, atau mencakup informasi sensitif (password).

POST menawarkan keamanan yang lebih baik karena data yang diajukan tidak terlihat dalam alamat halaman.

---

Nama Atribut

Untuk diserahkan dengan benar, masing-masing bidang masukan harus memiliki nama atribut.
Contoh ini hanya akan menyerahkan "Nama belakang" field input:

Contoh

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

 

Pengelompokan Form Data dengan <fieldset>

The <fieldset> kelompok elemen data yang terkait dalam formulir.

The <Legenda> elemen mendefinisikan keterangan untuk <fieldset> elemen.

Contoh

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Johan Andy">
<br>
Last name:<br>
<input type="text" name="lastname" value="Agasi">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

Personal information:

First name:


Last name:

 

Form HTML Atribut

HTML <form> elemen, dengan semua atribut yang mungkin ditetapkan, akan terlihat seperti ini:

Contoh

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

Berikut adalah daftar <form> atribut:

Atribut	Deskripsi
menerima-charset	Menentukan charset yang digunakan pada pengajuan (default: halaman charset).
tindakan	Menentukan alamat (url) di mana untuk mengirimkan formulir (default: halaman mengirimkan).
autocomplete	Menentukan apakah browser harus AutoComplete bentuk (default: on).
enctype	Menentukan encoding dari data yang diajukan (default: adalah url-dikodekan).
metode	Menentukan metode HTTP digunakan ketika mengirimkan formulir (default: GET).
nama	Menentukan nama yang digunakan untuk mengidentifikasi bentuk (untuk penggunaan DOM: document.forms.name).
novalidate	Menentukan bahwa browser tidak harus memvalidasi formulir.
target	Menentukan target alamat dalam atribut aksi (default: _self).