Styling a Form using HTML5 and CSS

Flexbox and simple CSS

For many new developers, CSS seems like a very daunting task. However, honing this skill is incredibly important. Who would want to use a website that looks like it came from the late 90s?

Yeah, that’s not exactly aesthetically pleasing.

We have better tools now to make more visually appealing websites. In this post, we’ll just be styling a simple Login form. Here’s a look at the finished product.

Simple Login Form

We won’t be adding the “eye with slash” icon to toggle password visibility though I recommend adding it to your form! I also recommend reading up on accessibility standards and the HTML attribute aria-label.

This blog is written with the assumption you know how to create a form. Here’s the HTML we’ll be working with:

<div id='form-container'>
     <form aria-label='login form' id='login-form'>
       <input 
         aria-label='username input' 
         type='text' 
         name='username' 
         id='username-input' 
         placeholder='Username'
       />
       <input 
         aria-label='password input' 
         type='password' 
         name='password' 
         id='password-input' 
         placeholder='Password'
       />
       <div>
         <input 
           type='submit' 
           id='login-button' 
           value='Login'
         />
         <button id='reset' type='reset'>Reset
         </button>
       </div>
     </form>
</div>

If you’d like to add visible labels for your inputs, you can add the <label> tag. For my form, I added the aria-label attribute since I do not have any visible labels.

Your form should look like this:

Login Form with No CSS

We’ll be using the Flexbox Layout to style our form. It’s used to style components of an application and for smaller-scale layouts.

I learned an easy way to use Flexbox properties by creating classes for each property. Take a look:

.flex {
    display: flex;
}
.align-center {
    align-items: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-evenly {
    justify-content: space-evenly;
}
.justify-center {
    justify-content: center;
}
.flex-direction-column {
    flex-direction: column;
}

If you’re new to Flexbox, you can take a look at CSS Trick’s comprehensive guide that I linked above. Two major things to note are: the default flex-direction is row and think of working with your elements on an x and y axis. The properties justify and align flip when you use the flex-direction column.

I added these new CSS classes to my HTML form.

<div class='flex justify-center' id='form-container'>
     <form aria-label='login form' class='flex flex-direction-column justify-between' id='login-form'>
       <input 
         aria-label='username input' 
         type='text' 
         name='username' 
         id='username-input' 
         placeholder='Username'
       />
       <input 
         aria-label='password input' 
         type='password' 
         name='password' 
         id='password-input' 
         placeholder='Password'
       />
       <div class='flex justify-evenly'>
         <input 
           type='submit' 
           id='login' 
           value='Login'
         />
         <button id='reset' type='reset'>Reset
         </button>
       </div>
     </form>
</div>

Your form should look like this now:

Form with Flexbox

Let’s git rid of the borders around our inputs and just get that line underneath. In your CSS file, select your input ids:

#username-input, #password-input {
    height: 5vh;
    padding-left: 0.5em;
    border: none;
    border-bottom: 2px solid #3b3b3b;
}

Next, we’ll style our buttons.

#login, #reset {
    border-style: none;
    border-radius: 8px;
    padding: 10px;
}

Now, let’s style the form itself.

#login-form {
    padding-top: 5em;
    min-height: 23vh;
    width: 20%;
    color: gray;
}

…And done! You now have a simple login form!

With plain HTML, forms are pretty unappealing. However, with some simple CSS, you can spruce it up!