Input dalam Formulir HTML - Zidni Ilma (2023102003)

Formating Formulir HTML dengan menggunakan Input

Dalam pengembangan web, formulir HTML adalah komponen penting dalam pembuatan halaman web interaktif. Elemen ini memungkinkan pengguna memasukkan informasi yang diperlukan, seperti nama atau alamat email, yang kemudian dapat dikirimkan dan diproses oleh server. Elemen penting dalam form adalah input. Elemen input memungkinkan pengguna untuk memasukkan berbagai jenis data, mulai dari teks sederhana hingga file.

Elemen input memiliki banyak macamnya, antara lain:

1.     Input Color

Input warna dalam form HTML memungkinkan pengguna untuk memilih warna secara visual dari sebuah palet warna. Fitur ini sangat berguna dalam aplikasi yang membutuhkan personalisasi tampilan, seperti desain tema, pemilihan warna latar belakang, atau penyesuaian warna teks.

Untuk membuat input warna, kita menggunakan elemen input dengan tipe color. Berikut sintaks dasarnya. Contoh:

Ketika halaman ini dibuka, akan muncul sebuah kotak kecil dengan palet warna. Pengguna dapat mengklik warna yang diinginkan untuk memilihnya.

warna yang dipilih melalui palet

 

2.     Input Date Time

            Input datetime dalam form HTML memungkinkan pengguna untuk memilih tanggal dan waktu secara bersamaan. HTML sendiri telah menyediakan beberapa tipe input untuk memilih tanggal dan waktu yaitu:

a. Date: Memungkinkan pengguna memilih tanggal saja.

Kode yang digunakan

Output yang ditampilkan

b. Time: Memungkinkan pengguna memilih waktu saja. 

Kode yang digunakan

 

Output yang ditampilkan

c. Datetime-local: Memungkinkan pengguna memilih tanggal dan waktu dalam zona waktu lokal.

Contoh

Output

Format pada input date time adalah YYYY-MM-DDThh:mm, dimana:

·       YYYY: Tahun

·       MM: Bulan (01-12)

·       DD: hari (01-31)

·       T: pemisah antara waktu dan tanggal

·       hh: jam (00-23)

·       mm: menit (00-59)

3.     Input File

Input file dalam HTML memungkinkan pengguna untuk memilih satu atau lebih berkas dari perangkat mereka untuk diunggah ke server.

Contoh

Output

4.     Input Form Hidden

Input form tersembunyi adalah elemen form HTML yang tidak terlihat oleh pengguna tetapi tetap dikirimkan ke server saat formulir disubmit.

Contoh

Output

5.     Input Number

Input number adalah jenis input dalam HTML yang khusus dirancang untuk menerima input berupa angka. Elemen ini sangat berguna ketika Anda ingin memastikan pengguna hanya memasukkan nilai numerik, seperti usia, jumlah produk, atau nilai rating.

Contoh

Output

6.     Input Password

input type "password" digunakan untuk mengumpulkan informasi sensitif seperti kata sandi pengguna. Ketika pengguna mengetikkan kata sandi, karakter yang dimasukkan akan tersembunyi dan digantikan dengan titik-titik atau simbol lain untuk menjaga kerahasiaan data.

Contoh

Output

Untuk lebih lengkapnya bisa diakses melalui GitHub