Hello Campers!
I am trying to understand HTML forms and I cannot grasp the concept of the “value” attribute. Is it so that this attribute is used only for radio button and check buttons? Can somebody provide me with a concrete code example of value attribute? Thanks in advance! Alice
value is literally what the value of an <input> element is.
<input type="text" value="I'm the value you'll see at first in this text box, you can delete me and type something else" />
<input type="number" value="123" />
<input type="email" value="initial_value_of_this_input@example.com" />
<input type="checkbox" value="I'm the value that gets sent if this is checked when I submit the form!" />
<input type="radio" value="I'm the value that gets sent if this is selected when I submit the form!" />
<input type="button" value="I'm the text that shows on this button!" />
1 Like
Thanks I feel like I am a step closer to understanding… so for example in your first example:
input type=“text” value=“I’m the value you’ll see at first in this text box, you can delete me and type something else”
Is this a value that gets filled automatically? Thanks!
Well, yes, I guess you could say automatically, but it’s not really automatic, the value is defined by the person writing the code. This is what I’m trying to say, it is the initial value of the text input. That’s what the text input does, it takes a value (in text). And it’s the initial value: if it’s in a form, and you hit submit without changing anything, that’s the value that goes off with the submit. If you delete that text and type something else, then the something else will go off when you submit. If you don’t provide a value in the HTML, then the text box will start empty (the initial value will assumed to be an empty string).
Edit: to quote the link @Anon551122 posted:
- 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)
Note: The value attribute cannot be used with <input type=“file”>.
The above is just, logically, what the value represents on the input.
For button inputs (type button/reset/submit), it needs to have some text, otherwise you just get an empty button shape and you wouldn’t know what it was for.
For inputs of type color/date/datetime-local/email/hidden/month/number/password/range/search/text/time/url/week, these represent some kind of input where a user has to type something in (or move a slider, or click a date on a calendar, or select a colour from a colour wheel). So if you put value into the HTML, that is going to be the value it starts with.
Note for these type of inputs, that might not be something you always want. As an example, say you have a form where someone enters an address: you don’t really want any values there to start off with. But then say there was some postcode lookup service, and a user entered a postcode & a house number, and then the rest of the address form appeared, filled in with the details. In that case, the program could generate the rest of the inputs (street/town/region etc) dynamically, with value attributes filled in. The user can still change them if necessary, but it’s more than likely going to be ok to submit the form with those values.
For inputs of type radio/checkbox, these are not things that get filled in: they’re just things to click to say true/false. If they didn’t have a value attribute set, when the form was submitted, they wouldn’t mean anything.
1 Like