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 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,600 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. :)

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 91,252 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!