Login Form In Html Css

A well-designed login form in HTML and CSS is an essential component of many websites and web applications. It serves as the gateway for users to access protected content or their personal accounts. Creating an effective login form involves combining the structural elements of HTML with the styling capabilities of CSS to achieve both functionality and aesthetics. HTML provides the necessary input fields, labels, and structure, while CSS adds visual appeal, ensuring the form aligns with the overall design of the website. With the right combination of HTML and CSS, developers can create a seamless and user-friendly login experience, improving both the security and accessibility of their websites.

In this article, we'll explore the key elements and techniques required to craft a stylish and functional login form using HTML and CSS. For gsap animations, you can follow the gsap playlist. You can explore further articles on web development by checking out this list.

01. Html
02. CSS
03. Output
04. Youtube Video

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
<head>
  <title>Login Form In Html Css</title>
</head>
<body>

  // Content

</body>
</html>

You can incorporate all the required links and dependencies into the HTML document using the code snippet provided below.

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>Login Form | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <h2>Login</h2>
    <div class="form-container">
      <form>
        <input type="text" placeholder="Username" required>
        <br>
        <input type="password" placeholder="Password" required>
        <br><br>
        <button type="submit">Login</button>
      </form>
    </div>
  </div>

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

Read Also:

CSS:

@import url(https://fonts.googleapis.com/css?family=Poppins);

body {
  padding: 0px;
  margin: 0px;  
  font-family: "Poppins", sans-serif;        
  background: #171717;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);     
  width: 400px;
  min-width: 200px;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.1);
  background: #E1E1E1;
  color: black;
  padding: 30px;
  border-radius: 6px;
  box-sizing: border-box;
}

.container h2 {
  padding: 0px 15px;
  letter-spacing: 1px;
}

.form-container {
  padding: 16px;
}

input[type=text], input[type=password], button {
  width: 100%;
  padding: 4px 0px;
  margin: 40px 0px 0px 0px;
  display: inline-block;
  box-sizing: border-box;
  color: black;
  font-weight: 600;
  background-color: transparent;
  border: 0px solid black;
  border-bottom: 2px solid black;
  border-radius: 0px;
}

input[type=text]:focus, input[type=password]:focus {
  outline: none;
}

button {
  padding: 14px 20px;
  cursor: pointer;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  border-radius: 40px;
  border: 0px solid black;
}

button:hover {
  background: rgba(0, 0, 0, 0.8);
}

Read Also:

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Login Form In Html Css", if you want to watch demo you can click on below video.

Read Also:

Archive