Why do we put yes in the `value` and in the `label`?

Frequently Asked Questions HTML FAQ
1

please explain briefly
<input id=“answer” name=“burger” value="yes" type=“radio”>YES

please why is there two values when we have already add a value of yes in the input element> and another >yes< again.
and explain more on id attribute

2

When we give an INPUT element an ID attribute, it is there as a hook for a LABEL.

<input id=“burger” name=“burger” value="yes" type=“radio”>
<label for="burger">YES</label>

or

<label for="burger">YES</label>
<input id=“burger” name=“burger” value="yes" type=“radio”>

The text in the label goes to the screen, the value goes to the POST data with the name burger

burger = 'yes'

Extended

<label>YES
<input name=“burger” value="yes" type=“radio”>
</label>

or

<label>
<input name=“burger” value="yes" type=“radio”>
YES</label>

Note above that the label wraps the input control. In that case we do not apply an ID attribute since the control is a child of the label.

69 Likes
4

it looks veird like my polish friend will say but yes

2 Likes
5

I understand that in the example of a checkbox, the id refers to the label which gets printed on the screen, and the value gets POSTed as the corresponding answer. However why aren’t we obliged to declare a value to POST when the input type is “text” or "number’?

6

Any control element that does not have a required attribute may be left vacant by the user. The submitted form data will exclude that field from the query string, or it will show in the header with an empty string as the value for the name given to the control (depends on which METHOD is used to transmit the form submission).

If we’ve misunderstood your question, please clarify.

7

Thank you! So if a user fills in a text form, is the value POSTed automatically what they entered? If so, then why isn’t that also the case for the checkbox? Why does checkbox need to have a value declared even if the input isn’t required??

8

When not required, check boxes may be left unchecked. The value is declared in the control element attribute so the form can assign it to the control’s name in the POST data, else how would we convey that value?

9

I see, thank you! I understand now why we do not need to declare the value for a text input upfront, as it is basically the text that gets entered by the user.

1 Like
10

Yes right. When we are getting the user to enter the value, then we do not need to declare the value. but when are asking to only select the value from the already provided values we provide the value in the input field.

2 Likes
11

If we have more than two radio button, for example 10. Even then the user would only be able to select only one radio button? If so, is it the property of the radio button that the user can select only one radio button?

12

Precisely. That is why we use radio buttons to narrow the selection to a single value. Check boxes are the alternative when we wish to allow multiple selections.

1 Like
13

I have definitely seen forms that appear to have the option to select multiple “radio” buttons. Are these just checkboxes made to LOOK like “radio” buttons using CSS?

14

Anything is possible. Specifications are recommendations and authors are free to accept them, or not. We would need to see the markup to determine how it is configured.

2 Likes
15

ok, thank you. I wasn’t sure.

1 Like
17

Why does the input have a value if it’s not visibly used or visibly needed? I mean if the element already links the label text to the checkbox why should the element still need to have a value?

18

When the form is submitted , values of name along with value attribute will be POSTed . So value is needed here since the even if the label is here , the name and value are the ones that represent the user’s submission.

19

What would be a reason to use the id attribute instead of just wrapping the label around the input?

20

Each situation will dictate how we implement the markup. One method uses element inheritance (in the one above, input is a child of label). The other method uses global binding. Inheritance is traversable. Binding is not, but it is more explicit.

For my own part I’m a big fan (or rather was) of traversal as opposed to binding with class and id (& for) and only use the latter when it is more convenient or sensible (simpler selectors, less backtracking).

21

I know the ID is meant to hook the label element.
Labels are unique for each element, yes?

22

For each control, yes. Labels have the same focus as the form control they are bound to; that is, click on the label and the control gains focus.

1 Like