What's the difference between the name and id attributes?

Ok thank you.
Speaking of specificity, is it better to select an element using its name attribute or is it better to add a class attribute to it and then select it using a class selector

In my view the better form would be whichever needs the least amount of markup. If we can select the element by an attribute it already has then we needn’t add another attribute. Less is more when it comes to CSS. At first this might sound strange, but as you continue to develop HTML/CSS it will become a little more clear.

1 Like

Why hasn’t the W3C chosen to simply send whatever is in the id-attribute instead of adding another attribute (name)? This way, more often than not both have to be defined without much added benefit, like so …

<input id="username" name="username" type="text">

The name attribute is much older than the id attribute, and the basis of form submit. The name attributes are parsed out of the DOM and the corresponding values written with them in the request header.

username = value

where value is the attribute containing the user input.

In that example above, is it safe to say that the “type” and “name” attributes are declaring the type of input to expect and the “name” is in fact the variable name for the user input into “value”?

or, accept, might be a better word. Form controls don’t expect anything. If the type is “number” then a control comes up that can only take numbers, and so on. Our validation code will play a part in sorting out what is to be accepted before submitting, and some back end validation may play a larger hand, failing that.

Yes, name is the attribute for the submission name which corresponds to the value attribute in the POST data associative array.

name="color" value=""  // say "purple"

becomes,

color: "purple"

in the POST (or GET) data.

hi there, as I am reviewing this code, I am wondering why is name attribute necessary. If we have the input code has already the type attribute, which means a blank box that is waiting to be filled. then the value is what will be filled in that box, so why is name attribute necessary there?

It is not necessary if the form is going to be handled by a DOM script that composes the server request (assuming there is to be one). In that case we are bypassing the default behavior of the browser. However, that is risky because it is not secure. Using the browser’s Submit behavior is more secure. For that purpose we do need the name attribute since that is what the browser will use as a key in the associative array it composes from the form data.

<input name="username" value="" placeholder="User Name">
<input type="submit">

Given the user enters “Daniel Defoe” in the input field, the array will look like,

[ "username" => "Daniel Defoe" ]
        \             \
        name         value

If the method specified is GET then the request will be made in an encoded URL,

Given,

<form action="https://www.example.com/register.php" method="GET">

this is what it will look like,

https://www.example.com?username=Daniel%20Defoe