A bunch of things that are useful in a HTML5 form

form_kit.html

<!-- Regular expression for UK postcodes -->
<label for=postcode>Postcode<span class="red">*</span></label>
<input name=postcode type=text aria-required required pattern="[0-9]{5}(\-[0-9]{4})?|[a-zA-Z]{1,2}\d{1,2}\s?\d[a-zA-Z]{1,2}" placeholder="A valid UK postcode" />
                                
<!-- to test in the browser console use: -->
/^(:?[a-zA-Z]{1,2}\d{1,2}\s?\d[a-zA-Z]{1,2})$/.test("tn12 6an")

form_styles.css

/* force webkit search field to look like normal textfield */

    input[type="search"] {
    
        -webkit-appearance: textfield;
    }
    
/* validation */
    
    input[type="text"]:focus:invalid, input[type="email"]:focus:invalid {
        
        box-shadow: 0 0 5px $red;
        border-color: $red;
    }
    
    input[type="text"]:focus:valid, input[type="email"]:focus:valid {
        
        box-shadow: 0 0 5px $green;
        border-color: $green;
    }