Forms are fairly simplistic but require a little bit extra markup to allow for validation to occur.

## The form

The only thing to note is that stylistically a 'required fields' is visually at the bottom but from an accessibility
point of view we need this bit of text readable as soon as the form is interacted with. 

With that, we absolutely position the message at the bottom but markup-wise we place it at the top.

```html
<form action="#" class="form">
    <p class="form__mandatory-text">* Required fields</p> 
```

'Required fields' will be placed at the bottom of the form

## Elements/Errors

Form elements require a wrap around so that error handling can take place. Error message is already placed
inside the label and we show/hide it usind a class.

```html
<div class="form__input-wrap form__error-show">
    <label for=a" class="form__label">
        Name
        <span class="form__error">Invalid</span>
    </label>
...
```
## Input

Inputs consume 100% of the container they sit within. When focused a coloured bar will appear on the left hand-side
controlled by the theme so there's no reason to tinker with this.

```html
<input type="text" id="a" />
```

## Textarea

Textareas are styled slightly differently with a height of 200px.

```html
<textarea name="text" id="a"></textarea>
```

## Submitting

You can use either an input or button to submit a form. Again, colours are dictated by the theme of the page.
It's recommended that if you require no advanced HTML within the submit button, you use the input type submit.

```html
<input type="submit" value="Submit"/> 
```

or

```html
<button type="submit">Submit</button>
```