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.

Don't

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

Example

Postcode For example L3 1DS

Code


				<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>

Back

Labels

Text area