The "login form" will be the main topic of this article's examination of HTML forms. We will also discuss some CSS styling while doing this. The coding used to create this form used Google fonts and box icons, which is why the second link in the HTML document's header section and the imported URL in the CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<form action="">
<h1>Login</h1>
<div class="input-box">
<input type="text" placeholder="username"
required><i class="bx bxs-user"></i>
</div>
<div class="input-box">
<input type="password" placeholder="password" required><i class="bx bxs-lock-alt"></i>
</div>
<div class="remember-forgot">
<label><input type="checkbox">Remember me</label>
<a href="#">forgot password?</a>
</div>
<button type="submit" class="btn">login</button>
<div class="register-link">
<p>Don't have an account?<a href="#">Register</a></p>
</div>
</form>
</div>
</body>
</html>
The link to the CSS and the link for the box icons are included in the head tag as is to be expected. In order to potentially make decorating easier, the block-level element "div>" (parent div) with a class of "wrapper" was used in this form as a container for the form. Every HTML form starts with a form tag that, as can be seen in the code, has an action property that specifies the form's destination when it is submitted.
The placeholder element ensures that the text in the username and password input boxes stays in the box until the text is entered, and the "required" tag ensures that the form cannot be submitted without the required fields being filled in. The label for the checkbox input type has the text "remember me" and a hyperlink that reads "forgot password" that is included in a div with the class "remember-forgot".
The submit button type, which is labeled "login" on the form, is a very significant component of it. Last but not least, there is the hyperlink "register" that is linked to the "don't have an account?" query. A form closing tag and a div closing tag are used to close the form.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: url(img.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.wrapper{
width: 420px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(20px);
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
color: #fff;
border-radius: 10px;
padding: 30px 40px;
}
.wrapper h1 {
font-size: 36px;
text-align: center;
}
.wrapper .input-box {
position: relative;
width: 100%;
height: 50px;
margin: 30px 0;
}
.input-box input {
width: 100%;
height: 100%;
background: transparent;
border: none;
outline: none;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 45px 20px 20px;
}
.input-box input:placeholder {
color: #fff;
}
.input-box i {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.wrapper .remember-forgot {
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}
.remember-forgot label input {
accent-color: #fff;
margin-right: 3px;
}
.remember-forgot a {
color: #fff;
text-decoration: none;
}
.remember-forgot a:hover {
text-decoration: underline;
}
.wrapper .btn {
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight:600;
}
.wrapper .register-link {
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;
}
.register-link p a{
color:#fff;
text-decoration: none;
}
.register-link p a:hover {
text-decoration: underline;
}
This login form makes use of external styling, and a separate CSS file is created. The CSS document begins with the imported URL for the Google fonts which merges the file with the styling done on the CSS document.
The universal selector(*), which selects everything on the page, comes next, then targeting the body, which styles all of the page's content. The class name (.wrapper), which has a full stop in front of it, is used to target the parent div. It should be observed that the CSS targets all elements having a "class" in this manner for style. Also, note that the parent tag is targeted before the inner tag as specified in the HTML document.
Top comments (0)