Macam Macam Tipe Input Pada HTML

Assalamualaikum wr wb selamat datang di blog sederhana ini. Pada kesempatan kali ini saya akan membagikan macam macam input type yang ada pada html. Input type adalah salah satu elemen pada html yang berfungsi untuk menampilkan sebuah bidang formulir dimana kita bisa memasukkan data sesuai dengan tipe inputnya. Seperti misalnya form username yang bisa kita masukkan data berupa nama dan form tanggal yang bisa kita masukkan tanggal sesuai dengan yang dibutuhkan

Beberapa Input type yang akan saya bahas pada kesempatan kali ini terbagi menjadi 4 jenis Inputs yaitu General Inputs, Duration Inputs, Media Inputs, dan Options inputs.

1.General Inputs

General inputs atau Inputs umum adalah tipe input yang paling sering ditemukan apabila ingin mendaftar pada sebuah aplikasi atau website, biasanya kita diminta untuk membuat akun dengan memasukkan username dan password agar data kita saat menggunakan aplikasi atau website tersebut tidak hilang. Berikut beberapa contoh general input dan penulisan sederhananya di code editor:

Tipe input "text" di code editor

Hasilnya

Tipe input "password"

Hasilnya tulisan akan berubah menjadi titik titik

Tipe input "tel"

Hasilnya keyboard Secara otomatis berubah menjadi angka dan form tersebut hanya bisa di isi oleh angka biasanya di isi dengan nomor hp atau kode pada sebuah daerah

Tipe input "button"

Dengan mengubah menjadi "button" yang tadinya berbentuk form sekarang berubah menjadi tombol

2.Duration Inputs

Duration Inputs adalah tipe input yang akan menampilkan form yang bisa kita isikan dengan data berupa tahun, bulan, Minggu ataupun jam. Berikut penulisan sederhana di code editor

Tipe input "date"

Hasilnya apabila form ditekan maka akan memunculkan kalender yang dapat di setel secara manual

Tipe input "time"

Hasilnya apabila form ditekan maka akan memunculkan jam yang dapat di setel seperti gambar di atas

Tipe input "week"

Hasil dari tipe input "week" akan menampilkan opsi seperti gambar di atas

Tipe input "month"

Hasil dari tipe input "month" akan menampilkan pengaturan bulan seperti gambar di atas

Tipe input "datetime-local"

kita dapat membuat form yang dapat di isi dengan tanggal, bulan, tahun, dan jam skaligus hanya dalam 1 form Dengan menggunakan tipe input "datetime-local"

3.Media Inputs

Media input adalah tipe input dimana kita dapat membuat sebuah form yang dapat diisikan file. Tipe input ini sering ditemukan ketika hendak meng-upload sebuah file atau gambar ke sebuah web atau aplikasi tertentu. Contohnya apabila ingin mengumpulkan tugas melalui classroom.