Input Styles

Email

This is a form message 
                        <fieldset class="form__row">
                            <div class="form__input js-validation js-required-validation js-email-validation">
                                <input type="email" name="#NAME" value="#VALUE" placeholder="Hint Text" id="email" required />
                                <label for="email">Label Email</label>
                                <span class="form__field-message">This is a form message</span>
                            </div>
                        </fieldset>

Date Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="date" name="#NAME" value="#VALUE" placeholder="Hint Text" id="date" />
                                <label for="date">Label Date</label>
                            </div>
                        </fieldset>

File Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="date" name="#NAME" value="#VALUE" placeholder="Hint Text" id="date" />
                                <label for="date">Label Date</label>
                            </div>
                        </fieldset>

Number Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="number" name="#NAME" value="#VALUE" placeholder="Hint Text" id="number" />
                                <label for="number">Label Number</label>
                            </div>
                        </fieldset>

Password Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="password" name="#NAME" value="#VALUE" placeholder="Hint Text" id="password" />
                                <label for="password">Label Password</label>
                            </div>
                        </fieldset>

Search Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="search" name="#NAME" value="#VALUE" placeholder="Hint Text" id="search" />
                                <label for="search">Label Search</label>
                            </div>
                        </fieldset>

Tel Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="tel" name="#NAME" value="#VALUE" placeholder="Hint Text" id="tel" />
                                <label for="tel">Label Tel</label>
                            </div>
                        </fieldset>

Text Input

                        <fieldset class="form__row">
                            <div class="form__input">
                                <input type="text" name="#NAME" value="#VALUE" placeholder="Hint Text" id="text" />
                                <label for="text">Label Text</label>
                            </div>
                        </fieldset>

URL Input

                        <fieldset class="form__row">
                            <div class="form__input js-validation js-url-validation">
                                <input type="url" name="#NAME" value="#VALUE" placeholder="Hint Text" id="url" />
                                <label for="url">Label URL</label>
                            </div>
                        </fieldset>

Text Area

                        <fieldset class="form__row">
                            <div class="form__input">
                                <textarea value="#VALUE" rows="#ROWS" cols="#COLS" id="textarea" placeholder="Hint Text"></textarea>
                                <label for="textarea">Label Textarea</label>
                            </div>
                        </fieldset>

Form Input Documentation

Content

Labels - keep labels to a couple of words long, ensuring to check the label fits the input box on the smallest screen resolution.

Placeholders - must also be kept short enough to be hidden by the overlaying label element.

Input message - This is the small sentence that is added under the input. this text is temporarily replaced when there is an error.

Validation

Added to an input by applying js-validation class to it's parent container. The validation type is then specified using one of the following classes: js-required-validation, js-email-validation, js-url-validation.