Cara Membuat Form di HTML

Fungsi form secara umum banyak di gunakan untuk proses input ke database, dimana dapat menyimpan nilai-nilai yang di isi pengguna, selain itu form memungkinkan user dapat berkomunikasi dengan user lain, hal ini tetap di dasari komunikasi antara server dengan client biasanya di olah menggunakan bahasa pemrograman server-side entah itu php, phyton dan lain-lain, seperti kita jumpai pada situs jejaring sosial seperti facebook dan twitter semua berbasis form untuk pengolahan data mulai dari pendaftara, login, update dan lain-lain. Akan tetapi untuk disini kita hanya membahas membuat form di html yaitu sebatas interface saja, tidak untuk pengolahan data, karna hal itu nanti akan di bahas pada materi PHP.

Atribut Tag Form di HTML

Berikut ini adalah atribut-atribut yang biasa di gunakan untuk membuat form di html, tabel di bawah ini tidaklah lengkap, maka dari itu disarankan agar lebih banyak mencari informasi mengenai atribut-atribut setiap tag di html dan apabila masih kurang di pahami secara teori, cobalah praktekan agar kita tahu setiap proses yang terjadi.

Atribut	Nilai	Keterangan
accept	Tipe file	Untuk menentukan file apa saja yang di ijinkan untuk dapat di upload ke server.
action	URL	Untuk menentukan proses mengiriman data form ke server.
enctype	application/x-www-form-urlencoded, multipart/form-data, text/plain	Untuk menentukan bagaimana informasi form harus di encode oleh browser. Hanya berlaku untuk metode pengiriman tipe POST.
method	get, post	Menentukan metode pengiriman data
name	text	Menentukan nama form.

Dari atribut di atas seluruhnya dapat kita gunakan sesuai kebutuhan, misalnya penggunaan enctype, atribut ini kebanyakan di gunakan apabila didalam form menyediakan tipe file, dimana akan ada file yang di upload ke server, ingat! tanpa ada atribut enctype form file upload tidak akan bekerja sama sekali.

Contoh Cara Membuat Form di HTML

Sebenarnya tag form ini seperti melakukan grouping elemen di dalamnya untuk membuat form di html, maksudnya adalah apabila anda memasukan elemen form di dalam tag form maka setiap elemen form yang ada didalam tag form akan di proses selama elemen tersebut berada di dalamnya, dan sebaliknya, elemen form tidak akan dapat bekerja untuk mengirimkan data ke server apabila tidak menggunakan tag form, berikut contoh penulisan untuk membuat form di html.

<form method="POST" action="URL" name="FORM">
    .....
</form>Code language: HTML, XML (xml)

Perhatian metode pengiriman, di tabel atas terdapat dua tipe methode pengiriman, yaitu POST dan GET, lalu apa bedanya POST dan GET? perbedaan method POST dan method GET adalah terletak pada proses pengirman data dimana pada mengambilan variabel yang terdapat pada form dengan metode POST tidak akan terlihat di proses, sedangkan jika GET apabila proses pengiriman dilakukan maka nilai dari variabel form akan ditampilan pada URL di browser.

Macam-macam Elemen Tag Form di HTML

Setelah kita mengenal seluruhnya tentang tag form di html, sekarang saatnya mengenal macam-macam tag form di html. Berikut ini daftar macam-macam tag form di html.

Tag	Tipe	Keterangan
`<textarea>`	–	Textarea digunakan untuk menangani input text yang membutuhkan banyak karakter di tulis didalamnya, layaknya seperti text editor.
`<select>`	–	Tag select biasanya untuk menangani inputan yang nilainya sudah tersedia dan hanya boleh memilih satu nilai.
`<input>`	text	Biasanya digunakan untuk menangani text hanya jumlahnya tidak banyak.
checkbox	Digunakan untuk menangani input yang sudah tersedia nilainya dan dapat memilih lebih dari satu pilihan
radio	Digunakan untuk menangani input yang sudah tersedia nilainya dapat hanya dapat memilih satu saja, dimana untuk grouping elemen ini melalui atribut name yang berisi nilai sama.
hidden	Digunakan untuk menangani input yang tidak ingin ditampilkan di browser.
submit	Untuk menampilkan tombol, yang akan berfungsi menjalankan proses form.
button	Untuk menampilkan tombol, yang akan berfungsi menjalankan proses form bedanya dengan submit harus ada bahasa pihak ketiga untuk dapat melakukan proses input data, misalnya javascript.
file	Digunakan untuk melakukan proses upload data yang akan dikirim ke server.

Penulisan Elemen Tag Form di HTML

Setelah kita mengenali apa saja macam-macam tag form di html, maka sekarang mulai untuk membuat form di html sesuai dengan yang tertera di tabel atas.

Membuat Textarea di HTML

Textarea biasanya digunakan untuk pengolahan teks yang jumlahnya lebih banyak, sehingga memudahkan user dalam menginput data teks, berikut ini contoh penulisan textarea di html.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Textarea di HTML</title>
</head>
<body>
    <h1>Contoh textarea</h1>
    <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</body>
</html>Code language: HTML, XML (xml)

Dari kode html diatas maka akan tampil seperti gambar dibawah ini.

Seperti gambar diatas, textarea menyimpan isi teks didalamnya sebagai elemen tag tidak menggunakan atribut value untuk menentukan isi teks tersebut, dan kalau diperhatikan, ukuran textarea diatas tidak ideal karena terlalu kecil dan untuk memperbesarnya tambahkan atribut cols dan atribut rows, seperti contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Textarea di HTML</title>
</head>
<body>
    <h1>Contoh textarea</h1>
    <textarea cols="70" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</body>
</html>Code language: HTML, XML (xml)

Maka kurang lebih akan tampil seperti gambar di bawah ini.

Membuat Select di HTML

Tag select adalah sebuah tag yang nilainya sudah tersedia, dan hanya dapat memilih satu nilai diantara banyak nilai yang tersedia, nilai-nilai tag select tersebut tersimpan di tag <option></option> dimana nilai tersebut bisa berupa elemen dari tag option atau dimasukan ke dalam atribut value di tag option, contoh penggunaan tag select.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Select di HTML</title>
</head>
<body>
    <h1>Contoh Select</h1>
    <select>
    	<option>Nilai 1</option>
    	<option>Nilai 2</option>
    	<option>Nilai 3</option>
    </select>
</body>
</html>Code language: HTML, XML (xml)

Dari kode di atas maka akan tampil seperti di bawah ini.

Seperti yang sudah dikatakan bahwa nilai dari tag select adalah elemen tag option yang, tetapi apabila tag option memiliki atribut value maka nilai berada di value, atribut value ini tidak tampil di browser, dan elemen tag option hanya akan menjadi placeholder atau teks biasa, contoh penggunaan atribut value.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Select di HTML</title>
</head>
<body>
    <h1>Contoh Select</h1>
    <select>
    	<option value="Nilai 1">Nilai 1</option>
    	<option value="Nilai 2">Nilai 2</option>
    	<option value="Nilai 3">Nilai 3</option>
    </select>
</body>
</html>Code language: HTML, XML (xml)

Membuat Input Elemen di HTML

Tag input umumnya yang paling banyak di gunakan dalam membuat form di html dan yang memiliki tipe paling banyak diantara tag form yang lainnya, bentuk-bentuk tag input hanya dibedakan melalui atribut type untuk menentukan input seperti apa yang ingin di tampilkan dan atribut input ini adalah salah satu tag tunggu dimana penulisannya tidak membutuhkan tag penutup, seluruh tag input biasanya menampung nilai tag tersebut di dalam atribut value.

Dalam proses php ketika nilai-nilai dari elemen form ini di olah, seluruh nilai di tangkap melalui atribut name pada setiap tag, atribut name ini seperti variabel, tetapi untuk pembahasan kali ini kita hanya mengulas tentang interface saja, tidak untuk prosesnya, contoh penggunaan tag name.

<input type="text" name="username" value="bahasaweb">Code language: HTML, XML (xml)

Dari tag input di atas terlihat bahwa nama dari tag tersebut adalah username dan memiliki nilai “bahasaweb”, sehingga yang akan di tangkap oleh kode php dengan metode get atau post adalah kurang lebih seperti variabel “username” bernilai “bahasaweb”, contoh lengkap penulisan form input.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Input di HTML</title>
</head>
<body>
    <h3>Input Text</h3>
    <input type="text" value="Ini adalah nilai input teks">
    <h3>Input Password</h3>
    <input type="text" value="Password">
    <h3>Input Checkbox</h3>
    <input type="checkbox" value="Nilai checkbox"> Checkbox 1
    <input type="checkbox" value="Nilai checkbox"> Checkbox 2
    <input type="checkbox" value="Nilai checkbox"> Checkbox 3
    <h3>Input Checkbox</h3>
    <input type="radio" value="Nilai radio"> Radio 1
    <input type="radio" value="Nilai radio"> Radio 2
    <input type="radio" value="Nilai radio"> Radio 3
    <h3>Input Submit</h3>
    <input type="submit" value="Tombol input submit">
    <h3>Input File</h3>
    <input type="file">
</body>
</html>Code language: HTML, XML (xml)

Contoh kode html di atas kurang lebih akan tampil seperti gambar di bawah ini.

Contoh form Lengkap

Berikut ini adalah contoh lengkap yang bisa di gunakan untuk membuat form di html yaitu pengisian formulir buku tamu, tidak ada proses php di dalamnya, hanya sebatas interface saja.

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Form Lengkap di HTML</title>
</head>
<body>
    <h1>Buku Tamu</h1>
    <form name="bukutamu" method="POST">
        <p>
            <label>Nama</label>
            <input type="text" name="nama" value="Bahasaweb.com">
        </p>
        <p>
            <label>Email</label>
            <input type="email" name="contoh@bahasaweb.com">
        </p>
        <p>
            <label>Pesan</label>
            <textarea cols="50" rows="5">Ini adalah contoh pesan dalam buku tamu</textarea>
        </p>
        <p>
            <input type="submit" value="Kirim">
        </p>
    </form>
</body>
</html>Code language: HTML, XML (xml)