Skip to content

Instantly share code, notes, and snippets.

@deletosh
Created December 14, 2020 16:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deletosh/ede3f8a213f6b49c6f75223ea20ab695 to your computer and use it in GitHub Desktop.
Save deletosh/ede3f8a213f6b49c6f75223ea20ab695 to your computer and use it in GitHub Desktop.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="dist/styles.css">
<title>Form Validation</title>
</head>
<body>
<form id="registration-form">
<div class="flex items-center justify-center h-screen bg-gray-400">
<div class="w-1/3 p-6 bg-white rounded shadow-lg" id="my-form">
<div class="my-4" id="my-username">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="your username"
class="base-input block"
>
<div>
<!-- whatever we want -->
</div>
<!-- <small class="hidden">Please enter your username</small>-->
</div>
<div class="my-4">
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="me@domain.com" class="base-input">
<small class="hidden">Please enter your email</small>
<small class="hidden">Success</small>
</div>
<div class="my-4">
<label for="password">Password</label>
<input type="password" id="password" name="password" class="base-input">
<small class="hidden">Please enter your password</small>
<small class="hidden">Success</small>
</div>
<div class="my-4">
<label for="password-2">Confirm Password</label>
<input type="password" id="password2" name="password2" class="base-input">
<small class="hidden">Please enter your Confirm Password</small>
<small class="hidden">Success</small>
</div>
<button class="w-full p-3 bg-green-200">Register Now</button>
</div>
</div>
</form>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment