Blogger Jateng
Home / Turtorial

Membuat Formulir dalam HTML: Jenis Masukan dan Validasi

Salah satu elemen utama dalam situs web interaktif adalah formulir. Formulir HTML adalah tempat yang tepat untuk mengumpulkan data pengguna - baik untuk masuk, pertanyaan atau login, dll. Formulir ini bertindak sebagai penghubung antara pengguna yang memasukkan informasi di salah satu ujungnya; dan sistem backend yang bertanggung jawab untuk memanipulasi informasi tersebut. Pada artikel ini kita akan belajar tentang Formulir dalam HTML termasuk jenis-jenis input dengan teknik validasinya.

Struktur Dasar Formulir HTML

Pertama, mari kita tinjau kembali anatomi dari sebuah form - yang menjadi asal dari semua tipe input dan aturan validasi. Elemen form menampung semua input dan memiliki atribut yang menentukan bagaimana data ini akan bekerja.

<form action="/submit_form" method="POST">
  <!-- Form elements go here -->
</form>

Atribut action mendefinisikan URL tempat data formulir dikirim, sedangkan atribut method menentukan bagaimana data formulir dikirimkan. Metode yang paling sering digunakan adalah GET (menambahkan data ke URL) dan POST (mengirimkan data dengan aman di dalam badan permintaan).

Jenis Masukan dalam HTML

HTML menawarkan berbagai jenis input yang melayani berbagai jenis data. Memahami jenis-jenis ini membantu membuat formulir yang lebih ramah pengguna dan efisien.

1. Input Teks (teks) Jenis input yang paling dasar adalah teks. Jenis ini memungkinkan pengguna untuk memasukkan rangkaian teks apa pun.

<input type="text" name="username" placeholder="Enter your username">

2. Masukan Kata Sandi (password) Untuk data sensitif seperti kata sandi, gunakan jenis masukan kata sandi, yang menyembunyikan masukan pengguna.

<input type="password" name="password" placeholder="Enter your password">

3. Input Email (email) Jenis input ini memvalidasi bahwa data yang dimasukkan adalah alamat email yang valid. Jika tidak dalam format yang benar, browser akan secara otomatis menampilkan kesalahan.

<input type="email" name="email" placeholder="Enter your email">

Sumber: revou.co

4. Input Angka (nomor) Gunakan jenis input angka untuk memastikan pengguna memasukkan nilai numerik. Anda juga dapat menetapkan nilai minimum dan maksimum.

<input type="number" name="age" min="18" max="99">

5. Tombol Radio (radio) Tombol radio memungkinkan pengguna untuk memilih satu opsi dari grup.

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

6. Kotak centang (checkbox) Kotak centang memungkinkan pengguna untuk memilih satu atau beberapa opsi dari satu set.

<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter

7. Input Tanggal (tanggal) Jenis input ini menyediakan antarmuka kalender untuk memilih tanggal.

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

8. Tombol Kirim (submit) Input submit mengirimkan data formulir ke server untuk diproses.

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

Menambahkan Validasi Input

Ketika pengguna mengirimkan formulir, kita dapat memvalidasi data tersebut dan Validasi Formulir hanya untuk memastikan pengguna memasukkan data yang benar di masing-masing bidang yang berarti mengoreksi format yang mencakup semua jenis validasi. Memberikan umpan balik instan, memberi tahu pengguna jika kiriman mereka valid dan mencegah data yang tidak valid mengalir ke server.

1. Bidang masukan wajib Untuk membuat pengguna mengisi beberapa hal yang wajib diisi, Anda dapat menggunakan require sebagai atribut Anda. Formulir tidak akan dikirim, kecuali jika kolom wajib diisi.

<input type="text" name="username" required>

2. Validasi Pola Atribut pola memungkinkan Anda untuk menentukan ekspresi reguler yang harus sesuai dengan masukan pengguna. Misalnya, untuk meminta format tertentu dalam nomor telepon:

<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">

3. Validasi Panjang Anda dapat mengontrol jumlah karakter minimum dan maksimum yang dapat dimasukkan oleh pengguna dengan menggunakan atribut minlength dan maxlength.

<input type="text" name="username" minlength="4" maxlength="20">

4. Validasi Email Jenis input email secara otomatis memeriksa apakah email yang dimasukkan valid. Anda dapat menerapkan pola lebih lanjut dengan atribut pola jika diperlukan.

<input type="email" name="email" required>

5. Validasi Angka Dengan type=“number”, Anda dapat menetapkan nilai minimum, maksimum, dan langkah untuk mengontrol input angka.

<input type="number" name="age" min="18" max="60" step="1">

6. Validasi Khusus Formulir HTML5 juga dapat ditingkatkan dengan JavaScript untuk validasi khusus. Metode setCustomValidity () memungkinkan Anda membuat aturan validasi yang lebih kompleks.

const passwordInput = document.querySelector('input[type="password"]');
passwordInput.addEventListener('input', function() {
    if (passwordInput.value.length < 6) {
        passwordInput.setCustomValidity("Password must be at least 6 characters long");
    } else {
        passwordInput.setCustomValidity("");
    }
});

Kesimpulan

Jika Anda seorang pengembang web, membuat formulir dalam HTML seperti tutorial 101 untuk setiap pengembang. Setelah Anda memahami jenis input apa saja yang tersedia, formulir dapat disesuaikan dengan kebutuhan pengguna yang berbeda dan validasi formulir menjamin pengumpulan data yang akurat dan dapat diandalkan. Metode-metode ini adalah beberapa cara yang paling sukses untuk meningkatkan fungsionalitas formulir dan pengalaman pengguna. Aplikasi web menjadi semakin kompleks dan mengumpulkan data dari pengguna menjadi suatu keharusan - harus dilakukan dengan cepat, andal, dan murah.