Dabblet: Testing HTML5 input attributes (placeholder, required, pattern)

dabblet.css

/**
 * Dabblet: Testing HTML5 input attributes (placeholder, required, pattern)
 * and CSS3 styling of required
 */

input[required] {
	border: 3px solid #333;
}

input[required]:invalid:focus {
	background-color: pink;
}

body {
	background: #ccc;
}

dabblet.html

<form action="#">

	<p><input placeholder="Vaše jméno" required> 
	
	<p><input placeholder="Vaše domena.cz" required pattern="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$">
	
	<p><input type="submit"> 

</form>

settings.json

{"view":"split","prefixfree":"1","page":"html"}