🎬Login Form Validation | HTML CSS & Javascript🙌

#html #css #beginners #javascript

Lets Create a Login Form Validation | HTML CSS & Javascript, Step-by-Step in a Very Easy to Follow Along Tutorial.

Source Code:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form Validation</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <div class="wrapper">
    <form action="#" class="box" method="post">
      <h1>Login</h1>
      <!-- User Input -->
      <div class="username">
        <input type="text" placeholder="Enter Username" id="username">
        <i class="far fa-envelope"></i>
      </div>

      <!-- Password Input -->
      <div class="password">
        <input type="password" placeholder="Enter Password" id="password">
        <i class="fas fa-lock-open"></i>
      </div>

      <!-- Button -->
      <button id="btn" type="submit" onclick="validate()">Login</button>

    </form>
  </div>

  <script src="app.js"></script>
</body>

</html>

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started