HTML Elemen Form

HTML Elemen Form

bentuk HTML pada halaman web memungkinkan pengguna untuk memasukkan data yang dikirim ke server untuk diproses. Formulir dapat menyerupai kertas atau database bentuk karena pengguna web mengisi formulir dengan menggunakan checkbox, tombol radio, atau bidang teks.

Misalnya, bentuk dapat digunakan untuk memasukkan pengiriman atau kartu kredit data yang memesan produk, atau dapat digunakan untuk mengambil hasil pencarian dari mesin pencari.

Bab ini menjelaskan semua elemen form HTML.

The <input> Elemen

Bentuk elemen yang paling penting adalah <input> elemen.

The <input> elemen dapat bervariasi dalam banyak cara, tergantung pada type atribut.

The <select> Elemen (Drop-Down List)

The <select> elemen mendefinisikan daftar drop-down:

The <option> elemen mendefinisikan pilihan untuk memilih.

daftar biasanya akan menunjukkan item pertama sebagai yang dipilih.

Anda dapat menambahkan atribut yang dipilih untuk menentukan pilihan yang telah ditetapkan.

The <textarea> Elemen

The <textarea> elemen mendefinisikan field input multi-line ( a text area ) :

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

kucing itu bermain di taman.

The <button> Elemen

The <button> elemen mendefinisikan tombol yang dapat diklik:

Ini adalah bagaimana kode HTML di atas akan ditampilkan dalam browser:

Klik Saya!

HTML5 Elemen Form

HTML5 menambahkan elemen form berikut:

• <datalist>
• <keygen>
• <output>

HTML5 <datalist> Elemen

The <datalist> elemen menentukan daftar pilihan yang telah ditentukan untuk <input> elemen.

Pengguna akan melihat daftar drop-down pilihan pra-didefinisikan sebagai mereka input data.

The list atribut dari <input> elemen, harus mengacu pada id atribut dari <datalist> elemen.

Contoh

Sebuah <input> elemen dengan nilai-nilai yang telah ditetapkan dalam <datalist> :

<form action="action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Cobalah sendiri "

HTML5 <keygen> Elemen

Tujuan dari <keygen> elemen adalah untuk menyediakan cara yang aman untuk mengotentikasi pengguna.

The <keygen> elemen menentukan bidang key generator-pair dalam formulir.

Ketika formulir dikirimkan, dua tombol dihasilkan, satu swasta dan satu publik.

Kunci pribadi disimpan secara lokal, dan kunci publik dikirim ke server.

Kunci publik dapat digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi pengguna di masa depan.

Contoh

Bentuk dengan bidang keygen:

<form action="action_page.php">
  Username: <input type="text" name="user">
  Encryption: <keygen name="security">
  <input type="submit">
</form>

Cobalah sendiri "

HTML5 <output> Elemen

The <output> elemen merupakan hasil perhitungan (seperti yang dilakukan oleh script).

Contoh

Melakukan perhitungan dan menampilkan hasil dalam <output> elemen:

<form action="action_page.asp"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Cobalah sendiri "

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 »

HTML Elemen Form

= Baru dalam HTML5.