HTML 5 Input

Belajar jenis input pada HTML 5

Jenis-Jenis Input dalam HTML 5

Dalam HTML 5, elemen <input> digunakan untuk membuat elemen formulir yang memungkinkan pengguna untuk memasukkan data. HTML 5 memperkenalkan banyak jenis input baru yang memungkinkan pengembang untuk membuat form yang lebih interaktif dan mudah digunakan. Setiap jenis input memiliki tujuan dan fungsi tertentu yang dapat meningkatkan pengalaman pengguna di halaman web.

Jenis-Jenis Input di HTML 5

HTML 5 menambahkan berbagai tipe input baru yang lebih fleksibel dan modern dibandingkan dengan versi sebelumnya. Berikut adalah beberapa jenis input yang dapat digunakan dalam HTML 5:

1. Text

Jenis input type="text" adalah jenis input paling umum yang digunakan untuk menerima input teks dari pengguna. Ini adalah elemen input standar untuk form.

<input type="text" name="username" placeholder="Masukkan Username">

Contoh demo input teks:

2. Password

Jenis input type="password" digunakan untuk menerima input berupa kata sandi. Karakter yang dimasukkan akan disembunyikan untuk menjaga kerahasiaan data.

<input type="password" name="password" placeholder="Masukkan Kata Sandi">

Contoh demo input password:

3. Email

Jenis input type="email" digunakan untuk menerima input email. HTML 5 akan memvalidasi format email yang dimasukkan oleh pengguna.

<input type="email" name="email" placeholder="Masukkan Email">

Contoh demo input email:

4. Tel (Telephone)

Jenis input type="tel" digunakan untuk menerima input berupa nomor telepon. Ini memungkinkan pengguna untuk memasukkan nomor telepon dengan format tertentu.

<input type="tel" name="phone" placeholder="Masukkan Nomor Telepon">

Contoh demo input nomor telepon:

5. URL

Jenis input type="url" digunakan untuk menerima input berupa URL atau alamat website. HTML 5 akan memvalidasi bahwa input tersebut sesuai dengan format URL.

<input type="url" name="website" placeholder="Masukkan URL">

Contoh demo input URL:

6. Number

Jenis input type="number" digunakan untuk menerima input berupa angka. Anda dapat menentukan batasan nilai minimum dan maksimum yang dapat dimasukkan.

<input type="number" name="quantity" min="1" max="10">

Contoh demo input angka:

7. Date

Jenis input type="date" memungkinkan pengguna untuk memilih tanggal menggunakan elemen kalender. Tanggal yang dipilih akan diserahkan dalam format YYYY-MM-DD.

<input type="date" name="dob">

Contoh demo input tanggal:

8. Time

Jenis input type="time" memungkinkan pengguna untuk memilih waktu tertentu dalam format HH:MM.

<input type="time" name="appt">

Contoh demo input waktu:

9. Range

Jenis input type="range" memungkinkan pengguna untuk memilih nilai dalam rentang tertentu menggunakan slider.

<input type="range" name="volume" min="0" max="100">

Contoh demo input rentang:

10. Checkbox

Jenis input type="checkbox" memungkinkan pengguna untuk memilih beberapa opsi dalam form.

<input type="checkbox" name="subscribe" value="yes"> Berlangganan Newsletter

Contoh demo input checkbox:

Berlangganan Newsletter

11. Radio

Jenis input type="radio" memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan yang tersedia.

<input type="radio" name="gender" value="male"> Laki-laki
<input type="radio" name="gender" value="female"> Perempuan

Contoh demo input radio:

Laki-laki Perempuan

12. File

Jenis input type="file" memungkinkan pengguna untuk mengunggah file dari perangkat mereka.

<input type="file" name="upload">

Contoh demo input file:

13. Submit

Jenis input type="submit" digunakan untuk mengirimkan form ketika tombol diklik oleh pengguna.

<input type="submit" value="Kirim">

Contoh demo input submit:

14. Reset

Jenis input type="reset" digunakan untuk mereset form dan mengembalikannya ke nilai awalnya.

<input type="reset" value="Reset">

Contoh demo input reset:

Kesimpulan

HTML 5 telah memperkenalkan berbagai jenis input baru yang memungkinkan pengembang untuk membuat formulir yang lebih dinamis dan interaktif. Dengan menggunakan berbagai tipe input ini, Anda dapat mengumpulkan data pengguna dengan cara yang lebih terstruktur dan sesuai dengan jenis data yang diperlukan.