Cara membuat input tanggal di html

Kita langsung mulai praktek coding. Saya telah membuat file baru dengan nama input.html. Kita buat dahulu html boilerplate. Lalu kita buat judul Contoh Input.

Setelah header, kita tambahkan dahulu tag form. Selanjutnya kita akan mencoba membuat date picker dahulu ya. Kita tambahkan tag label dengan konten Tanggal. Lalu kita tambahkan input dengan type=”date”, ID dan Name Tanggal. Kita tambahkan 2 buah tag BR. Dan terakhir kita buat input dengan type submit.

Kita coba hasilnya pada browser. Kita bisa melihat bahwa kita sudah mendapatkan kontrol date picker yang canggih, langsung dari browser Chrome. Apabila tombol kalendar yang berada disebelah kanan textbox diklik, maka akan muncul kalendar. Kita bisa memilih langsung tanggal dari kalendar, dan kita juga bisa berpindah ke bulan lain, atau bahkan tahun yang lain. Kita juga bisa mengisikan date picker secara langsung di textboxnya, sebagai contoh saya coba masukkan 01/31/1999.

Dan kalau kita tekan tombol submit, kita bisa lihat nilai yang dikirimkan ke server adalah 1999-01-31. Artinya format tanggal yang dikirimkan ke server berbeda dari format yang kita lihat pada kontrol ya. Kalau pada kontrol, formatnya adalah bulan, garis miring tanggal, dan garis miring tahun. Sedangkan yang dikirim ke server adalah tahun, strip bulan, strip tanggal.

Kelemahan dari input date ini adalah tidak bisa di-customize ya. Misalkan format tanggal pada kontrol disini adalah bulan garis miring tanggal garis miring tahun. Sedangkan format yang biasanya kita gunakan di Indonesia adalah tanggal dash bulan dash tahun.

Selanjutnya kita akan mencoba membuat kontrol month picker. Kita tambahkan dahulu label Bulan. Dan setelah itu kita tambahkan input dengan type=”month”, ID dan Name bulan. Terakhir kita tambahkan dua buah tag BR.

Kita lihat hasilnya pada browser. Month Picker disini mirip dengan Date Picker ya, hanya saja disini tidak ada tanggalnya. Setelah kita pilih bulan yang kita mau dan kita tekan tombol submit. Nilai yang dikirimkan ke server adalah tahun dash bulan.

Kita juga bisa membuat kontrol yang meminta Week atau minggu dari pengguna. Bisa ditebak ya, typenya adalah “week”. Kita tambahkan label terlebih dahulu di kode HTML kita, kali ini kita tambahkan langsung dibawah form ya, agar nanti kita bisa lebih mudah melihat data yang disubmit ke server. Kita tambahkan label dengan konten Minggu.

Bisa kita lihat di browser, kita akan mendapatkan week picker yang bisa digunakan untuk memilih minggu keberapa dari tahun ini. Dan kalau kita coba submit ke server, maka data yang dikirimkan adalah tahun dash huruf W diikuti dengan minggu keberapa dalam tahun ini.

Nah, kita sudah mempelajari mengenai beberapa kontrol untuk mengambil tanggal. Tentunya kurang lengkap kalau tidak ada kontrol untuk mengambil waktu. Kita coba tambahkan ke kode kita. Buat label baru dengan konten Jam. Lalu kita tambahkan tag input dengan type=”time”, lalu ID dan namenya adalah Jam.

Kita bisa coba di browser, sekarang kita sudah memiliki time picker. Format yang digunakan di browser adalah 12 jam dengan tambahan AM PM. Satu hari ada 24 jam ya, dibagi dua menjadi 12 jam pertama AM, kemudian diikuti dengan 12 jam kedua PM. Sekarang kita coba masukan waktu 9:30PM dan kita tekan tombol submit. Kita bisa melihat hasilnya adalah 21%3A30. %3A adalah encoding URL untuk simbol titik dua ya. Jadi hasil yang dikirim ke server adalah 21:30. Mengapa pukul 21? Karena kita memilih pukul 9PM, yang setelah diterjemahkan ke sistem waktu 24 jam akan berubah menjadi pukul 21.

Kita juga bisa membuat kontrol color picker hanya dengan kode HTML ya. Dengan menggunakan color picker ini, kita bisa meminta pengguna untuk memilih warna yang diinginkan. Sebagai contoh, kita tambahkan dahulu label baru dengan konten warna. Lalu kita tambahkan input dengan type=”color” dan id name warna. Tambahkan juga dua buah tag BR agar lebih rapi.

Kita lihat hasilnya di browser. Kita sudah mendapatkan kontrol color picker yang bentuknya kotak hitam. Apabila kita klik, maka kita bisa memilih warna yang kita inginkan. Misalkan kita pilih warna merah. Lalu kita tekan tombol submit.

Kita bisa lihat di URL bahwa nilai warna yang dikirim ke server adalah %23ff0000. %23 adalah encoding URL untuk simbol hashtag. Jadi nilai yang dikirim ke server adalah #ff0000. Ini adalah standar pewarnaan RGB yang biasa digunakan. Kita menggunakan 6 digit hexadesimal, dimana dua digit pertama menyebutkan jumlah warna merah, diikuti dengan 2 digit jumlah warna hijau dan yang terakhir adalah dua digit warna biru.

Agar lebih jelasnya kita bisa melihat lagi pada browser. Misalnya saya klik color picker dan saya geser ke warna merah, maka kita bisa lihat bahwa nilai warna merah atau Red berubah menjadi 255. Disini huruf R artinya Red atau merah. Huruf G artinya Green atau Hijau. Dan huruf B artinya Blue atau Biru. Lalu kita bisa klik tombol di kanan bawah ini untuk mengubah tampilan dari RGB menjadi kode Hex. Dan kita mendapatkan kode hexadesimal dari warna ini yang akan dikirimkan ke server, yaitu #ff0000.

Kita bisa menggeser slider ini untuk melihat kombinasi warna yang dihasilkan, dan nilai dari Red Green Blue-nya. Kalau dari merah kita geser ke kanan, maka kita bisa melihat nilai blue semakin naik, kemudian nilai red semakin menurun. Hingga akhirnya kita mendapatkan warna biru sempurna dimana nilai red 0, green 0, dan blue 255. Dan kalau kita geser ke kanan lagi maka nilai green semakin naik, lalu nilai blue semakin menurun hingga akhirnya kita mendapatkan warna hijau sempurna. Dan kalau kita geser ke kanan lagi maka nilai red akan semakin naik, lalu warna green menurun hingga akhirnya kita mendapatkan kembali warna merah. Kita bisa lihat juga perubahan nilai ini dalam format hexadesimal.

Tipe kontrol yang terakhir kita bahas dalam video ini adalah range. Dengan menggunakan kontrol ini, maka kita akan membuat sebuah slider yang akan membantu pengguna untuk menentukan nilai berapa yang hendak dikirimkan ke server kita. Sebagai contoh, kita buat label baru dengan konten tingkat kepuasan. Lalu kita tambahkan input dengan type=”range”, id dan nama puas. Dan kita tambahkan dua buah tag BR agar lebih rapi.

Kita tes pada browser. Bisa kita lihat disini bahwa kita sudah mendapatkan sebuah slider untuk mengisikan seberapa tinggi tingkat kepuasan pengguna. Apabila kita tidak menambahkan attribute lain pada range, maka posisi awal slider berada di tengah. Kita coba langsung tekan tombol submit dan kita bisa lihat bahwa nilai puas yang dikirim ke server adalah 50. Kita coba submit nilai slider penuh, maka nilai puasnya adalah 100. Sedangkan kalau kita geser ke kosong, maka nilai puasnya adalah 0.

Ada beberapa attribute yang bisa kita tambahkan untuk tipe range. Yang pertama adalah step. Dengan adanya step maka kita bisa mengatur berapa nilai yang akan bertambah atau berkurang pada saat kita menggeser slider. Misalkan kita tambahkan attribute step=”25”. Maka bisa kita lihat disini bahwa pergeseran slidernya hanya bisa kita geser sebanyak 5 kali ya, dimulai dari nilai awal 0, 25, 50, 75, 100.

Selain itu kita juga bisa mengatur nilai paling kecil dan nilai paling besar dari range ini, dengan menggunakan attribute min dan max. Misalnya kita ubah dahulu nilai step menjadi 1. Lalu kita tambahkan nilai paling kecil menjadi 1 dengan attribute min=1. Dan kita tambahkan nilai paling besar menjadi 5 dengan nilai attribute max=5.

Kita bisa coba di browser ya. Kita bisa submit nilai slider paling kecil dan melihat hasilnya adalah 1. Dan kita juga bisa tes nilai paling besarnya adalah 5.

Kita juga bisa mengatur nilai awal dari slider agar jangan berada di tengah ya. Misalkan kita ingin agar nilai awalnya adalah penuh. Maka kita tambahkan attribute value=”5”. Kita refresh browser. Dan sekarang kita lihat bahwa nilai awal slider adalah penuh. Jadi apabila pengguna tidak mengubah slider, dan langsung menekan tombol submit, maka kita akan mendapatkan nilai puas=5.

Bagi yang tertarik untuk mempelajari lebih banyak tipe pada elemen Input, bisa melakukan search di Google dengan kata kunci html input type. Kita bisa melihat referensi dari w3schools.com. Disini ada banyak tipe yang bisa kita gunakan pada elemen input. Memang ada beberapa yang masih belum dibahas dalam video ini. Anda bisa melihat referensi dari sini dan mencoba sendiri. Khusus untuk tipe checkbox dan radio, nantinya akan kita bahas secara khusus di video tersendiri.

Kita review kembali apa yang telah kita pelajari pada video ini.

Kita telah mempelajari beberapa jenis kontrol yang bisa kita buat hanya dengan mengubah nilai attribute type dari elemen Input. Yang pertama adalah Date Picker, yang bisa kita buat dengan menuliskan type=”date”. Dengan menggunakan Date Picker, kita bisa meminta pengguna untuk memasukan data yang berupa tanggal, bulan dan tahun.

Selanjutnya kita bisa membuat Month Picker, dengan menggunakan attribute type=”month”. Dengan menggunakan Month Picker ini, kita bisa meminta data yang hanya berupa bulan dan tahun saja.

Ada juga kontrol yang bisa membantu pengguna untuk memilih minggu keberapa dalam tahun ini. Kita bisa membuat kontrol ini dengan menggunakan attribute type=”week”.

Setelah ada begitu banyak kontrol yang berfungsi untuk memilih tanggal, tentunya tidak lengkap kalau tidak ada Time Picker ya. Ternyata HTML 5 juga telah menyediakan time picker yang bisa kita gunakan dengan cara menuliskan attribute type=”time”. Dengan menggunakan time picker ini, kita bisa meminta data berupa jam dan menit.

Ada juga kontrol yang berfungsi agar pengguna dapat memilih warna. Kontrol ini dapat kita buat dengan menggunakan attribute type=”color”. Color Picker akan mengirimkan nilai RGB yang dipilih oleh pengguna, dalam format hexadesimal.

Kontrol terakhir yang kita pelajari dalam video ini adalah Range. Kontrol ini akan membuat slider sehingga pengguna lebih mudah dalam menentukan nilai yang diinginkan. Kita bisa mengatur nilai minimal dan maksimal dengan cara menggunakan attribute min dan max. Attribute step digunakan untuk menentukan interval antar nilai di dalam range, misalnya kalau kita memasukan nilai step=”2”, maka pada saat pengguna menggeser slider dari paling kiri ke kanan, maka nilainya akan berubah dari 1 menjadi 3, dan kemudian menjadi 5.

Apa itu tag form HTML?

Bagaimana cara membuat form pada web di HTML?

Atribut apa saja yang di gunakan membuat form dalam document HTML?

Apa itu form dalam pemrograman?