Kamis, 12 Januari 2017

Validasi Mudah Menggunakan Html


          Jika sebelum nya saya pernah memposting artikel tentang validasi dengan menggabungkan antara Javascript dan Html, validasi tersebut sebenarnya agak susah di pahami oleh kalangan pemula akan tetapi sebenarnya ada yang lebih mudah membuat validasi yaitu dengan bahasa program 1(satu) saja,bahasa pemograman apakah itu ? yapz betul sekali HTML jawabannya saya mendapat di salah satu situ terlarang jadi saya analisis scriptnya dan ternyata validasinya lebih mudah dari pada yang menggunakan javascript
jadi saya akan menjelaskan secara detail bagian pembuatan validasinya.

Berikut form yang tidak memakai 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>&nbsp;</td>
<td><input type="submit" name="Login" value="Login">
<input type="reset" name="reset" value="Reset"></td>
</tr>
</table>

</form>

</body>
</html>

Jika saya beri validasi original dari html maka script nya akan menjadi seperti ini :




<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>&nbsp;</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 :

  1. Merah yang berwarna merah merupakan script untuk membuat validasi original html.
  2. Kuning untuk warna kuning untuk output jika pengguna tidak memasukkan di kolom bersangkutan.
maka jadi nya seperti ini validasi nya :


Nah mudah kan dari pada memakai javascript akan tetapi sesuatu yang sulit di kerjakan itu lebih memuaskan dari pada yang mudan atau instan, jika kalian masih bingung kalian dapat meninggalkan komentar kalian di bawah ini dan jika bermanfaat kalian bisa bagikan ke teman-teman anda sekian terimakasih dari saya.

Tidak ada komentar:

Posting Komentar