Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Forms Choosing Options Radio Buttons

Jason Jun
Jason Jun
9,900 Points

What is the difference between id and name attributes in form elements?

Just curious.

3 Answers

Kevin VanderWulp
Kevin VanderWulp
5,180 Points

The ID of a form input element has nothing to do with the data contained within the element. IDs are for hooking the element with JavaScript and CSS. The name attribute, however, is used in the HTTP request sent by your browser to the server as a variable name associated with the data contained in the value attribute.

For example:

<form>
    <input type="text" name="user" value="bob">
    <input type="password" name="password" value="abcd1234">
</form>

When the form is submitted, the form data will be included in the HTTP header like this:

If you add an ID attribute, it will not change anything in the HTTP header. It will just make it easier to hook it with CSS and JavaScript.

Thank you for this info. This id attribute always confuse me. It might make sense once I get to CSS

Ben Brenton
Ben Brenton
266 Points

To add to the above answer, when it comes to radio buttons in particular (if your question was relating to this lesson) the importance is that the name remains the same throughout the options so there are no multiple selections.

Jason Jun
Jason Jun
9,900 Points

Thanks for the answers. I totally get it now!