Can different labels have the same value?

HTML-CSS
1

I am making the “Survey Form” And have a few questions:

  1. Does it matter that my values are named the same in different labels?
    I named my values for the radio 1-3 and in the checkbox I also have values named 1-3. Is this a problem? (also does it matter what name I give them?)

  2. is it better to write all the code first in HTML before starting with CSS? (like I did here) or should I get used to writing the first label and also changing it in CSS immediately?

    Your code so far

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <title> Art Survey Form </title>
  <meta charset:"utf-8">
  <link rel="stylesheet" href="styles.css">
</head>

<!--
* Title is for search engine optimization
* Charset is for encoding 
* link links HTML with CSS
-->

<body>
  <h1 id="title">Art Survey Form</h1>
  <p id="description">I appreciate you taking the time to fill this in!</p>
  <form id="survey-form">
  <label for="name" id="name-label"> Name:</label> 
  <input id="name" type="text" required placeholder="Enter your name"> 
  
  <label for="email" id="email-label"> Email:</label>
  <input id="email" type="email" required placeholder="Enter your Email">

  <label for="number" id="number-label"> Age:</label>
  <input id="number" type="number" required min="0" max="130" placeholder="Age"> 

  <label for="select" id="select-label"> Which option best describes you?</label>
  <select id="dropdown"> 
  <option value="">Select an option</option>
  <option value="1">Beginner artist</option>
  <option value="2">Intermediate artist</option>
  <option value="3">Professional artist</option>
  <option value="4">I am not an artist</option>
  
  </select>

  <label for="radio" id="radio-label">Would you want to be a full-time artist?</label>
  <input value="1" id="Yes" type="radio" name="radio">Yes
  <input value="2" id="No" type="radio" name="radio">No
  <input value="3" id="Maybe" type="radio" name="radio">Maybe


  <label for="checkbox" id="checkbox">Which art fundamentals are you most interested in?
  <input value="1" type="checkbox" name="checkbox">Color theory
  <input value="2" type="checkbox" name="checkbox">Lighting
  <input value="3" type="checkbox" name="checkbox">Perspective
  <input value="4" type="checkbox" name="checkbox">Figure drawing
  <input value="5" type="checkbox" name="checkbox">Structure
  <input value="6" type="checkbox" name="checkbox">Anatomy
  <input value="7" type="checkbox" name="checkbox">Composition
  <input value="8" type="checkbox" name="checkbox">Brushwork
  <input value="9" type="checkbox" name="checkbox">Values
  <input value="10" type="checkbox" name="checkbox">Shape design

  <label for="textarea" id="textarea">Would you like to add something?
  <textarea name="textarea" rows="4" cols="40" placeholder="Enter your comment here..."></textarea>

  <input type="submit" value="submit" id="submit">



    </form>
</body>

<!--
* Label: For accessibility, best practices dictate that you always have a for attribute on a label, no matter where the input is located. (according to forum question I asked)
*There are many different type="" for input (I can google html input type to see them). 
-->

</html>

/* file: styles.css */


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

2

Hi

Does it matter that my values are named the same in different labels?

When your form is submitted, it will contain the values corresponding to the checked radio/checkbox inputs.

So, for example, if the user clicks the “Maybe” radio button, then the form data will contain radio=3 (where radio comes from the name attribute on your radio button group).

Code on the backend server will then need to process that form input.

I’d suggest that the code on the server side would be a lot more readable (and easier to understand and debug) if your radio/checkbox input values reflected the user’s choice.

If you had something like this:

<input value="yes" id="Yes" type="radio" name="artist">Yes
 <input value="no" id="No" type="radio" name="artist">No
 <input value="maybe" id="Maybe" type="radio" name="artist">Maybe

… then if the user selects “Maybe”, the submitted form will contain artist=maybe.

I think that’s a lot more meaningful.

is it better to write all the code first in HTML before starting with CSS?

I don’t think there’s one definitive answer to this, so you probably want to hear a few different views and opinions.
I think that’s more likely to happen if you post that question in a thread of its own.

1 Like
3

Ah thanks a lot!

that cleared up a lot of my confusion about the value and name attribute, especially because its more on the backend, and I cant see yet what the impact of changing those attributes is. I understand it a lot better now and will try to make the name and value components read clearer together.

1 Like
4

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