Validasi Formulir

Artikel ini menjelaskan validasi formulir.

Ini menjelaskan validasi formulir dalam HTML.

YouTube Video

Validasi Formulir HTML

Gambaran Umum Validasi Formulir HTML

• Validasi formulir HTML adalah mekanisme untuk memastikan bahwa data memenuhi kondisi tertentu sebelum pengguna mengirimkannya. Ini mengurangi kesalahan sisi server dan meningkatkan pengalaman pengguna.

Atribut required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Atribut required menentukan bahwa kolom input harus diisi sebelum mengirimkan formulir.

Atribut pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• Atribut pattern digunakan untuk memvalidasi apakah input formulir sesuai dengan pola regex tertentu. Sebagai contoh, ini memeriksa apakah nama pengguna hanya berisi karakter alfanumerik.

Atribut min dan max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Atribut <min> dan <max> digunakan untuk menentukan nilai minimum dan maksimum yang diizinkan untuk elemen input. Mereka biasanya digunakan dengan tipe input seperti number, range, dan date.
• Dalam contoh ini, Anda dapat memasukkan angka antara 18 dan 99.

Atribut minlength dan maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• Atribut minlength menentukan jumlah karakter minimum yang diperlukan untuk kolom input, sedangkan atribut maxlength mendefinisikan jumlah karakter maksimum yang diizinkan.
• Dalam contoh ini, Anda dapat memasukkan teks antara 4 hingga 12 karakter.

Atribut type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• Atribut type="email" digunakan untuk memastikan bahwa masukan dalam format alamat email yang valid. Atribut ini menyediakan fungsi validasi bawaan untuk kolom masukan alamat email.

Atribut type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> menyediakan kolom masukan yang membutuhkan format URL yang benar. Peramban secara otomatis memeriksa apakah masukan valid sebagai URL.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video