Creating a radio button - but why label, name, id...?

HTML-CSS
1

Hey everybody,

I am a newbie, just started with HTML and I want to become a web developer :slight_smile: Now this is my first question. I created a radio-button in my text editor (Brackets by the way), like I learned it: create a form, nest a label-tag inside, nest a input-tag inside, give the input an attribute of name, id, ect.

Like this:

  <form action="#">I am:
   <label for="good"><input type="radio" name="good-bad" id="good">Good</label>
   <label for="bad"><input type="radio" name="good-bad" id="bad">Bad</label>
  </form>

But then I took away the label, name and id. Like this:

      <form action="#">I am:
       <input type="radio">Good
       <input type="radio">Bad
    </form>

And the output was exactly the same!!! Why all the labeling, naming ect then?

Very curious for some answers :grin: Thank you, Marcella

2

I am a newbie, just started with HTML and I want to become a web developer

Then you’ve come to the right place, welcome.

I created a radio-button in my text editor (Brackets by the way)

Cool, but the editor doesn’t matter.

Why all the labeling, naming ect then?

That will be important later on. For example, the ID’s will allow JavaScript to find and attack actions to those buttons. All of these things have a use, you’ll just learn about them later.

1 Like
3

Also, it makes it so that you can click on the label to focus on the input. It also helps for screenreaders. :smiley:

1 Like
4

All elements and attributes have some semantic value, or purpose.

It is a lot to get into in a forum thread. You can checkout MDN’s guide on forms.

1 Like
5

Labels are important for accessibility, together with many other pieces of the html code. There are some things you should or shouldn’t do in css or javascript as well.

If you’re interested have a look at the articles about accessibility in Smashing Magazine. Which is a great place to learn and a great community of web developers by the way.

https://www.smashingmagazine.com/category/accessibility

1 Like
6

Thank you for the welcome :grin: I see, technically speaking you are right about the text editor, but I LOVE my brackets and just had to mention it :wink: Ok, so I will be patient and learn a lot more!

7

Really? I will check that out!

8

Nahh, it doesn´t work… Ohhh… I see… I got the same ID twice and now it works on the other form with the same ID instead… interesting… now I also realized, why one shouldn´t use the same ID twice… thanks a lot!

9

This is a good place for future investigations also!

10

Not sure yet what accessibility means - accessible to other programmers, to users, both…? Anyway, this term seems to be important and I will find out more! Also the article and the magazine is interesting! Oh man, there is so much, I need to learn… seems I reached the shore of the infinite ocean of coding knowledge… a bit intimidating…

11

Accessibility is about being accessible to all users, including the ones with temporary or permanent disabilities. Like blind users, or users that use only one button, or the elderly users, or the users with rsi, a broken wrist, a sore eye or whatever. :wheelchair:

Make sure you’ll be good at that! One day an employer might choose you because of that knowledge. :grinning:

And yes, it’s a bit intimidating, or maybe not just a bit. I know the feeling. :slightly_frowning_face:
But I really like the fact that there is so much to learn. Never a dull moment with code! :sunglasses:

1 Like
12

Thanks, Joke, that is useful knowledge indeed! I will keep that in mind… I will do my best to become a great developer. It´s a nice ethics also, not to discriminate anybody, free access to the web for everbody, I like it a lot.

1 Like