HTML Form

Oleh: Soetrisno Soekarno

Rumah Belajar Soetrisno Soekarno

SEBELUM BELAJAR WAJIB MENGUASAI

● HTML Dasar
PENGENALAN HTML FORM
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
CONTOH FORM DI WEB GOOGLE
CONTOH FORM DI WEB FACEBOOK
MEMBUAT PROJECT
MEMBUAT PROJECT

● Silahkan buat project baru dengan nama folder belajar-html-form

● Buka menggunakan Text Editor yang biasa digunakan
FORM TAG
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
KODE : FORM
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)
KODE : FORM ATTRIBUTE
INPUT TAG
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”
 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
KODE : INPUT
INPUT TEXT
INPUT 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
KODE : INPUT TEXT
LABEL TAG
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
KODE : LABEL TAG
INPUT SUBMIT
INPUT 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
KODE : INPUT SUBMIT
MEMPROSES INPUT
FORM 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
KODE : FORM ACTION
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
INPUT RESET
INPUT 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
KODE : INPUT RESET
INPUT BUTTON
INPUT 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)
KODE : INPUT BUTTON
INPUT CHECKBOX
INPUT 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
KODE : INPUT CHECKBOX
INPUT COLOR
INPUT 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/
KODE : INPUT COLOR
INPUT DATE
INPUT 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
KODE : INPUT DATE
INPUT DATE TIME
INPUT 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
KODE : INPUT DATE TIME
INPUT MONTH
INPUT 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
KODE : INPUT MONTH
INPUT TIME
INPUT 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
KODE : INPUT TIME
INPUT WEEK
INPUT 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
KODE : INPUT WEEK
INPUT EMAIL
INPUT 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
KODE : INPUT EMAIL
INPUT FILE
INPUT 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
KODE : INPUT FILE
INPUT HIDDEN
INPUT 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
KODE : INPUT HIDDEN
INPUT IMAGE
INPUT 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
KODE : INPUT IMAGE
INPUT NUMBER
INPUT 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
KODE : INPUT NUMBER
INPUT PASSWORD
INPUT 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
KODE : INPUT PASSWORD
INPUT RADIO
INPUT 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
KODE : INPUT RADIO
INPUT RANGE
INPUT 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
KODE : INPUT RANGE
INPUT TELEPHONE
INPUT 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/
KODE : INPUT TELEPON
INPUT URL
INPUT 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
KODE : INPUT URL
TEXT AREA TAG
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
KODE : TEXT AREA TAG
BUTTON TAG
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
KODE : BUTTON TAG
SELECT TAG
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
KODE : SELECT TAG
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
KODE : MULTIPLE SELECT
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
KODE : OPTION GROUP
DATA LIST TAG
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
KODE : DATA LIST TAG
FIELD SET TAG
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
KODE : FIELD SET TAG
MATERI SELANJUTNYA
MATERI SELANJUTNYA

● CSS Layout
● Bootstrap
● JavaScript