htmlformsnamespaceslabel

Why can the for attribute and the id attribute agree, but then the name element can overrule them?


<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label 

If you omit the value attribute, the submitted form data uses the default value, which is on. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be indoor-outdoor=on, which is not useful. So the value attribute needs to be set to something to identify the option.

This is what my course says. I am not understanding why this would result in a problem? In the step just before we were instructed to write this way, but now it seems like it is wrong? Or perhaps inferred that it's not the most foolproof way to write things but it doesn't say what to do instead. I understand perfectly fine that if a user doesn't fill out the answer when the form gets submitted it'll just say "on" that's fine. What I'm confused about is "if the user clicked the "indoor" option and submitted the form, the resulting form data would be indoor-outdoor=on, which is not useful." What?? Is it- did they intentionally name it poorly to show that even if you write the code correctly if the name sucks wind it won't work? But even still the user clicked Indoor as their option, and then it reported that option as on so wouldn't that be Indoor=on as a result?

I don't know what I was expecting. I'm still very very new. I know that name="something"'s are necessary to group radio buttons together and identify them as a pack, like these are all multiple choices for this question. However, I didn't expect for there to be an issue between the name and the id and for attributes. I'm going along with what the course says but I'm not really sure why I'm doing what I'm doing, which seems to be now prioritizing names over other attributes and wondering when to use what.


Solution

  • The name="" attribute is used to name form fields in a form. This has nothing to do with the id="" attribute (or the for="" attribute in <label>). So when you name your form field name="indoor-outdoor" then the transmitted value will have the name indoor-outdoor.

    The issue not having a value="" attribute arise when you use the radio buttons with the same name but without any value="" attribute like this:

    <input type="radio" name="indoor-outdoor"> Indoor <br />
    <input type="radio" name="indoor-outdoor"> Outdoor
    

    No matter which radio button you select, the value on is still used for the field indoor-outdoor. The server doesn't know which radio button was selected since only the value "on" is received.

    With the value="" attribute you explicit set the value you want to transmit when you select one specific radio button. This can look like this:

    <input type="radio" name="foobarType" value="indoor"> Indoor <br />
    <input type="radio" name="foobarType" value="outdoor"> Outdoor
    

    When you select the first radio button, the value foobarType=indoor is send. When you select the second radio button, the value foobarType=outdoor is send instead.