Implementing the form’s content

The login form will be built with four fields:

• An email input
• A password input
• A “Remember me” checkbox
• A “Login” submit button

You will add a placeholder and a required attribute to some of the fields, which handle form errors, so you can display to the user why they failed to login.

Logo

To reassure the user that they are indeed logging into the correct website, add a logo first. Replace the “Login” text you’ve had so far with your first field:

<form class="box">
  <div class="field has-text-centered">
    <img src="images/logo-bis.png" width="167">
  </div>
</form>

Note: Make sure the images folder is alongside your login.html file.

Bulma provides a field class that allows each form field to be spaced evenly. It also comes with helper classes like has-text-centered to center text and inline elements.

Email input

For...