The <form> Elemen
bentuk HTML digunakan untuk mengumpulkan input pengguna.
The <form> elemen mendefinisikan bentuk HTML:
<form>
.
Bentuk HTML mengandung unsur bentuk. unsur-unsur bentuk berbagai jenis elemen input, checkbox, tombol radio, tombol submit, dan banyak lagi.
The <input> Elemen
The <input> elemen adalah elemen bentuk yang paling penting.
The <input> elemen memiliki banyak variasi, tergantung pada type atribut.
Berikut adalah jenis yang digunakan dalam bab ini:
Mengetik Deskripsi text Mendefinisikan input teks biasa radio Mendefinisikan tombol radio masukan (for selecting one of many choices) submit Mendefinisikan sebuah tombol submit (for submitting the form)
Anda akan belajar lebih banyak tentang jenis masukan nanti dalam tutorial ini.
input teks
<input type="text"> mendefinisikan sebuah field input satu baris untuk input teks:
Contoh
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Cobalah sendiri " Ini adalah bagaimana hal itu akan terlihat seperti dalam browser:
Nama depan:
Nama keluarga:
Note: Bentuk itu sendiri tidak terlihat. Juga mencatat bahwa lebar default kolom teks adalah 20 karakter.
Radio Tombol Masukan
<input type="radio"> mendefinisikan radio button.
Radio tombol membiarkan pengguna memilih SATU dari sejumlah pilihan:
Contoh
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
Pria
Wanita
Lain
Submit Tombol
<input type="submit"> mendefinisikan sebuah tombol untuk mengirimkan formulir ke bentuk-handler.
Bentuk-handler biasanya halaman server dengan script untuk memproses input data.
Bentuk-handler ditentukan dalam form action atribut:
Contoh
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
Nama depan:
Nama keluarga:
The Action Atribut
The action atribut mendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan.
Cara umum untuk mengirimkan formulir ke server, adalah dengan menggunakan tombol submit.
Biasanya, formulir dikirimkan ke halaman web pada web server.
Dalam contoh di atas, script server-side yang ditentukan untuk menangani formulir yang diajukan:
<form action="action_page.php ">
Jika action atribut dihilangkan, tindakan diatur ke halaman saat ini.
The Method Atribut
The method atribut menentukan metode HTTP ( GET atau POST ) yang akan digunakan ketika mengirimkan formulir:
<form action="action_page.php" method="get" > atau:
<form action="action_page.php" method="post" >
Ketika Menggunakan GET ?
Anda dapat menggunakan GET (the default method) :
Jika pengiriman formulir pasif (like a search engine query) , dan tanpa informasi sensitif.
Bila Anda menggunakan GET , data formulir akan terlihat di alamat halaman:
action_page.php?firstname=Mickey&lastname=Mouse GET paling cocok untuk jumlah pendek dari data. keterbatasan ukuran ditetapkan pada browser Anda.
Ketika Menggunakan POST ?
Anda harus menggunakan POST :
Jika formulir adalah memperbarui data, atau berisi informasi sensitif (password) .
POST menawarkan keamanan yang lebih baik karena data yang diajukan tidak terlihat di alamat halaman.
The Name Atribut
Untuk disampaikan dengan benar, masing-masing bidang masukan harus memiliki name atribut.
Contoh ini hanya akan menyerahkan "Last name" 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>
Cobalah sendiri "
Pengelompokan data Form dengan <fieldset>
The <fieldset> kelompok elemen data yang terkait dalam formulir.
The <legend> 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="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Cobalah sendiri " Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:
HTML Form Atribut
HTML <form> elemen, dengan semua atribut yang mungkin ditetapkan, 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>
.
Uji Diri dengan Latihan! Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»
Berikut adalah daftar <form> atribut:
Atribut Deskripsi accept-charset Menentukan charset digunakan dalam bentuk disampaikan (default: halaman charset). action Menentukan alamat (url) di mana untuk mengirimkan formulir (default: halaman mengirimkan). autocomplete Menentukan jika browser harus melengkapi otomatis bentuk (default: on) . enctype Menentukan encoding dari data yang diajukan (default: is url-encoded) . method Menentukan metode HTTP digunakan ketika mengirimkan formulir (default: GET) . name Menentukan nama yang digunakan untuk mengidentifikasi bentuk (untuk penggunaan DOM: document.forms.name). novalidate Menentukan bahwa browser tidak harus memvalidasi formulir. target Menentukan target dari alamat di action atribut (default: _self).
Anda akan belajar lebih banyak tentang atribut dalam bab-bab berikutnya.
Contoh lebih
Kirim e-mail dari formulir
Cara mengirim e-mail dari formulir.