Optional and mandatory fields

Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields with the word 'optional' next to labels.
Mandatory fields should include "required" in the input.
In addition the form should provide an error message if a web visitor attempts to press the submit button before properly filling out the fields. See validation for more detail.

Don't

Don't use the field marker (*).

Example

Code


				<div class="form-group lcc-form-group">
					  <label class="form-label" for="firstName">
						First name
					  </label>
					  <input class="form-control lcc-input" id="firstName" name="firstName" type="text">
					</div>
				<div class="form-group lcc-form-group">
					  <label class="form-label" for="firstName">
						Last name <em - optional</em>
					  </label>
					  <input class="form-control lcc-input" id="firstName" name="firstName" type="text" required>
					</div>

Labels