Suppose you have a checkbox in your HTML form like this:
<form> Email Address: <input type="email" name="email"> <input type="checkbox" name="opt_in_newsletter" > Subscribe to the newsletter </input>
If the user checks the option, you will get the following form data
However, if the user does not check the option, then the opt_in_newsletter field itself will not be present in the form data that you receive on the server-side.
You might have expected opt_in_newsletter=off But in reality, the behavior is different the W3c recommendation supports this behavior by the way.
In the server-side code, just check for the presence of the field first.
The workaround using hidden fields
In case you want a definite value for each input on the server-side is to use hidden fields along with checkbox. Both fields should have the same name.
Here is an example:
Here is the relevant code for better reference:
<div> <input type="hidden" name="send_newsletter" value="no"> <input type="checkbox" name="send_newsletter" id="send_newsletter" value="yes" /> <label for="send_newsletter">Subscribe to the newsletter</label> </div>
If the user selects the option, form data will contain:
else, the form data will contain
- How to Create a Telephone Input Field in HTML5
- How to Use Html5 Input Type Email
- Checkbox validation using jQuery
- Custom styled checkboxes with Bootstrap
- HTML Form Checkbox with required validation
- HTML Form with Checkboxes examples and sample code
- How to create a dropdown with checkbox options with Bootstrap Style
- How to create checkbox in Bootstrap style ?