EvoToolkit - v2.3.0 (Changelog)

Form

An example of a basic form pattern, which shows how you would group inputs and set up validation.

Source

Contributors

Luke Harrison

Base

Please enter a contact number with 11 numbers which begins with either 01, 02, 03 or 07.
100
Error
<form class="u-width-12/12 u-width-10/12@md"> <div class="o-layout"> <div class="o-layout__item u-width-12/12 u-width-6/12@md u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input"> <label class="c-type-foxtrot c-input__label" for="first-name-field">First name</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="first-name-field" name="first-name" required> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-width-6/12@md u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input"> <label class="c-type-foxtrot c-input__label" for="surname-field">Surname</label> <div class="c-input__wrapper"> <input type="text" class="c-input__field" id="surname-field" name="surname" required> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input"> <label class="c-type-foxtrot c-input__label" for="email-field">Email address</label> <div class="c-input__wrapper"> <input type="email" class="c-input__field" id="email-field" name="email" required> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input"> <label class="c-type-foxtrot c-input__label" for="contact-field">Contact number</label> <div class="c-input__wrapper"> <input type="tel" class="c-input__field" id="contact-field" name="contact" inputmode="numeric" pattern="^(01|02|03|07)[0-9]{9}" data-patternmismatch="Please enter a contact number with 11 numbers which begins with either 01, 02, 03 or 07." required> </div> <div class="c-input__tooltip"> <div class="c-tooltip c-tooltip--right"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="#info"></use></svg></div> <div class="c-tooltip__message"> Please enter a contact number with 11 numbers which begins with either 01, 02, 03 or 07. </div> </div> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-margin-bottom-tiny"> <label class="c-type-foxtrot c-type--bold" for="dob-day-field">Date of birth</label> </div> <div class="o-layout__item u-width-12/12 u-width-auto@sm2 u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input" data-auto-tab="dob-month"> <label class="c-input__label" for="dob-day-field">Day</label> <div class="c-input__wrapper"> <input type="number" class="c-input__field" id="dob-day-field" name="dob-day" max="31" placeholder="DD"> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-width-auto@sm2 u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input" data-auto-tab="dob-year"> <label class="c-input__label" for="dob-month-field">Month</label> <div class="c-input__wrapper"> <input type="number" class="c-input__field" id="dob-month-field" name="dob-month" max="12" placeholder="MM"> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-width-auto@sm2 u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input"> <label class="c-input__label" for="dob-year-field">Year</label> <div class="c-input__wrapper"> <input type="number" class="c-input__field" id="dob-year-field" name="dob-year" min="1900" max="2019" placeholder="YYYY"> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-margin-bottom-small u-margin-bottom-regular@md"> <div class="c-input"> <label class="c-type-foxtrot c-input__label" for="message-field">Your message</label> <div class="c-input__wrapper"> <textarea class="c-input__field" id="message-field" name="message" rows="3" maxlength="100" required></textarea> </div> <div class="c-input__length"> <div class="c-input__length-bar" style="width: 100%;"></div> <div class="c-input__length-text">100</div> </div> </div> </div> <div class="o-layout__item u-width-12/12 u-margin-bottom-small u-margin-bottom-regular@md"> <label class="c-type-foxtrot c-type--bold u-margin-bottom-small">What is your favourite animal?</label> <div class="o-layout o-layout--inline@sm c-checkbox-group" data-valuemissing="Pick your favourite animal. Or else."> <div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-margin-bottom-small"> <label class="c-checkbox" tabindex="0"> <input type="radio" name="car" value="Duck" tabindex="-1" required> <span class="c-checkbox__cover"></span> <span class="c-checkbox__box"> <svg class="c-checkbox__box-icon"><use xlink:href="#tick"></use></svg> </span> <span class="c-checkbox__label">Duck</span> </label> </div> <div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-margin-bottom-small"> <label class="c-checkbox" tabindex="0"> <input type="radio" name="car" value="Ostrich" tabindex="-1" required> <span class="c-checkbox__cover"></span> <span class="c-checkbox__box"> <svg class="c-checkbox__box-icon"><use xlink:href="#tick"></use></svg> </span> <span class="c-checkbox__label">Ostrich</span> </label> </div> <div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-margin-bottom-small"> <label class="c-checkbox" tabindex="0"> <input type="radio" name="car" value="Rattlesnake" tabindex="-1" required> <span class="c-checkbox__cover"></span> <span class="c-checkbox__box"> <svg class="c-checkbox__box-icon"><use xlink:href="#tick"></use></svg> </span> <span class="c-checkbox__label">Rattlesnake</span> </label> </div> <div class="o-layout__item u-width-12/12 u-width-6/12@sm2 u-margin-bottom-small"> <label class="c-checkbox" tabindex="0"> <input type="radio" name="car" value="Pig" tabindex="-1" required> <span class="c-checkbox__cover"></span> <span class="c-checkbox__box"> <svg class="c-checkbox__box-icon"><use xlink:href="#tick"></use></svg> </span> <span class="c-checkbox__label">Pig</span> </label> </div> <div class="o-layout__item c-checkbox-group__text c-checkbox-group__text--error u-margin-bottom-small">Error</div> </div> </div> <div class="u-align-center u-width-full"> <button class="c-button u-margin-right-micro" type="submit">Submit</button> <button class="c-button c-button--secondary" type="reset">Reset</button> </div> </div> </form>