Atribut Required Pada HTML

Update Terakhir pada

Assalamualaikum Wr. Wb.

Sahabat Webhozz dimanapun berada, kali ini kita akan belajar tentang atribut required pada html.

Biasanya atribut ini pernah digunakan untuk form.

Nah, tentunya atribut required ini dipakai untuk meminimalisir kesalahan pemakai tiap input.

Misalkan ada salah satu kolom kosong karena lupa atau lain sebagainya, maka akan ada pesan validasinya.

Dengan tujuan agar si pemakai tahu akan kesalahannya tersebut.

Sebelumnya kita pernah bahas menggunakan Javascript, linknya ada disini (https://www.webhozz.com/blog/?s=validasi).

Itu kan pake javascript, pake html juga bisa kok.

Oke, kita langsung coba ya.

  1. Ketikkan script html seperti biasanya.
//===========================
<!DOCTYPE html>
<html>
<head>
	<title>Required HTML</title>
</head>
<body>

</body>
</html>
//===========================

2. Selanjutnya sebagai contoh kita buat form login. Buat script kodenya pada tag .

//===========================
<form>

	<h3>Login</h3>
	
	<p>
		Username : <br>
		<input type="text" name="username">
	</p>

	<p>
		Password : <br>
		<input type="password" name="password">
	</p>

	<p>
		<input type="submit" value="LOGIN">
	</p>

</form>
//===========================

3. Maka akan tampil di browser seperti ini.

4. Tambahkan atribut required pada tag input, tepatnya pada type text dan password.

//===========================
<form>

	<h3>Login</h3>

	<p>
		Username : <br>
		<input type="text" name="username" required="">
	</p>

	<p>
		Password : <br>
		<input type="password" name="password" required="">
	</p>

	<p>
		<input type="submit" value="LOGIN">
	</p>

</form>
//===========================

5. Maka jalankan di browser, selanjutnya silahkan klik tombol login maka akan terjadi seperti ini.

6. Nah, coba isi usernamenya lalu passwordnya dikosongkan, lalu klik lagi tombol loginnya.

Nah, gampang kan??? Demikianlah share ilmu kali ini. Semoga bermanfaat ya, amin.

Wassalamualaikum Wr. Wb.