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
Chris Bolson
Chris Bolson5w ago
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.
vencewho5w ago
You're right! But did I mess up or use the properties incorrectly in the css part?
clevermissfox4w ago
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