Building an interactive form: Structure
Tags: html, css, webdev, tutorial
Published: 2019-12-28 02:02:57

---
title: Building an interactive form: Structure
published: true
description: Learn how to develop an interactive login form in an afternoon, with HTML + CSS + JS.
tags: html,css,webdev,tutorial
series: Building an interactive form
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1zn2rvs6wiztswtluegk.png
---

In the [original post](https://dev.to/alvaromontoro/building-an-interactive-login-form-with-html-and-css-1i2n), we explained how the _natural_ order of the form would be:

1. Image of the person
2. Username/Email text field (label + input)
3. Password text field (label + input)
4. Show Password checkbox (input + label)
5. Submit button
6. Forgot password link

But due to the challenge restrictions -and the no JS rule in particular-, we were forced to reorganize the elements. In this version, we will handle the interactivity using JavaScript so we can go to that original plan.

After the rearrangements, the HTML looks like this:

```html
<form method="post" action="javascript: void(0);" id="login-form" class="login-form" autocomplete="off">
  <h1>Login form</h1>
  <figure>
    <!-- Placeholder for the image -->
  </figure>
  <div>
    <label class="required">
      <span>Username</span>
      <input type="text" name="username" id="username" placeholder="Username" required />
    </label>
  </div>
  <div>
    <label class="required">
      <span>Password</span>
      <input type="password" name="password" id="password" placeholder="Password" required />
    </label>
  </div>
  <div>
    <label>
      <input type="checkbox" name="show-password" id="show-password" />
      <span class="checkbox-label">Show Password</span>
    </label>
  </div>
  <input type="submit" value="Log In" name="submit" id="submit" />
  <div class="forgot-password">
    <a href="#">Forgot password?</a>
  </div>
</form>
```

This will generate a form that looks like this:

![Login form without styles](https://thepracticaldev.s3.amazonaws.com/i/1m7azrdmltyi0hbc4uah.png)

It doesn't have styles and it looks really ugly, but it is a great starting point for what we want:

- All inputs (but the submit button) have labels attached to them.
- We have a placeholder for the interactive image.
- If the CSS or JS don't load, the form will still be functional. Even if it's not pretty.

And this functionality is important. We are building the form from the bottom up, following the [**progressive enhancement** methodology](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/): we start from a simple working form and build on top, adding new features and enhancing it.

The code is still close to the original but there are some differences:

- **The fields are organized more naturally**. I know I mentioned it, but this will save us from using `tabindex` or reordering the code via CSS, which is nice.
- **The method was changed from `get` to `post`**. This is a login form, the method should have never been `get` to begin with. All the information sent via `get` is visible to the users on the address bar, which could be a potential security issue.
- **The label text was moved from after the field to before the field**: I'm writing the posts as a re-develop the form on the side, so when we get to the styles, we may change this again.

And also some things that stay the same:

- **HTML5 validation**. we delegate the validation on the browser. Although we may add JS validation (which could lead to a 7<sup>th</sup> step in the process). 
- **The "Show Password" label text goes before the input**. This way it will be easier to style the checkbox.
- **The `form` has an `autocomplete="off"`**. This way the form will not suggest user/passwords when you enter it. Although it may be useless as [many browsers do not support it anymore](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields).

Here is a [JSFiddle](https://jsfiddle.net/alvaromontoro/jtnc4gvf/26/) of where we are at the moment:

{% jsfiddle https://jsfiddle.net/alvaromontoro/jtnc4gvf/26/ result,html %}

Next step: adding styles.