Belajar Html Bab 14 : Cara Menciptakan Form Di Html

Form dipakai untuk mengumpulkan data dari pengunjung website. Mulai dari form pencarian, login, pendaftaran dan lain sebagainya.

HTML tidak sanggup memproses data yang dikumpulkan dari form tersebut, sebab HTML hanya dipakai untuk menformat dokumen bukan untuk memproses data.

Untuk memproses data dari form tersebut kita sanggup mengunakan bahasa pemrograman web menyerupai JavaScript, PHP dan bahasa pemrograman web lainnya. Untuk pembahasan lebih lanjut Saya akan membahasnya di tutorial JavaScript dan PHP.

---

Pembahasan Tag <form>

Tag <form> dipakai untuk mendefinisikan sebuah form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag <form> membutuhkan beberapa atribut untuk sanggup berfungsi menyerupai seharusnya.

 

Atribut action

Atribut pertama yakni action, yang dipakai untuk menentukan lokasi kemana form tersebut akan dikirimkan. Biasanya nilai dari atribut ini yakni sebuah alamat dari halaman PHP yang dipakai untuk memproses data dari form tersebut.

 

Atribut method

Atribut kedua yakni method, yang berfungsi untuk menentukan bagaimana data form tersebut akan dikirimkan oleh browser. Nilai dari atribut ini yaitu post dan get.

Jika kita mengisi atribut method dengan get maka data dari form tersebut akan terlihat pada URL browser, biasanya dipakai untuk form pencarian. Jika mengisi dengan nilai post maka data dari form tersebut tidak akan terlihat pada URL browser, biasanya dipakai untuk data yang sensitif contohnya menyerupai username dan password.

Berikut ini tumpuan dari penggunaan atribut di tag <form> :

<form action="proses.php" method="post">...</form>

---

Tag label

Tag label dipakai untuk memberi keterangan pada setiap input yang ada.

Berikut ini tumpuan penggunaan tag label :

<label for="name"> <!-- keterangan input --> </label>

Pada tumpuan instruksi tag <label> diatas terdapat atribut for berfungsi untuk mencari name yang sesuai dengan isi nilai dari atribut tersebut.

---

Atribut name

Setiap tag inputan di dalam form harus menambahkan atribut name biar sanggup diproses oleh web server nantinya. Di dalam halaman proses menyerupai PHP dan sebagainya, nilai dari atribut name inilah yang akan menjadi variable form.

Contoh penggunaan atribut name :

<label for="nama">Nama lengkap :</label> <input type="text" name="nama"> <label for="email">Email Anda :</label> <input type="email" name="email"> 

---

Mengenal Tag <input>

Tag <input> sering dipakai di dalam form, sebab mempunyai banyak tipe. Seperti textbox, text password, button, checkbox, radio, submit dan lain-lainnya. Tapi kali ini Saya tidak akan membahas semua tipe yang ada di tag <input>.

Berikut ini atribut dari tag <input> :

Text Box

Textbox dipakai untuk mendapatkan inputan berupa teks pendek, biasa dipakai untuk username dan sebagainya.

Contoh penggunaan textbox di HTML :

<label for="nama">Nama lengkap :</label> <input type="text" name="nama">

 

Text Password

Hampir sama dengan textbox namun teks yang di input tidak akan terlihat, yang terlihat berupa bulutan hitam. Biasa dipakai untuk inputan yang sensitif menyerupai password dan sebagainya.

Contoh penggunaan text password di HTML :

<label for="sandi">Kata sandi :</label> <input type="password" name="sandi">

 

Submit

Nilai dari submit ini akan menampilkan sebuah tombol yang bila di klik akan memproses seluruh data dari form tersebut.

Contoh penggunaan submit di HTML :

<input type="submit" value="Kirim">

---

Text Area

Sama halnya dengan text, namun textarea sanggup diisi teks yang lebih dari satu baris, sangat cocok dipakai untuk inputan teks yang panjang menyerupai alamat, deskripsi dan sebagainya. Panjang dan baris textarea sanggup di atur melalui atribut rows dan cols atau sanggup melalui CSS.

Contoh penggunaan tag <textarea> di HTML :

<label for="pesan">Pesan :</label> <textarea rows="10" cols="25" name="pesan"></textarea>

---

Combo Box

Combo box yakni inputan yang telah tersedia nilainya, dan pengguna hanya sanggup menentukan dari nilai yang sudah tersedia. Untuk mendefinisikan sebuah combo box sanggup memakai tag <select>, untuk pilihannya memakai tag <option>.

Contoh instruksi HTML untuk menciptakan combo box :

<label for="kota">Sekarang Anda berada di kota :</label> <select name="kota">  <option>Jakarta</option>  <option>Bandung</option>  <option>Surabaya</option> </select>

Tag <option> mempunyai atribut selected yang di gunakan biar tag <option> berisi nilai awal. Contoh penggunaannya sebagai berikut :

<label for="kota">Sekarang Anda berada di kota :</label> <select name="kota">  <option>Jakarta</option>  <option>Bandung</option>  <option selected>Surabaya</option> </select>

---

Membuat Sebuah Form Utuh

Kita akan memasukkan seluruh instruksi tag yang telah dibahas sebelumnya ke dalam tag <form>. Silahkan buka text editor teman kemudian ketikan instruksi dibawah ini :

<!DOCTYPE html> <html> <head>  <title>Belajar Membuat Form di HTML</title> </head> <body> <form action="proses.html" method="get">  <p><label for="nama">Nama lengkap :</label>  <input type="text" name="nama"></p>    <p><label for="sandi">Kata sandi :</label>  <input type="password" name="sandi"></p>    <p><label for="kota">Sekarang Anda berada di kota :</label>  <select name="kota">  <option>Jakarta</option>  <option>Bandung</option>  <option>Surabaya</option>  </select></p>    <p><label for="pesan">Pesan :</label>  <textarea rows="10" cols="25" name="pesan"></textarea></p>    <p><input type="submit" value="kirim"></p> </form> </body>

Jika sudah diketik silahkan Save dengan nama form.html, kemudian buka di browser. Silahkan tekan tombol Kirim, maka tampilannya akan menyerupai gambar dibawah ini :

Perhatikan pada atribut action Saya menulis nilainya yakni form.html dan nilai dari atribut method yaitu get, sehingga pada ketika Anda menekan tombol Kirim maka akan muncul URL dari data form yang sudah di isi sebelumnya secara otomatis di addres bar. URL menyerupai dibawah ini :

file:///D:/Belajar%20HTML/proses.html?nama=Abdi&sandi=katasandi&kota=Jakarta&pesan=Mari+belajar+HTML+di+mas-abdi.blogspot.com

Lihat URL diatas, setiap nilai akan dibatasi dengan huruf "&" sedangkan spasi diganti dengan "+".

Untuk pembahasan cara memproses inputan form akan dibahas di Tutorial PHP yang nantinya akan Saya buatkan.

Share this post