Scribd
Upload
89 views2 pages

Simple Login Form HTML Example

The document contains HTML code for a simple login form with fields for username and password and a submit button. The form is centered on the page and uses basic styling and layout.

Uploaded by

sk creation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
89 views2 pages

Simple Login Form HTML Example

The document contains HTML code for a simple login form with fields for username and password and a submit button. The form is centered on the page and uses basic styling and layout.

Uploaded by

sk creation
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>
<head>
<title>Simple login form</title>
<link href="[Link]
rel="stylesheet">
<style>
html, body {
display: flex;
justify-content: center;
font-family: Roboto, Arial, sans-serif;
font-size: 15px;
}
form {
border: 5px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 16px 8px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #8ebf42;
color: white;
padding: 14px 0;
margin: 10px 0;
border: none;
cursor: grabbing;
width: 100%;
}
h1 {
text-align:center;
fone-size:18;
}
button:hover {
opacity: 0.8;
}
.formcontainer {
text-align: left;
margin: 24px 50px 12px;
}
.container {
padding: 16px 0;
text-align:left;
}
[Link] {
float: right;
padding-top: 0;
padding-right: 15px;
}
/* Change styles for span on extra small screens */
@media screen and (max-width: 300px) {
[Link] {
display: block;
float: none;
}
</style>
</head>
<body>
<form action="/action_page.php">
<h1>Login Form</h1>
<div class="formcontainer">
<hr/>
<div class="container">
<label for="uname"><strong>Username</strong></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><strong>Password</strong></label>
<input type="password" placeholder="Enter Password" name="psw" required>
</div>
<button type="submit">Login</button>
<div class="container" style="background-color: #eee">
<label style="padding-left: 15px">
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
<span class="psw"><a href="#"> Forgot password?</a></span>
</div>
</form>
</body>
</html>

You might also like