Belajar Element HTML: <form>
Tag <form> mewakili formulir dalam dokumen HTML.
Tag ini digunakan bersama dengan elemen lain yang terkait dengan form.
Untuk membuat form, biasanya dengan membuat elemen yang terkait diletakkan didalam tag <form>.
Kamu juga bisa menggunakan atribut form untuk referensi ID form yang digunakan.
Syntax
Tag <form> ditulis seperti <form></form> dengan beberapa elemen yang terkait diletakkan diantara tag pembuka dan penutup.
<form action="process_form.cfm" method="get">
<label>Nama Awal: <input name="nama_awal"></label>
<label>Nama Akhir: <input name="nama_akhir"></label>
<input type="submit" value="Submit">
</form>
<form action="/signup" method="post">
<p>
<label>Judul</label><br>
<label>
<input type="radio" name="title" value="bp">
Bpk
</label>
<label>
<input type="radio" name="title" value="ibu">
Ibu
</label>
<label>
<input type="radio" name="title" value="sdr">
Sdr
</label>
</p>
<p>
<label>Nama awal</label><br>
<input type="text" name="nama_awal">
</p>
<p>
<label>Nama akhir</label><br>
<input type="text" name="nama_akhir">
</p>
<p>
<label>Email</label><br>
<input type="email" name="email" required>
</p>
<p>
<label>Nomor HP</label><br>
<input type="tel" name="phone">
</p>
<p>
<label>Password</label><br>
<input type="password" name="password">
</p>
<p>
<label>Negara</label><br>
<select>
<option>Indonesia</option>
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Brazil</option>
</select>
</p>
<p>
<label>
<input type="checkbox" value="terms">
I agree to the <a href="/terms">terms and conditions</a>
</label>
</p>
<p>
<button>Sign up</button>
<button type="reset">Reset form</button>
</p>
</form>action
Menentukan URL informasi form yang akan dikirim saat disubmit.
"/contact"
Kamu bisa menggunakan URL relative.
"{{site.url}}/contact"
Kamu dapat menggunakan URL absolute.
method
Menentukan HTTP method yang digunakan saat form disubmit
"post"
Informasi form dikirim ke server sebagai bagian dari request body.
"get"
Informasi form dikirim ke server sebagai Parameter URL:
/contact?first_name=Alex&last_name=Smith.
name
Nama form saat dikirim ke server. Berguna saat ada banyak form dalam halaman web yang sama.
"sign_up_form"
Nama value harus unik sesuai konteks halaman web.
Hanya boleh terdiri dari karakter alphanumeric a-z A-Z 0-9 dan beberapa karakter spesial seperti - _… tetapi bukan spasi.
autocomplete
Menentukan apakah browser dapat melengkapi semua kontrol form secara otomatis.
"off"
Browser akan menonaktifkan fungsi pelengkapan otomatis. Namun ini bisa diganti untuk masing-masing kontrol secara individual.
"on"
Browser akan mengaktifkan fungsi pelengkapan otomatis. Namun ini bisa diganti untuk masing-masing kontrol secara individual.
Coba tekan & quot; bawah & quot; dalam input ini. Ini akan menampilkan formulir email yang dimasukkan sebelumnya.
target
Menentukan di tab atau jendela mana tautan yang diklik akan muncul.
"_blank"
Terbuka dalam konteks penelusuran baru, yang biasanya merupakan tab baru .
"_self"
Buka di tab saat ini.
"_parent"
Dibuka dalam konteks penelusuran induk, atau _self jika tidak ada.
"_top"
Dibuka dalam konteks penelusuran teratas, atau _self tidak ada.
enctype
Tentukan jenis MIME dari
informasi yang dikirim ke server. Hanya berfungsi jika metodenya post .
"application/x-www-form-urlencoded"
The default value.
"text/plain"
Untuk teks biasa HTML5.
"multipart/form-data"
Diperlukan saat menggunakan elemen & lt; input type = & quot; file & quot; & gt; .
novalidate
Memberitahu browser untuk tidak memvalidasi formulir saat pengiriman.
No value required.Pengaturan Default CSS
Sebagian besar browser menampilkan elemen <form> dengan pengaturan CSS:
form {
display: block;
margin-top: 0em;
}