HTML5 Form Example

html5form.html

<form>
	<fieldset>
		<legend>Your details</legend>
		<ol>
			<li>
				<label for='name'>Name</label>
				<input id='name' name='name' type='text' placeholder="First and last name" required autofocus>
			</li>
			<li>
				<label for='email'>Email</label>
				<input id='email' name='email' type='email' placeholder="example@domain.com" required>
			</li>
			<li>
				<label for='phone'>Phone</label>
				<input id='phone' name='phone' type='tel' placeholder="Eg. +3590000000000" required>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Delivery address</legend>
		<ol>
			<li>
				<label for='address'>Address</label>
				<textarea id='address' name='address' rows='5' required></textarea>
			</li>
			<li>
				<label for='postcode'>Post code</label>
				<input id='postcode' name='postcode' type='text' required>
			</li>
			<li>
				<label for='country'>Country</label>
				<input id='country' name='country' type='text' required>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Card details</legend>
		<ol>		
			<li>
				<fieldset>
					<legend>Card type</legend>
					<ol>
						<li>
							<input id='visa' name='cardtype' type='radio'>
							<label for='visa'>VISA</label>
						</li>
						<li>
							<input id='amex' name='cardtype' type='radio'>
							<label for='amex'>AmEx</label>
						</li>
						<li>
							<input id='mastercard' name='cardtype' type='radio'>
							<label for='mastercard'>Mastercard</label>
						</li>
					</ol>
				</fieldset>
			</li>
			<li>
				<label for='cardnumber'>Card number</label>
				<input id='cardnumber' name='cardnumber' type='number' required>
			</li>
			<li>
				<label for='secure'>Security code</label>
				<input id='secure' name='secure' type='number' required>
			</li>
			<li>
				<label for='namecard'>Name on card</label>
				<input id='namecard' name='namecard' type='text' placeholder="Exact name as on the card" required>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<button type='submit'>Buy it!</button>
	</fieldset>
</form>