Membuat Form di HTML

Lebakcyber.net – Membuat form di HTML. Pada kesempatan kali ini kita akan mempelajari bagaimana cara membuat sebuah form pada halaman HTML yang kita buat. Form sendiri merupakan sebuah tempat untuk melakukan proses input data sebelum nantinya akan diproses oleh sistem.

Misalnya adalah form comment, form login, form data user dan lain sebagainya. Untuk proses penginputan data yang telah dimasukan nanti akan kita bahas lebih lanjut pada materi mengenai PHP dan juga MySQL.

Adapun tag yang biasanya digunakan untuk membuat form pada HTML adalah tag <input>, tag <textarea>, tag <option> dan juga tag <select>. Mari kita bahas satu persatu mengenai tag yang sering digunakan untuk membuat form tersebut.

Tag <form> Di HTML

Didalam sebuah tag <form> dibutuhkan beberapa atribut agar data yang dimasukan dapat diproses yang nantinya data tersebut akan dikirim. Biasanya nilai yang dikirim tersebut berupa alamat pada sebuah halaman yang nantinya akan digunakan untuk memproses data yang diinputkan.

Selanjutnya atribut yang kedua adalah method, dimana method tersebut menjelaskan mengenai data yang nantinya akan dikirimkan oleh browser. Nilai dari method tersebut sendiri biasanya adalah POST atau GET. Dibawah ini adalah contoh dari penulisan <form> pada halaman HTML :

<!DOCTYPE html>
<html>
<head>
<title>Format kode di HTML - Lebak Cyber</title>
</head>
<body>

<form action= "aksi.php" method= "Post">
    //Disini masukan tag yang dibutuhkan untuk menerima input dari user
</form>

</body>
</html>

Tag <input> Di HTML

Tag <input> merupakan sebuah tag yang biasanya digunakan pada form pengisian. Tag <input> ini punya beberapa bentuk yang dapat digunakan seperti misalnya untuk input password, alamat email, radiobutton, checkbox sampai tombol submit yang ada didalam tag <input>

Berikut ini adalah beberapa bentuk yang ada didalam tag <input> yang dikategorikan berdasarkan atributnya masing-masing :

<input type=”text”> tag input yang memiliki atribut type=text dapat menerima inputan berupa teks seperti inputan teks yang pendek atau username misalnya.
<input type=”password”> tag input yang memiliki atribut type=”password” dapat menerima inputan berupa teks, namun teks yang diinputkan nantinya akan ditampilkan dalam bentuk titik atau tanda bintang, atribut ini biasanya digunakan untuk menerimana inputan berupa password.
<input type=”checkbox”> tag input yang memiliki atribut type=”checkbox” akan menghasilkan sebuah checkbox yang bisa di ceklis oleh user.
<input type=”radio”> tag input yang memiliki atribut=”radio” akan menghasilkan inputan yang berupa radio grup, dimana nantinya pengguna dapat memilih salah satu dari pilihan yang disediakan didalam radio tersebut.
<input type=”submit”> tag input yang memiliki atribut type=”submit” ini akan berupa button atau tombol yang dapat digunakan untuk memproses data yang diinputkan kedalam form.

Tag <textarea> Di HTML

Tag <textarea> adalah sebuah tag yang memiliki fungsi yang sama dengan inputan teks, namun pada textarea ini didalamnya bisa diisikan dengan jumlah teks yang lebih banyak

Tag <select> Di HTML

Tag <select> merupakan sebuah tag yang bsia digunakan oleh pengguna untuk memilih data yang telah disediakan. Biasanya saat menggunakan tag <select> selalu diikuti dengan <option> yang dapat digunakan untuk membuat pilihan.

Atribut Name Di HTML

Atribut name adalah sebuah atribut yang nanti nilainya akan digunakan pada saat data diproses oleh web server.

Sekarang coba kita implementasikan tag form beserta atribut-atributnya tersebut kedalam halaman HTML seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Membuat Form di HTML - Lebak Cyber</title>
</head>

<body>
<h2>Masukan Data Diri Anda : </h2>

<form>
Nama Anda: <input type="text" name="nama"><br/>
password : <input type="password" name="passwd"><br/>
Alamat :</br>
<textarea name="alamat">

</textarea>
</br/>

Jenis Kelamin :
<input type="radio" name="jk" value="laki-laki" checked />
Laki - Laki
<input type="radio" name="jk" value="perempuan" />
Perempuan
<br/>

Hobi yang disukai :
  <input type="checkbox" name="musik"> Musik
  <input type="checkbox" name="memasak"> Memasak
  <input type="checkbox" name="melukis"> Melukis
<br/>

kota asal :
<select>
  <option>Lebak</option>
  <option>Pandeglang</option>
  <option>Serang</option>
  <option>Tangerang</option>
</select>
<br/>

Masukan Pesan :
<textarea>

</textarea>
<br/>

<input type="submit" value="proses">
</form>
</body>
</html>

Oke pada kesempatan kali ini kita sudah mempelajari tentang bagaimana cara membuat sebuah form pada halaman HTML, semoga tutorial ini bermanfaat dan sampai jumpa di tutorial HTML selanjutnya.

Lebak Cyber Tips dan Trik Komputer

Membuat Form di HTML