What is the purpose of the value attribute?

Frequently Asked Questions HTML FAQ
1

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?

11 Likes
2

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]
67 Likes
3

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?

6 Likes
4

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"
53 Likes
5

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”?

5 Likes
6

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

6 Likes
7

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

8 Likes
8

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

12 Likes
9

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

3 Likes
10

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.

8 Likes
11
  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?
1 Like
12
  • 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.
18 Likes
13

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?

14

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.

2 Likes
15

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.

1 Like
16 
<input type="checkbox" name="cheese">

If the above is checked, the POSTDATA will contain,

 &cheese=true
4 Likes
17

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)
    .
15 Likes
19

1m
Hi, I’m totally new to HTML and this was the question in my mind too when I did this exercise. The replies below were generally helpful but including some of the more technical terms like DOM (which is foreign to me), etc. ultimately confused me.

Here’s what (I think) I understand about this use of the ‘value’ attribute here. As we’ve learned from the earlier ‘Text Input’ lesson, after users type into the element, the value of the ‘value’ attribute becomes what is typed into the text field. This user input (or value) is paired with the what’s in the ‘name’ attribute (I’m avoiding the repeated use of ‘value’ here to avoid confusion) of the element and sent as text when the form is submitted. Yes, if we choose to, we could have assigned a default value to pre-fill the form (until this is overwritten by user’s new input) but here it is a checkbox.

Since users cannot type a new input into a checkbox, we have to assign the one and only applicable value for the ‘value’ attribute of each checkbox. When a checkbox receives an input, i.e. a click, this assigned value of the ‘value’ attribute will be paired with the value of the ‘name’ attribute in the element when the form is submitted. For instance, if a user selects ‘Pepperoni’ as it appears beside the checkbox (with a capital ‘P’), the value “pepperoni” (of the ‘value’ attribute, with a small letter ‘p’) will be paired with the value of the name attribute - “topping” - and submitted as “topping=pepporoni”.

Hope the above helps. Please do correct me if I have misinterpreted or misunderstood anything. Thank you in advance.

6 Likes
20

If it was up to me, that would be the first term you learn. Have you searched it yet?

3 Likes
21

Hi mtf, thank you for your advice. I’ve just googled it to roughly understand what DOM is for but I’ve stopped reading further when it gets to using JavaScript to access a webpage’s DOM to change, search for, etc. elements. I’ll leave that till when I start learning JavaScript.

I’ve read many of your posts which have been extremely helpful for beginners like me. Thank you very much!

4 Likes