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

Matthew Rigdon
Matthew Rigdon
8,223 Points
Posted by Matthew Rigdon
Matthew Rigdon
8,223 Points

HTML Forms: Difference between 'type,' 'id,' and 'name'?

I am currently working through HTML forms, and for each input field we are specifying a 'type,' 'id,' and a 'name.' I believe the 'name' field is used for back-end programming, but what is the difference between 'type' and 'id?' Their names are usually very similar. here is an example of the code:

<fieldset> <!-- 'fieldset' groups elements together and adds spacing in form-->

          <legend><span class="number">1</span> Your basic info</legend> <!-- 'legend' adds a label to each fieldset-->

          <label for="name">Name:</label> <!-- label allows you to write what each field does -->
          <input type="text" id="name" name="user_name">

          <label for="mail">Email:</label>
          <input type="email" id="mail" name="user_email">

          <label for="password">Password:</label>
          <input type="password" id="password" name="user_password">

        </fieldset>

1 Answer

Will Long
Will Long
5,449 Points
Will Long
Will Long
5,449 Points

Name Attribute •Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea> •Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes •Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds •Is referenced in JS with getElementsByName() •Shares the same namespace as the id attribute •Must begin with a letter •According to specs is case sensitive, but most modern browsers don't seem to follow this •Used on form elements to submit information. Only input tags with a name attribute are submitted to the server

Id Attribute •Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title> •Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file •Can be used as anchor reference in URL •Is referenced in CSS or URL with # sign •Is referenced in JS with getElementById(), and jQuery by $(#<id>) •Shares same name space as name attribute •Must contain at least one character •Must begin with a letter •Must not contain anything other than letters, numbers, underscores (_), dashes (-), colons (:), or periods (.) •Is case insensitive

In (X)HTML5, everything is the same except:

Name Attribute •Not valid on <form> anymore •XHTML says it must be all lowercase, but most browsers don't follow that

Id Attribute •Valid on any attribute •XHTML says it must be all lowercase, but most browsers don't follow that