EvoToolkit - v3.7.2 (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-mb-small u-mb-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-mb-small u-mb-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-mb-small u-mb-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-mb-small u-mb-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="/static/img/evotoolkit-a9f6d11dc7.svg#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-mb-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-mb-small u-mb-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-mb-small u-mb-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-mb-small u-mb-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-mb-small u-mb-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-mb-small u-mb-regular@md">
			<label class="c-type-foxtrot c-type--bold u-mb-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-mb-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="/static/img/evotoolkit-a9f6d11dc7.svg#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-mb-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="/static/img/evotoolkit-a9f6d11dc7.svg#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-mb-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="/static/img/evotoolkit-a9f6d11dc7.svg#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-mb-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="/static/img/evotoolkit-a9f6d11dc7.svg#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-mb-small">Error</div>
			</div>
		</div>
		<div class="u-align-center u-width-full">
			<button class="c-button u-mr-micro" type="submit">Submit</button>
			<button class="c-button c-button--secondary" type="reset">Reset</button>
		</div>
	</div>

</form>