What is the purpose of the value attribute?

Thanks! This answer made it clear.

<form>
  <p>Choose your pizza toppings:</p>
  <label for="cheese">Extra cheese</label>
  <input id="cheese" name="topping" type="checkbox" value="cheese">
  <br>
  <label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
  <br>
  <label for="anchovy">Anchovy</label>
  <input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>

See the example above. If the person doesn’t check any box, how is the POSTdata look like?
Wouldn’t it be better if the preset value (inside input element) of each checkbox were empty, like value=""?

From my understanding so far, the preset value (inside input element) is what will be sent on POSTdata if the client does not check any box before submit the form.
*sorry about the english

1 Like

Checkboxes would not all have the same name. They are different from radio buttons which when grouped would all have the same name. If we wanted at least one topping, then the control can be given a checked attribute (which is boolean).

https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

&cheese=true&pepperoni=true&anchovy=true


Edit

Correction:

Checkboxes would not all have the same name.

I was wrong on that statement.

https://www.dyn-web.com/tutorials/forms/checkbox/same-name-group.php

4 Likes

you see with the other input attributes, we usually give the user the option to type in
the value for themself. but when the type= checkbox , there is no longer a field
for the user to input the value and instead they have to select.
thus we need to use value=value(as in what they are selecting) in our code. this is to ensure
that when the user checks the box, the value checked is paired with the name attribute.

at least that’s how i understand it as an amateur. please do correct me if i’m wrong.

1 Like

I see you everywhere. So helpful. Hope you have a Merry Christmas and thanks for all the help

1 Like

I am 15 years old and i am still quite new to html but i need help understanding what the id, value, class and span attributes are used for.

hi there I’m also new but it 's how I undestand it:
you use id to link input and label together
value is used when you have a preset value of something also this is the value that is sent when you submit
class is used when you want to group a part of code and add some style later in css
span is used when you want extract the text on the same line

hi there, I have a kind silly question in this example. Why in checkbox type, we have the name = topping, id=cheese, for=cheese and value=cheese, while in password, number type, all name, id and for are all equal the same…
does it matter how we name the name attribute? can we in this case also name=cheese instead of topping, would this change any outcome? thanks!

Checkboxes can have multiple selected choices. The name for each choice is the same so that the submitted value is a list.

[ "topping" => ["cheese", "tomato", "lettuce", "sauce"] ]

This is how I understand it. The reason the VALUE attribute is require when creating checkboxes (type=“checkbox”) is because normally the VALUE of a given text input element (type="text) is whatever the user inputs into the text field. However when clicking a checkbox, technically, the user did not input anything so the system wont recognize a value for the input element. So we have to set our own predetermined value for whatever we want the checkbox to represent.

That is so the toppings can all be grouped. I feel like that rule will apply when using the and elements. I haven’t got to that lesson yet but I highly suspect that is why. I am sure it will make sense by then.

but we cannot have the same name repet in our form so every input or group of input they all have the name so why value??

It will take some checking but I believe when more than one control has the same name, the POST method creates an array of the values associated with the same name.

1 Like

I have an understanding of the original question and I see many people have asked the same question in this thread but it never is answered directly. 1) What is the actual purpose of the value attribute? 2) I entered the code without the value attribute and it seems to work the same; is it needed for a checkbox? 3) Shouldn’t the value of a checkbox be true or false? 4) Is it so that the posted value will be what the “value” is defined as if checked and simply omitted when the box is not checked? 5) Does “value” function the same way for checkboxes as text?

Form data needs to be sent in the form of a request to the server. This data has two forms of construction:

  1. An associative array of name/value pairs
  2. A query string of variable/value assignments.

In both of the above the name attribute of the element is paired up with the value attribute to create that item of data.

The value attribute is automatically inserted by the browser when there is a value to report. In the case of checkboxes or radio buttons, there is an associated value (in the markup) which is submitted if their is the presence of an ischecked boolean attribute. The check box itself is boolean, but the value is not.

See above.

Yes, also see above.

Value is a string if it comes from a form. It behaves the same for all form controls by carrying a string value associated with the control’s name.