No Time Dad

A blog about web development written by a busy dad

Simple Sign In Form Using HTML and Bulma CSS

Introduction

In this age of fancy web frameworks I think it is easy to forget just how far you can get with simple HTML. You have to understand that your users do not care that your site was written with React, Angular, Vue, vanilla JavaScript, or just plain HTML. So I’d encourage you to spend less time deciding on which framework to use for your project and instead focus on shipping your product as quickly as possible. If you can create the form I describe below faster in React than plain HTML then please do that, just don’t spend a lot of time figuring it out.

Kickstart

Here is a script that should get you up and running quickly for the purposes of this demo, but feel free to re-use parts of it for your own purposes. It creates a simple directory structure, creates a stub index.html file for us to work with, downloads the latest bulma.min.css, and starts an http server. The server will require that you have python3 installed, but you could swap in any http server or just open index.html in your browser of choice.

mkdir public public/assets/ public/assets/css
cat > public/sign-in.html << EOF
<!DOCTYPE html>
<html>

<head>
  <title>Simple HTML Form with Bulma CSS</title>
</head>

<body>
<h2>Sign In</h2>

</body>

</html>
EOF
wget -P $(pwd)/public/assets/css https://raw.githubusercontent.com/jgthms/bulma/master/css/bulma.min.css
cd public
python3 -m http.server

If you are running the server you should be able to access the page at http://0.0.0.0:8000/sign-in.html

Creating the Form

I’d like to first focus on the form itself, then add the styling later. In the <body> tag, preferrably under the <h2> tag we’ll add the following html

<form method="POST" id="sign-in-form" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required>
  <label for="password">Password</label>
  <input type="password" name="password" id="password" required>
  <input type="submit" value="Sign In">
</form>

Breaking this down a little bit, we have a required input that is type email and a required input that is type password. So right out of the box you get email validation, required validation, and password obfuscation without adding a single line of JavaScript. Additionally, most modern browsers will show a message for invalid email inputs and a message missing required fields when the user clicks “Sign In”.

This is a huge time savings. You can implement this same form in whatever web framework you’d like and it will work the same. You might be tempted to add custom message handling and other bells and whistles or customizations based on the state of the form, but I’d urge you not to do that and stress that this basic little form is probably more than enough for most “Minimum Viable Product (MVP)“. I would, however, suggest that you add some styling to form. Preferrably styling that matches the rest of your site, but I would also recommend not spending a ton of time on making sure it matches perfectly or that everything is aligned perfectly on every single device. You can figure that stuff out later once the product is shipped.

The other great thing happening here is that the form will send a POST request to any url specified in the action attribute with the input name attributes as key value pairs. So once the form is valid and you clicked “Sign In” you’d see a POST request go out with the request payload of email=notimedev%40notimedev.dev&password=password for example. You don’t need to do anything special to have the form do this, and you can change the value of the name attribute to whatever your target server needs. You can open your dev tools (F12) and view the Network tab to see this in action. We are not connected to a server in this example, so the request will fail but it gives you an idea of what it’ll look like.

Styling

I like using Bulma because it is small and easy to work with. It is also response, and mobile first (among other things). I generally just grab the minified css and drop it in where needed. Assuming you’ve downloaded the minified css as shown in the kickstart script above, we’ll add a link to the stylesheed in our <head> tag. The tag should look as follows now (updating the href path as needed if you put bulma.min.css in a different place):

<head>
  <title>Simple HTML Form with Bulma CSS</title>
  <link rel="stylesheet" href="/assets/css/bulma.min.css">
</head>

So now we’ll scaffold the page a little bit with a <section> tag and Bulma’s container class.

<body>
  <section class="section">
    <div class="container">
      ...sign in form
    </div>
  </section>    
</body>

Directly after <div class="container> before the <form> we’ll add some styling to the title using Bulma’s title class.

<body>
  <section class="section">
    <div class="container">
      <h2 class="title">Sign In</h2>
        ...sign in form
    </div>
  </section>
</body>

For the form itself, the inputs will be fairly straight-forward and we’ll change the Sign In input to be a button instead of a input so it can be styled easier. Here is what the html will look like for the email input:

<div class="field">
  <label class="label">Email</label>
  <div class="field-body">
    <div class="field">
      <p class="control">
        <input type="email" name="email" class="input is-medium" id="email" required>
      </p>
    </div>
  </div>
</div>

We’ll apply the same structure to the password input and add a class to the Sign In button. The form html now looks as follows:

<form method="POST" id="sign-in-form">
  <div class="field">
    <label class="label">Email</label>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input type="email" name="email" class="input is-medium" id="email" required>
        </p>
      </div>
    </div>
  </div>
  <div class="field">
    <label class="label">Password</label>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input type="email" name="email" class="input is-medium" id="email" required>
        </p>
      </div>
    </div>
  </div>
  <button type="submit" class="button is-medium is-primary">Sign In</button>
</form>

So now you’ll have form that looks something like this: SignInForm It didn’t take much work at all, and required zero JavaScript or custom frameworks to get it to this point. Sometimes it is good to step back and remind yourself that you don’t need a big or complex web framework to create things in a short amount of time. Sometimes the shortest path to deployment is just throwing those frameworks out and going back to the basics. You can read more about HTML forms here. Your next task would likely be to wire up an endpoint for the form via Firebase, Django, Rails, or some other feature rich backend you are familiar with that allows you to move quickly and not waste time.