HTML Form

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:
  • HTML Dasar

01. Pengenalan HTML Form
  • Jika kita perhatikan halaman web yang populer seperti Google, Facebook dan Youtube
  • Semua web tersebut memiliki bagian untuk menerima data, yang datanya dimasukkan oleh pengguna web tersebut
  • Di HTML, untuk menerima input data dari pengguna, kita bisa menggunakan HTML Form
  • Terdapat banyak sekali jenis input data yang bisa kita buat dalam Form, seperti teks, checkbox, selection, password, dan masih banyak yang lainnya

02. Form Tag
  • Form Tag adalah tag dengan kata kunci form, yang digunakan sebagai bagian dari input informasi yang diberikan oleh pengguna
  • Setiap kita ingin membuat input informasi dari pengguna, maka kita harus buat dalam Form Tag


03. Form Attribute
  • Form Tag memiliki banyak atribut, berikut adalah atribut yang penting untuk kita ketahui
  • name, berisi informasi nama form, nama form harus unik dalam satu file html, tidak boleh ada nama form yang sama
  • action, berisi URL (bisa absolute atau relative) kemana informasi di form ini akan dikirim
  • enctype, berisi tipe data form, defaultnya “application/x-www-form-urlencoded”, atau “multipart/form-data” jika input data berisi file
  • method, berisi aksi HTTP Method yang akan digunakan, jika “get” maka informasi akan dikirim sebagai query parameter di URL, jika “post” maka informasi akan dikirim di request body HTTP
  • target, berisikan informasi dimana hasil form ini akan ditampilkan, defaultnya adalah “_self” (dihalaman yang sama), atau “_blank” (di halaman berbeda)


04. Input Tag
  • Form Tag hanya deklarasi bahwa kita akan membuat form berisi input data
  • Sedangkan untuk detail input data apa yang diperlukan, kita perlu menggunakan Input Tag
  • Input tag menggunakan kata kunci “input”


05. Input Attribute
  • HTML Form mendukung banyak sekali jenis input, dan untuk mengatur jenis input, kita harus mengubahnya menggunakan attribute. Ada beberapa attribute yang perlu kita ketahui di input
  • name, digunakan untuk memberi nama input, nama input harus unik dalam form yang sama, tidak boleh ada yang sama
  • type, digunakan untuk memilih jenis input, kita akan bahas lebih detail untuk jenis-jenis tipe input yang tersedia di HTML
  • value, digunakan untuk mengubah nilai default dari input
  • disabled, digunakan untuk menjadikan input tidak aktif
  • readonly, digunakan untuk menjadikan input tidak bisa diubah
  • required, digunakan untuk menandai bahwa input wajib diisi


06. Input: Type Text
  • Input type dengan nilai text, digunakan untuk membuat input data text / tulisan / string
  • Input Text ditampilkan dalam bentuk input satu baris, oleh karena itu kita tidak bisa menambahkan karakter ENTER pada Input Text
  • Input Text cocok untuk jenis input data text yang memang tidak lebih dari baris, artinya tidak membutuhkan karakter ENTER


07. Label Tag
  • Saat kita membuat caption untuk input, direkomendasikan menggunakan Label, dibanding menggunakan teks polos atau tag seperti span / p / div
  • Label Tag bisa dikaitkan dengan input, sehingga ketika kita mengklik tulisan pada Label, secara otomatis fokus akan berpindah ke Input
  • Selain itu, saat mengaktifkan Screen Reader, ketika kita mengklik Input, secara otomatis Label yang terasosiasi dengan Input tersebut akan dibaca oleh Screen Reader
  • Label memiliki attribute “for” yang digunakan untuk menentukan Input Id yang dipilih untuk diasosiasikan


Pada contoh di atas, saat kita klik label "Nama" labelnya maka akan auto fokus ke kolom input "Nama", begitu juga saat kita klik label "Email" dan "Telepon". Penghubung antara label dan kolom input adalah attribute "for" dan "id".

08. Input: Type Submit
  • Saat membuat Form, kita bisa menambahkan tombol yang bisa digunakan untuk mengirim data yang diinputkan di dalam form, atau disebut Submit
  • Tombol Submit, bisa kita buat menggunakan Input dengan type Submit


Pada contoh di atas, saat tombol Registrasi di klik, maka isi dari tiap kolom input akan masuk ke url parameter.


09. Form: Attribute Action
  • Seperti yang di materi sebelumnya dibahas, untuk mengirim data di form, kita harus tentukan kemana semua input data akan dikirim menggunakan attribute “action” pada form
  • Kita juga bisa menentukan jenis method, baik itu “get” atau “post” ketika mengirim input data


10. Memproses Input
  • Untuk memproses Input, kita harus menggunakan teknologi berbasis server di Web Server
  • HTML adalah halaman web yang di tampilkan di client (Web Browser), sehingga HTML tidak bisa digunakan untuk memproses input data dari form
  • Untuk memproses data, kita harus menggunakan teknologi berbasis server, misal contohnya adalah PHP, NodeJS, Java, dan masih banyak yang lainnya

11. Input: Type Reset
  • Input dengan type reset, adalah input yang akan ditampilkan dalam bentuk tombol
  • Jika tombol reset tersebut di klik, maka seluruh input di form tersebut, nilainya akan berubah menjadi nilai default seperti yang terdapat di attribute value nya


12. Input: Type Button
  • Membuat tombol tidak hanya bisa menggunakan input type submit atau reset, kita juga bisa menggunakan input type button
  • Namun, menggunakan input type button tidak terlalu berguna jika hanya menggunakan HTML
  • Biasanya, pembuat web akan menambahkan interaksi terhadap tombol tersebut menggunakan kode JavaScript (yang bisa dipelajari setelah belajar HTML dan CSS)


13. Input: Type Checkbox
  • Checkbox adalah input dengan tipe ceklis, dimana kita bisa menceklis atau tidak menceklis input tersebut
  • Biasanya, Checkbox digunakan untuk menerima input lebih dari satu, namun inputnya sudah disesuaikan


Pada contoh di atas, name di tiap input sama karena dianggap satu form. Untuk lebih jelasnya bisa lihat pembahasan input type radio.

14. Input: Type Color
  • Input type color adalah type untuk menerima input warna
  • Warna di HTML akan ditulis dalam bentuk hex code
  • Contohnya kita bisa lihat daftar hex code warna disini : https://www.color-hex.com/ 


15. Input: Type Date
  • Input type date, adalah jenis input untuk menerima informasi berupa tanggal (tahun, bulan dan tanggal)
  • Jika kita ingin mengubah nilai value di input type date, kita bisa menggunakan format yyyy-mm-dd 
  • yyyy adalah tahun dalam 4 digit
  • mm adalah bulan dalam 2 digit
  • dd adalah tanggal dalam 2 digit
  • Untuk membatasi minimal dan maksimal tanggal yang dipilih, kita bisa gunakan atribut min dan max


16. Input: Type Date Time
  • Jika untuk input tanggal bisa menggunakan type date, jika kita butuh sampai ke menit, kita bisa menggunakan Input Date Time, yaitu menggunakan type datetime-local
  • Format value untuk Date Time adalah yyyy-mm-ddThh:mm
  • Dimana tanggal dan waktu dipisah oleh karakter T
  • hh adalah jam dalam format 2 digit
  • mm adalah menit dalam format 2 digit
  • Untuk membatasi minimal dan maksimal waktu yang dipilih, kita bisa gunakan atribut min dan max


17. Input: Type Month
  • Input type month digunakan untuk input informasi berupa tahun dan bulan
  • Format value untuk input type month adalah yyyy-mm
  • yyyy adalah 4 digit tahun
  • mm adalah 2 digit bulan
  • Untuk membatasi minimal dan maksimal bulan yang dipilih, kita bisa gunakan atribut min dan max


18. Input: Type Time
  • Jika kita hanya membutuhkan informasi jam dan menit, kita bisa menggunakan input type time
  • Input type time menggunakan format hh:mm
  • hh adalah jam dalam 2 digit
  • mm adalah menit dalam 2 digit
  • Untuk membatasi minimal dan maksimal waktu yang dipilih, kita bisa gunakan atribut min dan max


19. Input: Type Week
  • Input type week digunakan untuk menerima input minggu dalam satu tahun
  • Total minggu dalam satu tahun berkisar antara 52-53, artinya itu adalah maksimal nilai untuk week
  • Format penulisan week bisa menggunakan pola yyyy-Www
  • yyyy adalah tahun dalam 4 digit
  • ww adalah minggu dalam 2 digit
  • Untuk membatasi minimal dan maksimal minggu yang dipilih, kita bisa gunakan atribut min dan max


20. Input: Type Email
  • Input email adalah input text, namun informasi yang dimasukkan haruslah dalam format email
  • Jika format email tidak benar, secara otomatis form tidak akan bisa di submit


21. Input: Type File
  • Input dengan type file, digunakan untuk meng-upload / mengunggah berkas file dari komputer kita
  • Saat kita membuat input dengan type file, maka agar form mengirim berkas file-nya, kita harus gunakan method post, dan juga enctype multipart/form-data


22. Input: Type Hidden
  • Di HTML, terdapat fitur input type hidden
  • Input type hidden artinya input datanya tidak terlihat oleh pengguna Web
  • Biasanya input data hidden memang tidak dimaksudkan untuk diinputkan oleh pengguna, biasanya pada kasus-kasus tertentu input data hidden digunakan untuk informasi yang dibuat secara otomatis oleh web kita, dan tidak butuh diubah atau dilihat oleh pengguna
  • Misal saat saya mengubah nama pengguna, kita juga mungkin harus tahu user_id dari pengguna, namun kita tidak mau user_id bisa diubah oleh pengguna, kita bisa menggunakan input type hidden untuk user_id nya


23. Input: Type Image
  • Input type image bukan digunakan untuk input berupa berkas gambar, melainkan digunakan untuk membuat tombol submit namun berupa gambar
  • Input type button, submit atau reset menggunakan text untuk tombolnya, sedangkan image menggunakan gambar yang bisa kita ubah menggunakan atribut src
  • Misal : https://interactive-examples.mdn.mozilla.net/media/examples/login-button.png 


24. Input: Type Number
  • Input type number adalah input untuk informasi number atau angka
  • Jika kita menginputkan bukan number atau angka, secara otomatis HTML menganggap nilainya tidak valid
  • Untuk input type number, kita bisa gunakan atribut tambahkan yaitu min dan max
  • min digunakan untuk mengatur nilai minimal
  • max digunakan untuk mengatur nilai maksimal


25. Input: Type Password
  • Input type password adalah input untuk informasi teks sama seperti input type text, namun pada input type password, karakter akan di masking (tidak ditampilkan)
  • Input type password sangat cocok untuk input teks yang rahasia, sehingga tidak bisa diintip oleh orang lain


26. Input: Type Radio
  • Input type radio merupakan input untuk informasi pilihan
  • Pada checkbox, kita bisa memilih lebih dari satu checkbox walaupun menggunakan name yang sama
  • Sedangkan pada radio, kita hanya bisa memilih salah satu saja radio pada input name yang sama
  • Input ini cocok untuk input data pilihan ganda misalnya


27. Input: Type Range
  • Input type range adalah input untuk number / angka namun ditentukan jangkauan minimal dan minimal nya
  • Ini mirip seperti input number, yang membedakan adalah, bentuk komponen inputnya tidak seperti input text, melainkan dalam bentuk slider, yang bisa di slide ke kiri untuk menurunkan nilai dan ke kanan untuk menaikkan nilai
  • Secara default, nilai range naik bertahap sebanyak +1 atau berkurang sebanyak -1, namun jika kita ingin mengubah nilai naik dan turun nya, kita bisa tambahkan atribute step


28. Input: Type Telephone
  • Input type tel bisa digunakan untuk input informasi telepon
  • Namun berbeda dengan input email atau number, aturan di input tel harus kita tentukan sendiri, hal ini karena format telepon di tiap negara berbeda-beda
  • Kita bisa mengubah aturan format nomor telepon menggunakan atribut pattern, dimana isinya harus berisi Regular Expression
  • Materi Regular Expression akan dipelajari di kelas JavaScript, namun disini kita bisa mencoba-coba menggunakan website berikut : https://regexr.com/ 


29. Input: Type Url
  • Input type url digunakan untuk menerima input data dalam bentuk URL, seperti alamat website pribadi, website social media, dan lain-lain
  • Jika format url tidak valid, maka HTML tidak akan menerima input data url tersebut


30. Text Area Tag
  • HTML juga menyediakan tag textarea, yang bisa digunakan untuk input text yang multi baris
  • Untuk menentukan panjang input, kita bisa gunakan atribut cols, dan untuk menentukan tinggi input, kita bisa gunakan rows


31. Button Tag
  • Button tag adalah tag yang bisa kita gunakan untuk membuat tombol
  • Apa bedanya dengan input type button?
  • Karena button tag memiliki content di dalam tag nya, jadi kita bisa dengan bebas menambahkan isi dari button, misal text atau gambar
  • Jadi menggunakan button tag akan lebih flexible dibanding menggunakan input type button
  • Button juga memiliki atribut type, yang bisa kita gunakan untuk mengubah jenis tipe button, dari mulai button (biasa), reset dan submit


32. Select Tag
  • Select tag adalah alternatif lain seperti input type radio
  • Saat menggunakan input type radio, jika opsi pilihan terlalu banyak, maka tampilan input akan sangat panjang
  • Select tag menawarkan solusi yang sederhana, dimana input akan seperti type text, namun kita bisa memilih opsi pilihan seperti radio type

Option Tag
  • Untuk menambah opsi pilihan dalam select tag, kita bisa menggunakan option tag
  • Option tag memiliki atribut value sebagai nilainya, namun untuk ditampilkan dalam Web Browser, kita bisa isi option tag dengan content misal text
  • Selain itu, jika kita ingin memilih secara default salah satu option, kita bisa menggunakan atribut selected


33. Select Multiple
  • Salah satu kelebihan dibandingkan radio type, di dalam select tag, jika misal kita bisa memilih beberapa opsi pilihan seperti checkbox, kita bisa gunakan atribut multiple
  • Untuk menentukan seberapa besar tampilan ketika menggunakan mode multiple, kita bisa gunakan atribut size

Option Group Tag
  • Saat pilihan option sangat banyak, kadang ada baiknya kita buat option dalam grup
  • Hal ini akan membuat pengguna lebih mudah ketika melakukan pemilihan
  • Kita bisa bungkus option dalam grup menggunakan optgroup tag
  • Dan untuk menambahkan deskripsi grup, kita bisa gunakan atribut label


34. Data List Tag
  • Saat melakukan pencarian di Google misalnya, kita sering melihat rekomendasi berupa autocomplete kata-kata yang ingin kita cari
  • Saat kita membuat input type text, kita bisa menambahkan sumber data yang bisa dijadikan sebagai rekomendasi input value, juga autocomplete
  • Kita bisa menggunakan datalist tag
  • Di dalam datalist tag, kita bisa gunakan option tag
  • Untuk menghubungkan dari input type text ke datalist, kita bisa menggunakan atribut list yang mengacu ke id datalist


35. Field Set Tag
  • Tag fieldset digunakan untuk membungkus / grouping beberapa input sehingga lebih mudah untuk dimengerti ketika dilihat oleh pengguna
  • Menggunakan fieldset tag sangat baik ketika misal input data sangat banyak, dan kita ingin melakukan grouping input data yang sesuai
  • Contoh ketika registrasi, dibutuhkan identitas, alamat, dan lain-lain, kita bisa grouping berdasarkan input data yang sesuai

Legend Tag
  • Saat menggunakan fieldset tag, biasanya kita akan menambahkan informasi berupa deskripsi group
  • Untuk menambahkan informasi itu, kita bisa menggunakan legend tag


Source: Youtube Programmer Zaman Now