Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar HTML5 Bagian 16 : Blok Elemen & Inline Elemen Pada HTML, selanjutnya kita akan mempelajari cara membuat formulir di HTML menggunakan tag <form>.
Formulir HTML diperlukan, bila Anda ingin mengumpulkan beberapa data dari pengunjung website.
Misalnya, ketika pengunjung mendaftar, Anda ingin mengumpulkan informasi seperti nama, alamat email, kartu kredit, dll.
Formulir akan mengambil masukan dari pengunjung dan kemudian akan mempostingnya ke aplikasi back-end seperti CGI, ASP Script atau script PHP dll.
Aplikasi back-end akan melakukan pemrosesan yang diperlukan pada data yang diteruskan berdasarkan logika yang ditentukan di dalamnya aplikasi.
Ada berbagai elemen formulir yang tersedia seperti kolom teks, kolom textarea, menu drop-down, tombol radio, kotak centang, dll.
Tag HTML <form> digunakan untuk membuat formulir HTML dan memiliki struktur kode seperti berikut :
<form action = "Script URL" method = "GET|POST"> Elemen form seperti input, textarea dll. </form>
Atribut Form
Terlepas dari atribut umum, berikut adalah daftar atribut form yang paling sering digunakan :
| No | Atribut & Deskripsi |
| 1 | action Script backend siap untuk memproses data yang dimasukkan. |
| 2 | method Metode yang akan digunakan untuk mengunggah data. Yang paling sering digunakan adalah metode GET dan POST. |
| 3 | target Tentukan jendela atau bingkai target tempat hasil script akan ditampilkan. Dibutuhkan nilai seperti _blank, _self, _parent dll. |
| 4 | enctype Anda dapat menggunakan atribut enctype untuk menentukan bagaimana browser mengkodekan data sebelum mengirimkannya ke server. Nilai yang memungkinkan adalah : application / x-www-form-urlencoded – Ini adalah metode standar yang digunakan sebagian besar formulir dalam skenario sederhana. mutlipart / form-data – Digunakan ketika Anda ingin mengupload data biner dalam bentuk file seperti gambar, file word dll. |
HTML Form Controls
Ada berbagai jenis kontrol formulir yang dapat Anda gunakan untuk mengumpulkan data menggunakan form HTML :
- Kontrol Text Input
- Kontrol Checkboxes
- Kontrol Radio Box
- Select Box
- File Select Box
- Kontrol Hidden
- Clickable Button (Tombol yang Dapat Diklik)
- Submit dan Reset Button
Kontrol Input Text
Ada 3 jenis input teks yang digunakan pada formulir :
- Kontrol single line text input – Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input pengguna, seperti kotak pencarian atau nama. Ini dibuat menggunakan tag <input> HTML.
- Kontrol password input – Ini juga merupakan single line text input tetapi menyembunyikan karakter segera setelah pengguna memasukkannya. Ini juga dibuat menggunakan tag <input> HTML.
- Kontrol multi-line text input – Ini digunakan ketika pengguna diminta untuk memberikan detail yang mungkin lebih panjang dari satu kalimat. Kontrol multi-line text input dibuat menggunakan tag <textarea> HTML.
Kontrol Single Line Text Input
Kontrol ini digunakan untuk item yang hanya memerlukan satu baris input pengguna, seperti kotak pencarian atau nama.
Ini dibuat menggunakan tag <input> HTML.
Berikut adalah contoh dasar single line text input yang digunakan untuk mengambil nama depan dan nama belakang :
<!DOCTYPE html>
<html>
<head>
<title>Kontrol Text Input</title>
</head>
<body>
<form >
Nama depan: <input type = "text" name = "nama_depan " />
<br>
Nama belakang: <input type = "text" name = "nama_belakang " />
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Untuk <input type=”text”>
Berikut adalah daftar atribut tag <input> untuk membuat kolom teks.
| No | Atribut & Deskripsi |
| 1 | type Menunjukkan jenis input tang digunakan, untuk mengontrol input jenis teks diberi nilai ‘text’. |
| 2 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 3 | value Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol. |
| 4 | size Berfungsi untuk menentukan lebar kontrol input text seperti jumlah karakter. |
| 5 | maxlength Befungsi untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam kotak teks. |
Kontrol Input Password
Ini juga merupakan single line input, tetapi karakter yang diketikkan akan ditutupi sehingga tidak bisa terbaca oleh siapapun.
Ini juga dibuat menggunakan tag <input> HTML tetapi type atributnya diubah ke ‘password’.
Berikut adalah contoh penggunaan tag <input> untuk password yang digunakan untuk mengambil kata sandi pengguna :
<!DOCTYPE html>
<html>
<head>
<title>Kontrol Password Input</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Untuk <input type=”password”>
Berikut adalah daftar atribut tag <input> untuk membuat kolom password.
| No | Atribut & Deskripsi |
| 1 | type Menunjukkan jenis kontrol input, untuk kontrol input kata sandi diberi nilai ‘password’. |
| 2 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 3 | value Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol. |
| 4 | size Berfungsiuntuk menentukan lebar kontrol input teks dalam hal karakter. |
| 5 | maxlenght Berfungsi untuk menentukan jumlah karakter maksimum yang dapat dimasukkan pengguna ke dalam kotak teks. |
Kontrol Multi-line Text Input
Ini digunakan ketika pengguna diminta untuk memberikan detail yang mungkin lebih panjang dari satu kalimat.
Kontrol multi-line text input dibuat menggunakan tag <textarea> HTML.
Berikut adalah contoh dasar input multi-line text yang digunakan untuk mengambil deskripsi:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Deskripsi: <br />
<textarea rows = "5" cols = "50" name = "description">
Tulis deskripsi atau biodata Anda di sini...
</textarea>
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut <textarea>
Berikut adalah daftar atribut dari tag <textarea>.
| No | Atribut & Deskripsi |
| 1 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 2 | line Menunjukkan jumlah baris teks kotak area. |
| 3 | cols Menunjukkan jumlah kolom teks kotak area. |
Kontrol Checkbox
Kotak centang atau checkbox digunakan ketika kita membutuhkan lebih dari satu pilihan untuk dipilih.
Kotak ini dibuat menggunakan tag <input> HTML tetapi atribut type diberi nilai ‘checkbox’.
Berikut adalah contoh kode HTML untuk formulir dengan dua kotak centang checkbox:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "matematika" value = "on"> Matematika
<input type = "checkbox" name = "fisika" value = "on"> Fisika
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Untuk <input type=”checkbox”>
Berikut adalah daftar atribut untuk nilai type checkbox.
| No | Atribut & Deskripsi |
| 1 | type Menunjukkan jenis kontrol input, dan untuk kontrol input diberi nilai ‘checkbox’. |
| 2 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 3 | value Nilai yang akan digunakan jika checkbox akan dipilih. |
| 4 | checked Beri nilai ‘checked’ jika ingin mengatur pilihan secara default. |
Kontrol Radio Button
Radio button digunakan ketika dari banyak pilihan, hanya 1 pilihan yang diperlukan untuk dipilih.
Ini juga dibuat menggunakan tag <input> HTML tetapi atribut type diberi nilai ‘radio’.
Berikut adalah contoh kode HTML untuk formulir dengan 2 radio button :
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "laki-laki"> Laki-laki
<input type = "radio" name = "subject" value = "perempuan"> Perempuan
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Untuk <input type=”radio”>
Berikut adalah daftar atribut untuk radio button.
| No | Atribut & Deskripsi |
| 1 | type Menunjukkan jenis kontrol input, untuk kontrol input diberi nilai ‘radio’. |
| 2 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 3 | value Nilai yang akan digunakan jika kotak radio dipilih. |
| 4 | checked Atur status ‘checked’ jika ingin membuat pilihan menjadi default. |
Kontrol Select Box
Select box, juga disebut kotak drop-down yang menyediakan pilihan untuk mendaftarkan berbagai pilihan dalam bentuk daftar drop-down, dimana pengguna dapat memilih satu atau lebih pilihan.
Berikut adalah contoh kode HTML untuk formulir dengan satu kotak drop-down :
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Matematika" selected>Matematika</option>
<option value = "Fisika">Fisika</option>
<option value = "Kimia">Kimia</option>
<option value = "Sejarah">Sejarah</option>
</select>
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Untuk Tag <select>
Berikut adalah daftar atribut penting dari tag <select> :
| No | Atribut & Deskripsi |
| 1 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 2 | size Ini digunakan untuk menampilkann scrolling kotak daftar. |
| 3 | multiple Jika diberi nilai “multiple” maka pengguna diisinkan untuk memilih lebih dari 1 pilihan dari menu. |
Berikut adalah daftar atribut penting dari tag <option> :
| No | Atribut & Deskripsi |
| 1 | value Nilai yang akan digunakan jika pilihan di kotak dipilih. |
| 2 | selected Menampilkan bahwa pilihan ini harus menjadi nilai yang dipilih pertama kali saat halaman dimuat. |
| 3 | label Cara lain untuk untuk memberi label pada pilihan |
File Upload Box
Jika Anda ingin mengizinkan pengguna untuk mengunggah file ke web, maka Anda akan perlu menggunakan file upload box, biasa disebut sebagai kotak pilih file.
Ini juga dibuat menggunakan elemen <input> tetapi atribut type diberi nilai ‘file’.
Berikut adalah contoh kode HTML untuk formulir dengan satu kotak unggah file :
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Atribut Untuk <input type=”file”>
Berikut adalah daftar atribut penting dari file upload box :
| No | Atribut & Deskripsi |
| 1 | name Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya. |
| 2 | accept Menentukan jenis file yang diterima server. |
Kontrol Button
Ada berbagai cara dalam HTML untuk membuat tombol yang dapat diklik.
Anda juga dapat membuat tombol yang dapat diklik menggunakan tag <input> dengan memberi nilai type-nya sebagai ‘button’.
Berikut nilai atribut type yang dapat digunakan unttuk membuat tombol dan mengambil nilai :
| No | Jenis & Deskripsi |
| 1 | submit Ini membuat tombol yang secara otomatis mengirimkan formulir. |
| 2 | reset Ini membuat tombol yang secara otomatis mengatur ulang kontrol formulir ke nilai awalnya. |
| 3 | button Ini membuat tombol yang digunakan untuk memicu script di client side saat pengguna mengklik tombol itu. |
| 4 | image Ini membuat tombol yang dapat diklik tetapi kita dapat menggunakan gambar sebagai pengganti tombol. |
Berikut adalah contoh kode HTML untuk formulir dengan 3 jenis tombol :
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png" />
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Kontrol Hidden Form
Kontrol hidden form digunakan untuk menyembunyikan data di dalam halaman yang nantinya dapat dikirim ke server.
Kontrol ini bersembunyi di dalam kode dan tidak muncul di halaman browser.
Misalnya, hidden form berikut digunakan untuk menyimpan nomor halaman saat ini.
Ketika pengguna akan mengklik halaman berikutnya maka nilai kontrol hidden akan dikirim ke server web dan di sana akan memutuskan halaman mana yang akan ditampilkan berikutnya berdasarkan halaman saat ini yang dilewati.
Berikut adalah contoh kode HTML untuk menunjukkan penggunaan kontrol hidden:
<!DOCTYPE html>
<html>
<head>
<title>Control Hidden Form </title>
</head>
<body>
<form>
<p>Ini adalah halaman 10</p>
<input type = "hidden" name = "namahalaman" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda mempelajari bagaimana cara membuat formulir di HTML dengan menggunakan tag <form> dan berbagai atribute yang digunakan untuk membentuk sebuah formulir yang lengkap untuk memproses data pengunjung website Anda.
