When using the HTML <input>
tag, what is the difference between the use of the name
and id
attributes especially that I found that they are sometimes named the same?
Even though you can technically use the name to look out for CSS stylesheets or JavaScript elements, the ID is meant for it. The former is associated with the form element and is better to identify what is sent to the server. So using the same word for both the HTML name and ID attributes is not a “problem” as such.
Yes, it validates (with surrounding body, doctype, etc added). No warnings re the duplicate names.
The name attribute is for submitting a form element to the server; many elements may share the same name (e.g. radio buttons, which must have the same name within the set). The id attribute is for uniquely identifying any element (not just form elements). It must be unique throughout the entire document.
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet.
In HTML4.01:
Name Attribute
<a>
, <form>
, <iframe>
, <img>
, <map>
, <input>
, <select>
, <textarea>
getElementsByName()
id
attributename
attribute are submitted to the serverId Attribute
<base>
, <html>
, <head>
, <meta>
, <param>
, <script>
, <style>
, <title>
#
signgetElementById()
, and jQuery by $(#<id>)
_
), dashes (-
), colons (:
), or periods (.
)In (X)HTML5, everything is the same, except:
Name Attribute
<form>
any moreId Attribute
This question was written when HTML4.01 was the norm, and many browsers and features were different from today.
The name attribute is used for posting to e.g. a web server. The id is primarily used for CSS (and JavaScript). Suppose you have this setup:
<input id="message_id" name="message_name" type="text" />
In order to get the value with PHP when posting your form, it will use the name attribute, like this:
$_POST["message_name"];
The id is used for styling, as said before, for when you want to use specific CSS content.
#message_id { background-color: #cccccc; }
Of course, you can use the same denomination for your id and name attribute. These two will not interfere with each other.
Also, name can be used for more items, like when you are using radio buttons. Name is then used to group your radio buttons, so you can only select one of those options.
<input id="button_1" type="radio" name="option" /> <input id="button_2" type="radio" name="option" />
And in this very specific case, I can further say how id is used, because you will probably want a label with your radio button. Label has a for attribute, which uses the id of your input to link this label to your input (when you click the label, the button is checked). An example can be found below
<input id="button_1" type="radio" name="option" /><label for="button_1">Text for button 1</label> <input id="button_2" type="radio" name="option" /><label for="button_2">Text for button 2</label>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With