Belajar HTML : Forms and Input

posted in: Tutorial Pemrograman | 0

HTML Forms and Input

HTML Forms

  • Form HTML digunakan untuk melewatkan data ke server.
  • Form HTML dapat mengandung unsur-unsur masukan seperti teks, checkbox, radio-buttons, tombol submit dan banyak lagi.
  • Form HTML juga dapat berisi daftar pilih, textarea, fieldset, legend, dan elemen label.

 

Tag <form> digunakan untuk membuat bentuk HTML:

</pre>
<p class="code"><span class="hps"><form</span>>
<span class="hps">.</span>
<span class="hps">input elemen</span>
<span class="hps">.</span>
<span class="hps"></ form</span>></p>

<pre>

HTML Forms – Input Element

Unsur bentuk yang paling penting adalah elemen <input>.
Sebuah elemen <input> dapat bervariasi dalam banyak cara, tergantung pada jenis atribut.

Sebuah <input> elemen dapat dari lapangan jenis teks, checkbox, password, radio button, submit button, dan banyak lagi.
Jenis masukan yang paling umum dijelaskan di bawah ini.

Text Fields

<input type=”text”> mendefinisikan field input one-line yang pengguna dapat memasukkan teks ke:


<form>
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
</form>

Bagaimana kode HTML di atas terlihat dalam browser:

Capture

 

Password Field

<input type=”password”> mendefinisikan password:


<form>
Password: <input type="password" name="pwd">
</form>

Bagaimana kode HTML di atas terlihat dalam browser:

Capture pass

Radio Buttons

<input type=”radio”> mendefinisikan radio button.

Radio button membiarkan pengguna memilih HANYA SATU dari sejumlah pilihan:


<form>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
</form>

Bagaimana kode HTML di atas terlihat dalam browser:

Capture radio

Checkboxes

<input type=”checkbox”> mendefinisikan checkbox.

Checkbox membiarkan pengguna pilih NOL atau LEBIH pilihan dari sejumlah pilihan.


<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

Bagaimana kode HTML di atas terlihat dalam browser:

Capture checkbox

Submit Button

<input type=”submit”> mendefinisikan tombol kirim.

Sebuah tombol submit digunakan untuk mengirim data formulir ke server.

Data dikirim ke halaman tertentu dalam aksi atribut form. File tujuan didefinisikan dalam atribut action dimana nantikan akan melakukan sesuatu dengan input yang diterima:


<form name="input" action="demo_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

Bagaimana kode HTML di atas terlihat dalam browser:

Capture submit

 

Tag Deskripsi
<form> Mendefinisikan sebuah form HTML untuk input pengguna
<input> Mendefinisikan sebuah kontrol input
 <textarea>  Mendefinisikan sebuah kontrol input multiline (area teks)
 <label>  Mendefinisikan label untuk sebuah <input> elemen
 <fieldset>  Grup unsur yang terkait dalam bentuk
 <legend>  Mendefinisikan sebuah caption untuk <fieldset> elemen
 <select>  Mendefinisikan sebuah daftar drop-down
 <optgroup>  Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar drop-down
 <option>  Mendefinisikan pilihan dalam daftar drop-down
<button> Mendefinisikan sebuah tombol diklik
<datalist> Menentukan daftar yang telah ditentukan pilihan untuk kontrol input
<keygen> Mendefinisikan sebuah bidang kunci-pair Generator (untuk bentuk)
<output> Mendefinisikan hasil perhitungan

Leave a Reply