Building an interactive form (6 Part Series)
In the original post, we explained how the natural order of the form would be:
- Image of the person
- Username/Email text field (label + input)
- Password text field (label + input)
- Show Password checkbox (input + label)
- Submit button
- Forgot password link
After the rearrangements, the HTML looks like this:
This will generate a form that looks like this:
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: 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
tabindexor reordering the code via CSS, which is nice.
The method was changed from
post. This is a login form, the method should have never been
getto begin with. All the information sent via
getis 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 7th step in the process).
- The "Show Password" label text goes before the input. This way it will be easier to style the checkbox.
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.
Here is a JSFiddle of where we are at the moment:
Next step: adding styles.