Belajar HTML : HTML Forms

assalamualaikum wr. wb.

Kali ini postingan saya tentang HTML Form, biasanya digunakan untuk mengisi data.

HTML Forms

contoh form HTML

Sebuah webform, webform atau HTML form di halaman web memungkinkan pengguna untuk memasukkan data yang dikirim ke server untuk diproses. Form dapat menyerupai kertas atau database form karena pengguna web mengisi formulir menggunakan checkbox, tombol radio, atau bidang teks. Misalnya, bentuk dapat digunakan untuk memasukkan pengiriman atau data kartu kredit untuk memesan produk, atau dapat digunakan untuk mengambil hasil pencarian dari mesin pencari.

      Elemen <form> mendefinisikan bentuk yang digunakan untuk mengumpulkan input pengguna :

<form>
.
elemen form
.
</form>

Dalam elemen form HTML terdapat berbagai jenis elemen input, seperti textfields, checkbox, radio button, submit button, dan banyak lagi.

      Elemen <input> adalah elemen bentuk yang paling penting. Elemen <Input> dapat ditampilkan dalam beberapa cara, tergantung pada type atribut. Berikut adalah beberapa contoh type dalam input :

• <input type = "text"> Mendefinisikan satu baris kolom/field untuk input teks

<form>
Nama depan :<br>
<input type="text" name="namadepan"><br>
Nama belakang :<br>
<input type="text" name="namabelakang">
</form>

Hasil script diatas adalah akan muncul kolom untuk diisi seperti gambar dibawah ini :

input type "text"

• <input type = "radio"> Mendefinisikan tombol radio (untuk memilih salah satu dari beberapa pilihan)

<form>
<input type="radio" name="gender" value="lakilaki" checked> Laki - laki<br>
<input type="radio" name="gender" value="perempuan"> Perempuan<br>
</form>

Hasil script diatas akan muncul radio button seperti berikut :

• <input type="checkbox"> Mendefinisikan sebuah checkbox, yaitu beberapa pilihan.

<form>
<input type="checkbox" name="checkbox1" value="checkbox1"> Checkbox1<br>
<input type="checkbox" name="checkbox2" value="checkbox2"> Checkbox2</form>

• <input type = "submit"> Mendefinisikan sebuah tombol submit untuk mengirimkan form

• <input type="password"> mendefinisikan sebuah kolom untuk mengisikan password

• <input type="reset"> Mendefinisikan sebuah reset button yang akan mereset semua value yang telah diisi menjadi default.

      Elemen <select> untuk mendefinisikan daftar drop-down. Scriptnya adalah :

<select >
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option3">Option4</option>
</select>

      Elemen <textarea> mendefinisikan field input multi-line (text area). Pada sript dibawah, Atribut rows menentukan jumlah baris dalam area teks. Atribut cols menentukan lebar area teks.

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

      Elemen <button> mendefinisikan tombol. Pada script dibawah ini atribut alert akan memunculkan pesan "Hello World!" saat button diklik.

<button type="button" onclick="alert('Hello World!')">Klik disini!</button>

Sekian postingan saya mengenai HTML Form, mohon maaf jika ada salah-salah kata. Semoga Bermanfaat, Terimakasih.

wassalalmualaikum wr. wb.


Referensi :
- http://www.w3schools.com/