Text inputs


  • For text fields with a defined character count like phone number, DOB and postcode use shorter form fields, so the length of the field affords the length of the answer.
  • For fields with a larger character count like 'your message' field use a text area instead of single-line input box.
  • Make sure the label's for attribute and the input's id attribute share the same value. This applies to all input types.


  • Avoid using placeholder text in inputs. Instead, when applicable, use the "aria-describedby" to associate instructions with form fields.


For example L3 1DS


<div class="form-group lcc-form-group"> <label class="form-label" for="addressPostcode"> Postcode </label> <span class="lcc-hint" id="postcode-hint"> For example L3 1DS </span> <input class="form-control lcc-input form-control-short" id="addressPostcode" name="addressPostcode" type="text" aria-describedby="postcode-hint"> </div>