Form

Bentuk HTML
<Form> Elemen
Bentuk HTML digunakan untuk mengumpulkan input pengguna.
<Form> elemen mendefinisikan bentuk HTML:
contoh
<form>
.elemen form.
</ form>
Bentuk HTML mengandung unsur bentuk.
Elemen bentuk berbagai jenis elemen input, checkbox, tombol radio, tombol submit, dan banyak lagi.
<Input> Elemen
<Input> elemen adalah elemen bentuk yang paling penting.
<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 masukan tombol radio (untuk memilih salah satu dari banyak pilihan)
menyerahkan Mendefinisikan tombol kirim (untuk mengirimkan formulir)
Catatan 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: <br>
<input type = "text" name = "nama depan">
Situs
Nama belakang: <br>
<input type = "text" name = "nama belakang">
</ form>

Cobalah Sendiri »

Ini adalah bagaimana hal itu akan terlihat seperti dalam browser:
Nama depan:
Nama belakang:
Catatan: 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 = "laki-laki" dicentang> Pria
Situs
<input type = "radio" name = "sex" value = "perempuan"> Wanita
</ form>
Cobalah Sendiri »
Ini adalah bagaimana tombol radio terlihat seperti pada browser:
laki-laki
perempuan
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 aksi atribut form:
contoh
<form action = "action_page.php">
Nama depan: <br>
<input type = "text" name = "Nama depan" value = "Mickey">
Situs
Nama belakang: <br>
<input type = "text" name = "nama belakang" value = "Mouse">
<br>
<input type = "submit" value = "Submit">
</ form>

Cobalah Sendiri »

Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Nama depan:

Nama belakang:



Atribut Aksi
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">
Jika atribut aksi dihilangkan, tindakan diatur ke halaman saat ini.
Metode Atribut
Metode atribut menentukan metode HTTP (GET atau POST) yang akan digunakan ketika mengirimkan formulir:
<form action = metode "action_page.php" = "GET">
atau:
<form action = metode "action_page.php" = "POST">
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:
action_page.php? firstname = Mickey & NamaBelakang = Tikus
Catatan 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">
Nama depan: <br>
<input type = "text" value = "Mickey">
Situs
Nama belakang: <br>
<input type = "text" name = "nama belakang" value = "Mouse">
<br>
<input type = "submit" value = "Submit">
</ form>
Pengelompokan Form Data dengan <fieldset>
The <fieldset> kelompok elemen data yang terkait dalam formulir.
The <Legenda> mendefinisikan keterangan untuk <fieldset> elemen.
contoh
<form action = "action_page.php">
<fieldset>
<legenda> Informasi pribadi: </ legend>
Nama depan: <br>
<input type = "text" name = "Nama depan" value = "Mickey">
Situs
Nama belakang: <br>
<input type = "text" name = "nama belakang" value = "Mouse">
<br>
<input type = "submit" value = "Submit"> </ fieldset>
</ form>
Ini adalah bagaimana kode HTML di atas terlihat seperti dalam browser:
Informasi pribadi: Nama depan:

Nama belakang:

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" menerima-charset = "UTF-8"
ectype = "application / x-www-form urlencoded" autocomplete = "off" novalidate>
.
elemen form
.
</ form>