Form HTML digunakan untuk mengumpulkan masukan pengguna.
Elemen <form> mendefinisikan bentuk HTML:
<form>
.
Elemen-elemen form
.
</form>
forms HTML mengandung elemen form.
Elemen Form adalah berbagai jenis elemen masukan, kotak centang, tombol radio, tombol kirim, dan banyak lagi.
Elemen <input>
Elemen <input> adalah elemen bentuk yang paling penting.
Elemen <input> memiliki banyak variasi, bergantung pada atribut tipe.
teks Mendefinisikan input teks normal
radio Mendefinisikan masukan tombol radio (untuk memilih salah satu dari banyak pilihan)
submit Mendefinisikan tombol kirim (untuk mengirimkan Form)
Catatan Anda akan belajar lebih banyak tentang jenis input nanti di tutorial ini.
Masukan teks / Teks Input
<input type = "text"> mendefinisikan field input satu baris untuk input teks:
Contoh
<form>
Nama depan: <br>
<input type = "text" name = "nama depan"> <br>
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</form>
Beginilah tampilannya seperti di browser:
First name:
Last name:
Catatan: Bentuk itu sendiri tidak terlihat. Perhatikan juga bahwa lebar default bidang teks adalah 20 karakter.
Masukan Tombol Radio / Radio Button Input
<input type = "radio"> mendefinisikan tombol radio.
Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan terbatas:
Contoh
<form>
<input type = "radio" name = "gender" value = "male" checked> Pria<br>
<input type = "radio" name = "gender" value = "female"> Wanita <br>
<input type = "radio" name = "jenis kelamin" value= "lainnya"> Lainnya
</form>
Beginilah cara kode HTML di atas akan ditampilkan di browser:
Male
Female
Other
Tombol kirim / Submit bottom
<input type = "submit"> mendefinisikan sebuah tombol untuk mengirimkan Form ke form-handler.
Form-handler biasanya merupakan halaman server dengan script untuk memproses data masukan.
Form-handler ditentukan dalam atribut tindakan form:
Contoh
<form action = "action_page.php">
Nama depan: <br>
<input type = "text" name = "nama depan" value = "mickey"> <br>
Nama belakang: <br>
<input type = "text" name = "nama belakang" value = "Mouse"> <br> <br>
<input type = "submit" value = "Submit">
</form>
Beginilah cara kode HTML di atas akan ditampilkan di browser:
Nama depan:
Nama belakang :
Atribut Aksi
Atribut tindakan mendefinisikan tindakan yang akan dilakukan saat Form dikirimkan.
Cara umum untuk mengirimkan Form ke server, adalah dengan menggunakan tombol kirim.
Biasanya, bentuknya diserahkan ke halaman web pada server web.
Pada contoh di atas, skrip sisi server ditentukan untuk menangani Form yang diajukan:
<form action = "action_page.php">
Jika atribut tindakan diabaikan, tindakan diatur ke halaman ini.
Atribut Metode
Atribut metode menentukan metode HTTP (GET atau POST) yang akan digunakan saat mengirimkan Form:
<form action = "action_page.php" method = "get">
atau:
<form action = "action_page.php" method = "post">
Kapan menggunakan GET?
Anda bisa menggunakan GET (metode default):
Jika form submission bersifat pasif (seperti search engine query), dan tanpa informasi sensitif.
Bila Anda menggunakan GET, data Form akan terlihat di alamat halaman:
action_page.php?namadepan=Mickey&namabelakang =Mouse
GET paling sesuai untuk data dalam jumlah pendek. Batasan ukuran diatur di browser.
Kapan Menggunakan POST?
Anda harus menggunakan POST:
Jika Form sedang mengupdate data, atau termasuk informasi sensitif (password misalnya).
POST menawarkan keamanan yang lebih baik karena data yang dikirim tidak terlihat di alamat halaman.
Atribut Nama
Untuk disampaikan dengan benar, setiap field masukan harus memiliki atribut nama.
Contoh ini hanya akan mengirimkan kolom masukan "Nama belakang":
Contoh
<form action = "action_page.php">Pengelompokkan Data Form dengan <fieldset>
Nama depan: <br>
<input type = "text" value = "mickey"> <br>
Nama belakang: <br>
<input type = "text" name = "nama belakang" value = "Mouse"> <br> <br>
<input type = "submit" value = "Submit">
</form>
Grup elemen <fieldset> menghubungkan data dalam bentuk.
Elemen <legend> mendefinisikan caption untuk elemen <fieldset>.
Contoh
<form action = "action_page.php">
<fieldset>
<Legend> Informasi pribadi: </legend>
Nama depan: <br>
<input type = "text" name = "nama depan" value = "mickey"> <br>
Nama belakang: <br>
<input type = "text" name = "nama belakang" value = "Mouse"> <br> <br>
<input type = "submit" value = "Submit">
</fieldset>
</form>
Beginilah cara kode HTML di atas akan ditampilkan di browser:
Atribut Bentuk HTML
Elemen HTML <form>, dengan semua atribut yang mungkin ada, akan terlihat seperti ini:
<form action = "action_page.php" method = "post" target = "_ blank" accept-charset = "UTF-8"
Enctype = "application / x-www-form-urlencoded" autocomplete = "off" novalidate>
.
Elemen form
.
</form>
Berikut adalah daftar atribut <form>:
accept-charset Menentukan charset yang digunakan dalam form yang dikirimkan (default: charset halaman).
action Menentukan sebuah alamat (url) dimana untuk mengirimkan form (default: the submitting page).
autocomplete Menentukan apakah browser harus melakukan autocomple
Out Of Topic Show Konversi KodeHide Konversi Kode