Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Forms Form Basics The Input Element

James Barrett
James Barrett
13,253 Points

Understanding id and name attributes

Hi,

I am struggling to grasp what exactly id and name is doing in this video. What exactly are these attributes doing in the form?

Erin Clayton
Erin Clayton
3,840 Points

I think id=has to do with the selecting/identifying process and name=comes in handy later when connected to urls on server-side (from what I've been hearing in this vidz).

4 Answers

Codin - Codesmite
Codin - Codesmite
8,599 Points

The "id" and "name" attributes should be explained in more detail later in the track.

But as a quick example of what these two attributes can be used for:

  1. id can be used to style the element from a css file, it also allows for linking labels to inputs which will be explained later in the track.

  2. The name attribute can be used by backend scripting languages such as PHP to reference values submitted by the form.

For example:

<?php

$variable = $_POST["user_name"];

?>

In the example above I called the value of the form input with the name "user_name" from the form and applied it to a php variable named $variable.

This would be used in situations where you point your form towards a PHP file to incorporate the user entered data in the form in your PHP script.

This is an advanced example but is one of the most common uses.

All of the above should be covered at some point in the track or later more advanced tracks.

If you need any more help or a more detailed explination let me know :)

James Barrett
James Barrett
13,253 Points

Brilliant, thanks for your help. :)

Nejc Vukovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Nejc Vukovic
Full Stack JavaScript Techdegree Student 36,272 Points

id is a # CSS tag that let's you style the element you want.

The name property is then used when coding the backend of a form -> you need the name of the property in PHP so that PHP knows which input to evaluate - select.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,699 Points

Hi there

Id is a unique identifier for an element, just as you do for any other element. It links with the for attribute of a label element.

Name is a way of differentiating 2 form elements of the same type together.

For example,

  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>

You can only select one radio button but the name attributes are what group them together as choices.

James Barrett
James Barrett
13,253 Points

Thank you all for your answers, very helpful!