Fungsi Atribut Required pada HTML

Hallo teman-teman, kali ini kita akan membahas tentang fungsi atribut required pada HTML. Atribut ini biasa dijumpai pada tag yang berhubungan dengan form. Seperti contoh pada tag input. Tag input pada html akan menampilkan textbox dengan berbagai macam type seperti text, email, password, dan lain-lain. Lalu atribut required fungsinya untuk apa ? .

Fungsi atribut required itu adalah untuk meminimalisir kesalahan pengguna saat pengisian form, misalnya harus mengisi semua kolom form yang tertera, namun jika ada yang terlewat maka atribut required ini akan memberi tahu kepada pengguna ada form yang terlewat. Untuk lebih jelas teman-teman bisa ikut contoh dibawah ini.

form.html

<html>
	<head></head>
	<body>
		<form action="test.html">
			<input type="text" placeholder="nama">
			<br><br>
			<input type="password" placeholder="password">
			<br><br>
			<input type="submit" value="Masuk"> 
		</form>
	</body>
</html>

lalu buat lagi file html seperti dibawah ini.

test.html

<html>
	<body>
		<h1>Berhasil !</h1>
	</body>
</html>

file diatas untuk pindah halaman saat tombol pada form ditekan.

Sekarang teman-teman praktikan lalu lihat pada browser kalian. Coba teman-teman tidak perlu mengisi isi formnya kemudian langsung tekan tombolnya. Apa yang terjadi ?

Browser akan pindah halaman ke test.html.

Tentukan ini akan menjadi masalah dikemudian hari jika form belum diisi namun pengguna bisa masuk/pindah ke halaman selanjutnya.

Maka dari itu teman-teman bisa mengakalinya dengan atribut required. Teman-teman bisa tambahkan atributnya seperti code dibawah ini.

<html>
	<head></head>
	<body>
		<form action="test.html">
			<input type="text" placeholder="nama" required="required">
			<br><br>
			<input type="password" placeholder="password" required="required">
			<br><br>
			<input type="submit" value="Masuk"> 
		</form>
	</body>
</html>

Maka hasilnya akan seperti dibawah ini jika form belum diisi.

Sekian pembahasan mengenai fungsi atribut required pada HTML. Semoga bermanfaat.