Cara Membuat Form di HTML – Tag Form

Belajar HTML Dasar Tag Form

Form dapat digunakan untuk membuat buku tamu, formulir pemesanan, survey, meminta komentar dan lain sebagianya.
Form dalam html dibuat dengan tag <form>. Pada tutorial html dasar ini kita akan membuat form dan membahasa cara penggunaan tag form pada html.

Pengertian tag <form>

dalam HTML sebuah form harus berada diantara tag form, tag form diawali dengan <form> dan diakhiri dengan </form>. Tag form memiliki atribut untuk dapat berfungsi seperti yang diinginkan.

Atribut action form

action sering diisi dengan URL tempat pemrosesan form selanjutnya. Kemana data form akan dikirim. action itu tujuan form.

Atribut method form

Method digunakan untuk menentukan bagaimana form diberlakukan, Nilai dari atribut method ini bisa berupa get atau post. seandainya atribut method tidak ditulis maka secara defaul html akan memakai method get.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method dengan get maka isian form akan terlihat pada url browser. Method get cocok digunakan untuk query pencarian.
Method post data hasil form tidak akan terlihat pada url browser. biasanya digunakan untuk data yang berisi password, atau pendaptaran user. Untuk memproses data yang sudah diisi didalam form biasa orang akan mekai php atau bahasa pemrograman lainnya.

Contoh action form

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

Struktur dasar pembuatan form

Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan sebagainya.

Contoh struktur form html

<FORM METHOD="POST/GET" ACTION="URL">
<INPUT>
<INPUT>
</FORM>

Tag input form html

Tag input adalah tag paling banyak dipakai di dalam form html, tag input memiliki banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, tombol submit dan reset , semuanya dalam bentuk tag <input>. Bentuk tag input ini dibedakan berdasarkan atribut type:
<input type=”text”/> atau <input /> adalah textbox inputan biasa yang diisi dengan TEXT atau PASSWORD
<input type=”password” /> sama dengan type text, hanya saja teks yang diinput tidak akan terlihat, text akan berubah jadi bintang atau bulatan.
<input type=”checkbox” /> adalah inputan checkbox/ceklist, pengisiannya dengan menceklist.
Type checkbox ini memiliki atribut checked jika diisi dengan nilai checked, akan membuat chexkbox langsung terpilih tanpa harus diceklist terlebih dahulu.
<input type=”radio” /> hampir sama dengan checkbox, bedanya user hanya bisa memilih satu diantara pilihan yang ada. Contoh inputan type radio adalah agama.
<input type=”submit” /> type submit ini digunakan untuk memproses halaman, nama dari tombol submit bisa dirubah dengan mengganti Atribut value nya.

tag textarea dalam form

Tag textarea digunakan untuk menginput text yang panjang, tag textarea cocok untuk input alamat, biografi, atau yang lainnya.

Contoh tag textarea

<textarea rows="15" cols="30">
Text Panjang
</textarea>

Dari contoh diatas ROWS digunakan untuk menentukan Jumlah baris pada textarea, sedangkan COLS gunanya untuk menentukan Jumlah kolom pada textarea.

tag select pada form

Tag select digunakan untuk inputan combobox, isi dari combobox biasa sudah ditentukan dan user hanya bisa memilih satu. Tag select membutuhkan tag option untuk mengisi pilihan dalam tag select

Contoh tag select

<SELECT NAME="agama">
<OPTION value="ISLAM" selected>Islam</OPTION>
<OPTION>Kristen</OPTION>
<OPTION>Budha</OPTION>
<OPTION>Hindu</OPTION>
</SELECT>

Atribut Name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses.
Pada contoh diatas ada name=”agama”, name ini digunakan saat memproses form, misal kita akan menyimpan data ke database, name disini harus sesuai dengan field di table database, agar data agama itu masuk ke field agama, bukan ke field lainnya, tutorial ini nanti kita akan pelajari dalam panduan php dan mysql.
baca juga : Cara Membuat Validasi Form Input Data Dengan Java Script
Sekarang kita akan merangkum semua pembahasan diatas menjadi satu agar menjadi satu form yang utuh.

Contoh form html lengkap

<HTML>
<HEAD>
<TITLE>Contoh Membuat Form</TITLE></HEAD>
<BODY>
<H1 ALIGN="CENTER">FORM PENDAFTARAN ONLINE</H1>
<HR size=3 color="black">
<FORM METHOD="POST" ACTION="contohform.html">
<TABLE>
<TR>
<TD><B>Nama :</B></TD>
<TD><INPUT TYPE="Text" NAME="varNama" SIZE="15"></TD>
</TR>
<TR>
<TD><B>Alamat :</B></TD>
<TD><INPUT TYPE="Text" NAME="varAlamat" SIZE="30"></TD>
</TR>
<TR>
<TD><B>Agama :</B></TD>
<TD><SELECT NAME="agama" SIZE="1">
<OPTION>Islam</OPTION>
<OPTION>Kristen</OPTION>
<OPTION>Budha</OPTION>
<OPTION>Hindu</OPTION>
</SELECT> </TD>
</TR>
<TR>
<TD><B>Password :</B></TD>
<TD><INPUT TYPE="Password" NAME="varPassword" SIZE="10"></TD>
</TR>
</TABLE>
<B>Jenis kelamin: </B><INPUT CHECKED TYPE="Radio" NAME="Kelamin"
VALUE="Pria">Pria
<INPUT TYPE="Radio" NAME="Kelamin" VALUE="Wanita">Wanita
<BR>
<B>Hobi:</B><BR>
<INPUT TYPE="Checkbox" NAME="Kelamin" VALUE="Soccer">Sepakbola
<INPUT CHECKED TYPE="Checkbox" NAME="Hobi"
VALUE="Badminton">Bulutangkis
<INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Computer">Komputer <BR>
<INPUT TYPE="Checkbox" NAME="Hobi" VALUE="Game">Permainan video
<INPUT CHECKED TYPE="Checkbox" NAME="Hobi" VALUE="Internet">Internet
<BR>
<B>Komentar</B><BR>
<TEXTAREA Cols="30" Rows="5" Name="komentar"></TEXTAREA><BR>
<INPUT TYPE="Submit" VALUE="Kirim"> <INPUT TYPE="Reset"
VALUE="Clear">
</FORM>
</BODY>
</HTML>

Sampai disini kita sudah membuat sebuah form pendaftaran online lengkap dengan html, meskipun belum seindah yang yang diinginkan tapi setidaknya kita sudah bisa membuat form.
Tanpa terasa bahwa tutorial dasar html sudah selesai sampai disini, semua tag-tag dasar html sudah kita bahas, tapi ini masih dasar-dasar html, oleh karena itu kita akan belajar html lanjutan untuk melengkapi ilmu html dasar yang sudah anda dapatkan.

Untuk tutorial form yang sudah dilengkapi dengan script action bisa baca disini Cara Membuat Daftar Login Multi User 3 Hak Akses Php MySQL dalam tutorial tersebut sudah ada form pendaftaran, serta login. atau baca yang ini Cara Membuat Form Login Beserta Logout Dengan Php MySQL

Keyword:

  • cara memmbuat form lengkap dalam html
  • cara membuat tag di php

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas