<Form> Elemen
Bentuk HTML digunakan untuk mengumpulkan input pengguna.
<Form> elemen mendefinisikan bentuk HTML:
<form>
.
form element
.
</form>
Bentuk HTML mengandung form element.
Elemen bentuk berbagai jenis elemen input, checkbox, tombol radio, tombol submit, dan banyak lagi.
<Input> Elemen
<Input> elemen adalah form element yang paling penting.
<Input> elemen memiliki banyak variasi, tergantung pada jenis atribut.
Berikut adalah jenis-jenis yang digunakan dalam bab ini:
| Jenis | Deskripsi |
|---|---|
| text | Mendefinisikan input teks biasa |
| radio | Mendefinisikan tombol radio masukan (untuk memilih salah satu dari banyak pilihan) |
| submit | Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir) |
Anda akan belajar lebih banyak tentang jenis masukan nanti dalam tutorial ini.
Text Input
<Input type = "text"> mendefinisikan input lapangan satu-line untuk input teks:
Contoh:
<form>
Nama Depan:
<input type="text" name="namadepan">
<br>
Nama Belakang:
<input type="text" name="NamaBelakang">
</form>
Hasil:
Tombol radio Masukan
<Input type = "radio"> mendefinisikan tombol radio.
Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan:
Contoh:
<form>
Jenis Kelamin :
<input type="radio" name="jk" value="lakilaki">Laki-laki
<input type="radio" name="jk" value="perempuan">Perempuan
</form>
Hasil:
Submit Tombol
<Input type = "submit"> mendefinisikan tombol untuk mengirimkan formulir ke bentuk-handler.
Bentuk-handler biasanya halaman server dengan script untuk memproses input data.
Bentuk-handler yang ditentukan dalam action atribut form:
Contoh:
<form action="action_page.php">
Nama Depan :
<input type="text" name="namadepan" value="Dicky"><br/>
Nama Belakang :
<input type="text" name="namabelakang" value="Andre">
<br/><br/>
<input type="submit" name="Proses" value="Kirim" >
</form>
Hasil :
Atribut Action
Action 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">
Jika atribut aksi dihilangkan, tindakan diatur ke halaman itu sendiri.
Method Atribut
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">
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 halama.
GET paling cocok untuk jumlah pendek data. Keterbatasan ukuran ditetapkan pada browser Anda.
Ketika Menggunakan POST?
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:
<form action="action_page.php">
Nama Depan :
<input type="text" value="Dicky"><br/>
Nama Belakang :
<input type="text" name="namabelakang" value="Andre">
<br/><br/>
<input type="submit" value="Kirim" >
</form>
Pengelompokan Form Data dengan <fieldset>
The <fieldset> kelompok elemen data yang terkait dalam formulir.
The <Legend> mendefinisikan keterangan untuk <fieldset> elemen.
<form action="action_page.php">
<fieldset>
<legend>Personal Information:</legend>
Nama Depan :
<input type="text" name="namadepan" value="Dicky">
<br>
Nama Belakang :
<input type="text" name="namabelakang" value="Andre">
<br><br>
<input type="submit" value="Proses">
</fieldset>
</form>
Hasil :
Form HTML Atribut
HTML <form> elemen, dengan semua atribut yang mungkin ditetapkan, akan terlihat seperti ini:
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form element
.
</form>
Berikut adalah daftar <form> atribut:
| Atribut | Deskripsi |
|---|---|
| accept-charset | Menentukan charset yang digunakan pada pengajuan (default: halaman charset). |
| action | 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). |
| 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 alamat dalam atribut aksi (default: _self). |
0 komentar:
Posting Komentar