ccform.html

<fieldset id="credit-card">
<legend>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="64" width="64" title="Credit Card info">
		<use xlink:href="/images/icons.svg#credit-card"></use>
	</svg>
</legend>
<label for="ccform-card-name">Name on Card</label>
<input name="ccform[card][name]" id="ccform-card-name" placeholder="Name on credit card" pattern="^[A-z]+ ([A-z]+ )?[A-z]+$" autocomplete="cc-name" required="" type="text">
<br>
<label for="ccform-card-num">Credit Card #</label>
<input name="ccform[card][num]" id="ccform-card-num" min="10000000000000" max="99999999999999999" autocomplete="cc-number" size="16" required="" type="number" placeholder="#############">
<br>
<label for="ccform-card-expires-month">Credit Card expiration</label>
<br>
<input name="ccform[card][expires][month]" id="ccform-card-expires-month" min="1" max="12" placeholder="mm" size="2" maxlength="2" minlength="2" autocomplete="cc-exp-month" required="" type="number">
<span>/</span>
<input name="ccform[card][expires][year]" id="ccform-card-expires-year" min="2017" max="2037" autocomplete="cc-exp-year" placeholder="YYYY" maxlength="4" minlength="4" size="4" required="" type="number">
<br>
<label for="ccform-card-csc">CSC</label>
<input name="ccform[card][csc]" id="ccform-card-csc" min="100" max="9999" placeholder="####" autocomplete="cc-csc" size="4" required="" type="number">
</fieldset>