Using Checkboxes to Make Forms More Friendly
Value
A string representing the value of the checkbox. This is not displayed on the client-side, but on the server this is the value
given to the data submitted with the checkbox's name
. Take the following example:
<form> <div> <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" /> <label for="subscribeNews">Subscribe to newsletter?</label> </div> <div> <button type="submit">Subscribe</button> </div> </form>
In this example, we've got a name of subscribe
, and a value of newsletter
. When the form is submitted, the data name/value pair will be subscribe=newsletter
.
If the value
attribute was omitted, the default value for the checkbox is on
, so the submitted data in that case would be subscribe=on
.
Note: If a checkbox is unchecked when its form is
submitted, neither the name nor the value is submitted to the server.
There is no HTML-only method of representing a checkbox's unchecked
state (e.g. value=unchecked
). If you wanted to submit a default value for the checkbox when it is unchecked, you could include JavaScript to create a <input type="hidden"> within the form with a value indicating an unchecked state.