SiteLint documentation and guidelines

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.

Incorrect example
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <!-- Missing submit button -->
</form>
Correct example
<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Submit</button>
</form>

Ensure the submit button is accessible

Use appropriate HTML elements and ensure the submit button is not hidden or obscured.

Incorrect example
<form action="/submit" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <div onclick="submitForm()">Submit</div> <!-- Non-button element for submission; inline event "onlick" is only for the demonstration purpose and don't use it -->
</form>
Correct example
<form action="/submit" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <button type="submit">Submit</button>
</form>

Style submit buttons properly

Ensure that CSS does not hide or obscure the submit button and that it remains visually distinct.

Incorrect example
<form action="/submit" method="post">
    <label for="feedback">Feedback:</label>
    <textarea id="feedback" name="feedback"></textarea>
    <button type="submit" style="display: none;">Submit</button> <!-- Hidden button -->
</form>
Correct example
<form action="/submit" method="post">
    <label for="feedback">Feedback:</label>
    <textarea id="feedback" name="feedback"></textarea>
    <button type="submit" style="display: inline-block;">Submit</button>
</form>

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

Standard

  • Standard: SiteLint, Best Practices
  • Rule ID: missing-submit-button