Tutorial Belajar HTML5 Bagian 17 : Cara Membuat Formulir di HTML

0
46

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 :

NoAtribut & Deskripsi
1action
Script backend siap untuk memproses data yang dimasukkan.
2method
Metode yang akan digunakan untuk mengunggah data. Yang paling sering digunakan adalah metode GET dan POST.
3target
Tentukan jendela atau bingkai target tempat hasil script akan ditampilkan. Dibutuhkan nilai seperti _blank, _self, _parent dll.
4enctype
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.

NoAtribut & Deskripsi
1type
Menunjukkan jenis input tang digunakan, untuk mengontrol input jenis teks diberi nilai ‘text’.
2name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3value
Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.
4size
Berfungsi untuk menentukan lebar kontrol input text seperti jumlah karakter.
5maxlength
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.

NoAtribut & Deskripsi
1type
Menunjukkan jenis kontrol input, untuk kontrol input kata sandi diberi nilai ‘password’.
2name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3value
Ini dapat digunakan untuk memberikan nilai awal di dalam kontrol.
4size
Berfungsiuntuk menentukan lebar kontrol input teks dalam hal karakter.
5maxlenght
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>.

NoAtribut & Deskripsi
1name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
2line
Menunjukkan jumlah baris teks kotak area.
3cols
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.

NoAtribut & Deskripsi
1type
Menunjukkan jenis kontrol input, dan untuk kontrol input diberi nilai ‘checkbox’.
2name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3value
Nilai yang akan digunakan jika checkbox akan dipilih.
4checked
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.

NoAtribut & Deskripsi
1type
Menunjukkan jenis kontrol input, untuk kontrol input diberi nilai ‘radio’.
2name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
3value
Nilai yang akan digunakan jika kotak radio dipilih.
4checked
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> :

NoAtribut & Deskripsi
1name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
2size
Ini digunakan untuk menampilkann scrolling kotak daftar.
3multiple
Jika diberi nilai “multiple” maka pengguna diisinkan untuk memilih lebih dari 1 pilihan dari menu.

Berikut adalah daftar atribut penting dari tag <option> :

NoAtribut & Deskripsi
1value
Nilai yang akan digunakan jika pilihan di kotak dipilih.
2selected
Menampilkan bahwa pilihan ini harus menjadi nilai yang dipilih pertama kali saat halaman dimuat.
3label
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 :

NoAtribut & Deskripsi
1name
Digunakan untuk memberi nama pada kontrol yang dikirim ke server untuk dikenali dan mendapatkan nilainya.
2accept
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 :

NoJenis & Deskripsi
1submit
Ini membuat tombol yang secara otomatis mengirimkan formulir.
2reset
Ini membuat tombol yang secara otomatis mengatur ulang kontrol formulir ke nilai awalnya.
3button
Ini membuat tombol yang digunakan untuk memicu script di client side saat pengguna mengklik tombol itu.
4image
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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.