What you will learn
- Build a form with labelled inputs of the right types
- Add browser validation with attributes such as required and type
- Explain why every form must also be validated on the server
Forms are how visitors send you information, from contact messages to orders. Wrap fields in a <form> element and give every input a <label> linked to it, either by wrapping the input or by matching the label's for attribute to the input's id. Labels tell screen reader users what each field is, and clicking a label focuses its field. Placeholder text is not a replacement for a label.
Use the right input type. type="email" checks for an email format and shows a suitable keyboard on phones, and type="tel" brings up a number pad. Attributes such as required, minlength and maxlength let the browser block obviously incomplete submissions. The name attribute on each field sets the key its value is sent under when the form is submitted.
Browser validation improves the experience, but anyone can bypass it, so it is never enough on its own. The server must check every value again before saving or acting on it, and reject anything unexpected. When something is wrong, show a clear message next to the field explaining how to fix it, and keep what the person already typed so they do not have to start again.