This form element does not have a submit button
Description
A form
submit button is essential for completing and submitting form data. Without a submit button, users might not know how to finalize their form input, leading to incomplete submissions and frustration. Ensuring that every form has a clear and accessible submit button is crucial for usability and accessibility.
Disabilities impacted
- Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on submit buttons to complete form submissions.
- Visual impairments: users with visual impairments who rely on screen readers need clear indications of how to submit a form. Without a submit button, they might not know how to proceed.
- Cognitive disabilities: users with cognitive disabilities benefit from clear and straightforward interactions. A missing submit button can lead to confusion and incomplete form submissions.
Why it matters
The submit button is a critical element of any form, signaling the completion of input and initiating the data submission process. Without a submit button, users may be unable to complete the form, leading to a poor user experience and potential data loss. Ensuring the presence of a submit button enhances the form’s accessibility and usability for all users.
Coding problems and solutions
Common coding problems
- No submit button: forms lack a submit button, making it unclear how to submit the form.
- Invisible submit button: the submit button is present but not visible or accessible due to CSS or other styling issues.
- Non-button submit elements: using non-button elements for form submission, which may not be accessible or intuitive for users.
How to fix it
Include a visible submit button
Ensure that every form has a clear, visible submit button.
Ensure the submit button is accessible
Use appropriate HTML elements and ensure the submit button is not hidden or obscured.
Style submit buttons properly
Ensure that CSS does not hide or obscure the submit button and that it remains visually distinct.
Known limitations
- Complex forms: ensure that all sections of a complex form are appropriately labeled and that the submit button is clearly associated with the form.
- Dynamic forms: when adding dynamic form fields or sections, ensure that a submit button is always present and accessible.
- Browser compatibility: test forms across different browsers and devices to ensure the submit button is always functional and accessible.
Resources
- MDN Web Docs – button element
- W3C Web Content Accessibility Guidelines (WCAG) 2.1 – Keyboard Accessible
Standard
- Standard: SiteLint, Best Practices
- Rule ID:
missing-submit-button