7 Forms and User Input
Learn how to build accessible HTML forms, validate submitted input safely, and handle form submissions with JavaScript.
Build clear, accessible forms
An groups related controls so people can enter information and submit it for processing. A form can send data to a server or support an interactive browser experience with JavaScript.
Make controls understandable and easy to navigate:
Give every control a visible, descriptive . Connect it explicitly by matching the ’s
forvalue with the control’sid.Use
<fieldset>and<legend>to group related controls, such as radio buttons.Explain required fields and special input formats in visible instructions.
Choose suitable input types, such as
email, and usefulautocompletevalues.Give controls a
nameattribute so their values can be included in submitted form data.
For example, a contact form can its fields, indicate required information, and provide a status area for feedback:
The action attribute specifies where the browser sends the form, and the method attribute specifies how it sends the values. With , values appear in the URL, which suits requests such as searches. With , values go in the request body, which is commonly used for submissions that send or change data. The server must be configured to receive and process the submission.
Takeaway: Semantic structure, clear labels, and meaningful instructions make forms easier to understand and use.
Validate input in the browser and on the server
Browser-based constraints can catch common input problems before a form is submitted. Use attributes such as required, minlength, maxlength, min, and max when they match the requirements. Input types such as email can also provide useful checks.
Communicate requirements in visible text as well as in HTML attributes. When input is invalid, give a specific, actionable error message; do not rely on color alone to identify an error.
improves usability, but it is not a security boundary. A user can alter page code or send a request without using the page, so validate submitted values on the server as well. Apply the rules that matter to the application and handle invalid or unexpected values safely.
Takeaway: Use browser constraints to help people correct common mistakes, and always check important rules on the server.
Handle submission with JavaScript
Listen for the form’s submit event rather than only a button click. This also handles submission by keyboard. The browser normally performs constraint validation before firing the event.
When JavaScript will handle the data instead of allowing the browser’s default navigation, call preventDefault(). Then use to read named values and provide clear, accessible feedback:
This example displays confirmation in the page; it does not send data to a server. For a server-backed form, send the data to the specified endpoint and report success or failure after the server responds. Keep feedback associated with the task and accessible to assistive technology.
If JavaScript triggers submission, requestSubmit() follows normal validation and submit-event behavior. By contrast, form.submit() bypasses both.
Takeaway: Handle the form event, preserve normal validation behavior, and make the submission result clear to the user.