Learn HTML Forms by Building a Registration Form - Step 37

HTML-CSS
1

Tell us what’s happening:

Submitting the form with an option selected would not send a useful value to the server. As such, each option needs to be given a value attribute. Without which,

###the text content of the option will be submitted to the server.###

The text content of the option will be submitted to the server, if you are not putting value attribute in it.
The question is. Isnt it a goodt thing? since the server will receive full text(?)

Your code so far

<!-- file: index.html -->

<!-- User Editable Region -->

      
        <label>How did you hear about us?
          <select>
            <option>(select one)</option>
            <option>freeCodeCamp News</option>
            <option>freeCodeCamp YouTube Channel</option>
            <option>freeCodeCamp Forum</option>
            <option>Other</option>
          </select>
        </label>


<!-- User Editable Region -->

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 37

2

Adding the attribute sends a useful value to the server.

From Stackoverflow: What is the purpose of the html input tag value attribute? - Stack Overflow

For example, when you are using <input type="button" name="foo" value="Click"/> , this will assign name ‘Click’ to your button. Same goes for text field: <input name="subject" type="text" value="Default text" /> will show you a text field with ‘Defaul text’ in it.

3

Hello @rifqilubis

The reason why adding a value attribute is the best approach is that you are able to divide the logic from the presentation layer:
Think about a website with different languages, the option text would change from:

<option value="youtube">freeCodeCamp YouTube Channel</option>
to
<option value="youtube">freeCodeCamp Canale YouTube</option>

So you would end up to have to build extra logic to handle multi languages in the server side while if you use the value attribute you know that will always be in English.

Translations is only one of the benefits you have by keeping this separation. another one is accessibility, screen readers and many others.

1 Like
4

for text field, isn’t it using placeholder attribute are more recommended other than value attribute?

5

can you link any website other than w3school and mozilla website? for reference

6

Sure:

Here some links of the organisms in charge and responsible to define the rules and standards for accessibility in the web:
The members of the Web Accessibility Initiative (WIP) of The World Wide Web Consortium (W3C). These organizations are responsible for publishing the Web Content Accessibility Guidelines (WCAG) and related content.

Still, as a developer, I think w3school and mozilla website are the two go to websites in terms of accessibility.

2 Likes
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.