A webpage is not always broken because of a large mistake. Small details can produce exactly this problem: debugging: field is not included in submission. This guide shows you what to look for, a concrete fix, and how to check that it worked.
The Idea in Plain English
A disabled control is not a successful form control and will not be sent. A readonly text input is usually submitted.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
The first part shows a problem. The second part shows a safer or more accurate version. Compare them before reading the explanation.
<!-- Problem -->
<form action="/save" method="post">
<input name="reference" value="A-12" disabled>
</form>
<!-- Corrected example -->
<form action="/save" method="post">
<label for="reference">Reference</label>
<input id="reference" name="reference" value="A-12" readonly>
<button type="submit">Save</button>
</form>
What Each Part Does
- The form collects and submits named fields to the destination specified by action.
- The input creates a field; its type changes the editing controls and the name identifies submitted data.
- The label tells visitors and assistive tools what a control is for.
- action sets the URL that receives a submitted form.
- method chooses GET or POST for form submission.
- name identifies a field in submitted form data or a named metadata entry.
Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
Try It Yourself
Compare FormData values for disabled and readonly. Never trust the readonly value on the server.
Common Beginner Mistakes
- Check the underlying cause before changing unrelated tags.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- A disabled control is not a successful form control and will not be sent. A readonly text input is usually submitted.
- Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.