Fungsi Atribut Required pada HTML

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



Kegunaan atribut required itu yakni bagi meminimalisir kesalahan pengguna ketika penginputan form, misalnya mesti mengisi segala kolom form yang tertera, namun kalau ada yang terlewat karenanya atribut required ini akan memberi tahu kepada pengguna ada form yang terlewat. Bagi lebih jelas teman-teman dapat 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 bikin lagi file html seperti dibawah ini.



test.html



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


file diatas bagi pindah halaman ketika tombol di form ditekan.



Kini teman-teman praktikan lalu lihat di browser kalian. Coba teman-teman tak perlu mengisi isi formnya kemudian seketika tekan tombolnya. Apa yang terjadi ?



Atribut



Browser akan pindah halaman ke test.html.



Atribut



Tentukan ini akan menjadi masalah dikemudian hari kalau form belum diisi namun pengguna dapat masuk/pindah ke halaman berikutnya.



Karenanya dari itu teman-teman dapat mengakalinya dengan atribut required. Teman-teman dapat 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>


Karenanya hasilnya akan seperti dibawah ini kalau form belum diisi.



Atribut



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



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS