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.

form html

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.

Daftar Harga Laptop Sony Vaio Terbaru Juli 2016

Sony Vaio SVE11-135CV Black, Pink, White AMD E2 2000 1.75Ghz, 2GB DDR3, 320GB, No Optical Drive, Wifi, Bluetooth, AMD Radeon HD 7340, Camera, 11.6" WXGA, Win 8 Rp 4,100,000 Sony Vaio Duo 11 SVD11-215CV Intel Core i5 3317U-1.7Ghz, RAM 4GB, HDD 128GB SSD, VGA Intel...

Daftar Harga Laptop Samsung Terbaru Juli 2016 Dan Spesifikasinya

Harga Laptop Samsung Terbaru- Sekarang kalau kita bilang merk Samsung tentunya sudah tidak asing bagi kita semua.Maka sekarang kita akan membahas sedikit tentang Laptop Samsung,seperti yang sudah banyak orang ketahui,Samsung merupakan salah satu perusahaan elektronik...

Daftar Harga Laptop Samsung Windows 8 Terbaru Juli 2016

Samsung NP270E4E-K01ID/K02IDIntel Core i3 3110M 2.4Ghz, 14" LED HD, 4GB, 500GB, DVD-RW, Card Reader, Intel HD, Wifi, Bluetooth, Camera, Win 8.1Rp 6,250,000 Samsung NP470R4E-K01IDIntel Core i5 3230M-2.6Ghz, RAM 4GB, HDD 500GB, VGA Intel HD4000, Screen 14" Wide LED,...

Daftar Harga Laptop Acer AMD Terbaru Juli 2016

Harga Laptop Acer AMD - Semakin hari semakin banyak keluarnya laptop dengan berbagai seri terbaru yang akan semakin memikat hati pengguna laptop.Dengan hadirnya berbagai jenis dan variasi yang banyak akan membuat kita menjadi lebih bingung dalam memilih laptop mana...

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *