Styling a Form using HTML5 and 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?

90s CSS

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!

Game of Thrones Meme — Melissandre

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

Full stack web developer. Frontend and design enthusiast. Avid rock climber and amateur photographer.