Hallo kakak2
Hari ini kita akan membuat sebuah tutorial cara membuat validasi menggunakan HTML tanpa javascript, pada HTML sudah disediakan namanya validasi dengan menggunakan tag "Required oninvalid" kalian tinggal memasukan kata-kata jika data belum diinputkan di kolom, validasi ini sangat di rekomendasikan kepada pemula karena tidak ribet menggunakan script lainnya seperti javascript dan sebagainya. Oke kita langsung saja ke ruang kerja kita,
Berikut adalah form yang belum saya masukkan validasi :
<html>
<head>
<title>form login</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<form action="proseslogin.php" method="post" name="form1">
<table>
<tr id="header">
<td colspan="2"><h2>Login Disini</h2></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username" id="username" placeholder="username"></td>
></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" placeholder="password"></td>
></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Login" value="Login">
<input type="reset" name="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Dan dibawah adalah file yang sudah saya masukkan tag untuk validasinya sebagai berikut :
<html>
<head>
<title>form login</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<form action="proseslogin.php" method="post" name="form1">
<table>
<tr id="header">
<td colspan="2"><h2>Login Disini</h2></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" name="username" id="username" placeholder="username" required oninvalid="this.setCustomValidity('Isi Nama Anda')" oninput="this.setCustomValidity('')"></td>
></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" placeholder="password" required oninvalid="this.setCustomValidity('Isi Password Anda')" oninput="this.setCustomValidity('')"></td>
></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Login" value="Login">
<input type="reset" name="reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
Berikut Penjelasannya script di atas :Merah yang berwarna merah merupakan script untuk membuat validasi original html.
Kuning untuk warna kuning untuk output jika pengguna tidak memasukkan di kolom bersangkutan.
maka jadi nya seperti ini validasi nya :
Mudah bukan sekian dan terimakasih jangan lupa tinggalkan jejak ya kakak2



0 Komentar