Login Page Improvements/Changes
I'm still learning html and css. What can I improve in my login page?
<body>
<div class="main-container">
<div class="form-container">
<h1>Login</h1>
<form action="">
<div class="input-container">
<label for="">Username</label>
<input type="text">
</div>
<div class="input-container">
<label for="">Password</label>
<input type="password">
</div>
<div class="button-container">
<button>Login</button>
</div>
<div class="create-account">
<a href="">Create an account</a>
</div>
</form>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main-container {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.form-container {
height: 500px;
width: 440px;
border-radius: 10px;
border: solid 1px #000000;
}
.form-container h1 {
margin: 20px 0;
text-align: center;
}
form {
margin: 90px 0;
}
.input-container {
width: 100%;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.input-container input {
width: 60%;
padding: 20px 0;
border-radius: 5px;
}
.button-container {
width: 100%;
display: flex;
margin: 20px 0;
justify-content: center;
}
.button-container button {
width: 60%;
padding: 20px 0;
border-radius: 5px;
}
.create-account {
display: flex;
margin: 20px 0;
align-items: center;
justify-content: center;
}
.create-account a {
text-decoration: none;
}
3 Replies
A few things stand out to me:
- The form element should probably have a method="POST" (but this may depend on how you are actually going to process the form)
- All form fields should have either an id or a name.
- The label "for" attribute should be linked to the id of the form field.
- Adding "required" to the input fields will ensure that the user adds some input before being able to submit the form.
- placeholders are generally recommended.
You're right! But did I mess up or use the properties incorrectly in the css part?
the fixed-heights are a bit risky if you intend for this to be responsive. you're asking for overflow at some point as the screen width reduced and the content needs to wrap/get longer to account for the decrease in screen real-estate