Cara Membuat Form Formulir Pada HTML

Tag <form> merupakan formulir yang digunakan sebagai perantara untuk memasukan data inputan ke server. Form pada HTML dibuat dengan menggunakan elemen form. Dalam membuat form,  Elemen form harus membungkus seluruh elemen-elemen masukan form lain untuk memastikan masukan informasi pengguna dapay dibaca oleh aplikasi web.

Setiap elemen form dalam suatu halaman web harus memiliki atribut name yang digunakan sebagai pengenal dari nama elemen elemen tersebut. Setiap data yang dimasukan ke dalam elemen form, akan dikirim kepada server.

Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen. Browser akan mengambil semua data dari elemen input yang memiliki atribut name. Jika atribut tidak memiliki name, maka data yang ada dalam elemen input tersebut tidak dikirimkan kepada server.

Tag <form> digunakan untuk membuat form dalam dokumen HTML. Penulisan format umum penulisan dari form adalah sebagai berikut :
 

<form  atribut="atribut">
.....
.....
.....
</form>

Terlihat pada format umum formulir diatas, bahwa penulisan form delengkapi dengan atribut.Berberapa atribut yang sering digunakan oleh tag <form> adalah Action dan Method.

Atribut Action digunakan untuk mengirimkan data form ketika form disubmit atau dapat dikatakan aksi yang muncul ketika pengguna menekan tombol tertentu. Action menentukan lokasi dari script yang akan memproses data dari form. Format umum penulisan atribut action adalah :

<form action="URL">

Nilai dari URL diatas menyatakan alamat kemana data dikirimkan. Penulisan alamat URL dapat dituliskan sebagai berikut :

• URL absolut : action="http//www.example.com/example.htm
• URL relatif : action="example.htm"

Baca Juga : Cara Memberi Warna Tabel Pada HTML

Sedangkan atribut Method adalah atribut yang wajib dicantumkan saat penulisan <form> karena atributmethod merupakan metode untuk pengiriman data ke tujuan yaitu :

Get : 

• mengirim data ke server dengan cara meletakan data pada bagian akhir dari URL yang dituju.
• metode yang digunakan oleh browser untuk meminta server mengirim kembali sumber daya yang diberikan. 

Post :

• datanya dikirim terpisah
• metode browser mengirimkan server untuk meminta respon yang memperhitungkan data yang tersedia dalam tubuh permintaan HTTP.

format penulisannya adalah sebagai berikut :

<form method="get/post">

Memahami Tag <input>

Tag Input adalah tag yang digunakan dalam form berupa text biasa, text password, checkbox, radio dan tombol submit. Jenis-jenis tag input adalah sebagai berikut :

• <input type=”text” /> adalah textbox inputan untuk memasukan data text ke server dalam bentuk textfield.
• <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan.
• <input type=”radio” /> adalah form input yang hanya dapat memilih satu pilihan, tidak bisa digunakan untuk lebih dari satu pilihan. Contohnya jenis kelamin.
• <input type=”checkbox” />memiliki fungsi yang hampir sama dengan radio button, namun pada Checkbox dapat digunakan untuk memilih lebih dari satu jawaban. Contohnya Hobi.
• <input type=”submit” /> akan menampilkan tombol untuk memproses form. Attribut Value untuk menampilkan kata yang ada di Button.

Memahami Tag <textarea>

Tag <textarea> merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text.

Untuk menampung input teks yang panjang dan mungkin tersusun lebih dari 1 baris, maka digunakan komponen input text area.

Format umum penulisan textarea adalah sebagai berikut :

<textarea rows="5" cols="20">
    ---- Data yang diinput di teks area -------
</textarea>

Beberapa atribut dari text area di atur melalui atribut rows dan cols, atau melalui CSS.

Memahami Tag <select>

Tag <select> adalah komponen input dengan banyak pilihan nilai dan hanya untuk memilih 1 alternatif dari opsi pilihan. Contoh penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan dan sebagainya. Format umum penulisan komponen select adalah sebagai berikut :

<select name="name">

<option value="nilai1">Nilai 1 </option>

<option value="nilai2">Nilai 2 </option>

<option value="nilai3">Nilai 3 </option>

<option value="nilai4">Nilai 4 </option>

</select> 

Name="name" merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan value="nilai"  merupakan nilai dari setiap pilah yang diberikan.

Membuat Form Lengkap 

Setelah kita memahami seluruh pembahasan tentang tag form HTML, sekarang saatnya kita membuat form HTML dengan menggabungkan seluruh tag diatas. Silakan Anda buka editor notepad Anda, kemudian ketik list kode HTML dibawah ini.

<!doctype html>
<html>
<head>
<title>Formulir</title>
</head>
<body>
<center><h1>Formulir Pendaftaran</h1></center>
<center><table border="0" width="400">
    <tr><td>Nama</td>
           <td>:</td>
           <td><input type="text" size="25"></td>
    </tr>
    <tr><td>Password</td>
           <td>:</td>
           <td><input type="password" size="25"></td>
    </tr>
    <tr><td>Tanggal Lahir</td>
           <td>:</td>
           <td><input type="text" size="2">/
                  <input type="text" size="2">/
                  <input type="text" size="2"> (hh/bb/tttt)</td>
    </tr>
    <tr><td>Jenis Kelamin</td>
           <td>:</td>
           <td><input type="radio" value="Laki-laki">Laki-Laki<br>
                  <input type="radio" value="Perempuan">Perempuan</td>
    </tr>
    <tr><td>Jurusan</td>
           <td>:</td>
            <td><select>
               <option value="TKJ">TKJ</option>
               <option value="TKR">TKR</option>
               <option value="TSM">TSM</option>
               <option value="Multimedia">Multimedia</option>
               </select></td>
    </tr>
    <tr><td>Hoby</td>
           <td>:</td>
           <td><input type="checkbox" value="">Football
                  <input type="checkbox" value="">Traveling
                  <input type="checkbox" value="">Blogging<br>
                  <input type="checkbox" value="">Music
                  <input type="checkbox" value="">Adventure
                  <input type="checkbox" value="">Lainnya</td>
    </tr>
    <tr><td>Alamat</td>
           <td>:</td>
           <td><textarea rows="5" cols="25"></textarea></td>
    </tr>
</table></center><center><input type="submit" value="Kirim">
</td></tr></table>
</body>
</html>

Simpan kode HTML diatas dengan nama file formulir.html. Jika kita buka di browser maka tampilannya adalah sebagai berikut.

Pada tampilan form HTML diatas telah dikombinasikan dengan tag-tag tabel, sehingga tampilan form terlihat lebih rapih dan tidak acak-acakan. Demikianlah penjelasan singkat tentang Cara Membuat Formulir Pada HTML. Semoga bermanfaat.