What is the purpose of the value attribute?

Why would you want to assigne certain values to the ‘value’ attribute of the checkboxes, if these are not visible on the form itself? Why the use of the ‘value’ attribute here? I thought this was used to pre-fill the form?

8 Likes

They are visible in the LABEL. The value is what gets POSTed (when the form is submitted) with the name in the name attribute as its variable…

[name] = [checked value]
12 Likes

I thought the reason why we put the “id” and “for” attributes is to make the label show. why do we have to put value attributes?

1 Like

As shown above, we only use for if the label does not wrap the input control.

Because that attribute receives the user input. When the form is Submitted, the POST data is assembled as a name-value pair.

<input name="choice" value="user input">

goes to the POST data as,

choice = "user input"
14 Likes

In our example we assigned “topping” to be the value of all three name-attributes in our checkboxes.

If I understand it correctly by checking a box the defined value (for example “tomato”) will become the value of my variable “topping”?

Lets say I choose all checkboxes. Will now alle values (e.g. “tomato”, “lettuce”) be attached as one string to the variable “topping”?

Checkboxes permit one or more selections. Any that are checked will be passed along in the POSTDATA.

So, if I check many or all items, does that mean that [name]=[value1, value2,…]?

Yes, although I’m not sure if it is in an array, or just a comma separated list. Something to look into.

1 Like

And why do we not always need the value attribute for text or number types?

We only need it if is has a preset value. It may also be written as an empty string (value=""). The input from the user will create the attribute if it is not present in the markup.

1 Like
  1. What are the differences and characteristics of the “id”, “name” and “value” attributes?
  2. Are both “id” and “name” attributes mandatory for the form tag/element or can we use either of them along with a label tag?
  • id is the DOM identifier of the element, and it has no bearing on the POSTDATA (submitted form data).
  • name is a required attribute if the form is being submitted, or for such elements as radio buttons to signify the choice range. It is rarely ever used as a DOM reference.
  • value is the data object, either the user input or the preset value of a checkbox or radio button control. We see the attribute referenced a lot in the validation process meaning we treat it as a DOM reference on the client side, and the data associated with the name in the POSTDATA.
1 Like

There are many times we want to or have to select more than one checkboxes … but if all of them have the same value … how will they be processed in a formm?

Checkboxes are meant to have zero or more checked, but they will have different values and different names, unlike radio buttons that all have the same name, but different values. We can only ever choose one radio button. There is no such limit on checkboxes.

the way I see it is if you check the box the value will take name of that checkbox andit will match with the name, so for example if it does it works as a “true” value (the user wants the burger with cheese) if the box stays unchecked the value won’t take any value (sorry the redundancy) and it won’t match with the name making it a false (the customer doesn’t want the burger with cheese) am I any right? mind my english.

<input type="checkbox" name="cheese">

If the above is checked, the POSTDATA will contain,

 &cheese=true
1 Like

Read this to know how “value” attribute works

The value attribute specifies the value of an element.

The value attribute is used differently for different input types:
Read this to know how “value” attribute works

  • For “button”, “reset”, and “submit” - it defines the text on the button
  • For “text”, “password”, and “hidden” - it defines the initial (default) value of the input field
  • For “checkbox”, “radio”, “image” - it defines the value associated with the input (this is also the value that is sent on submit)
    .