Html Input - Name Vs. Id

Difference between id and name attributes in HTML

The name attribute is used when sending data in a form submission. Different controls respond differently. For example, you may have several radio buttons with different id attributes, but the same name. When submitted, there is just the one value in the response - the radio button you selected.

Of course, there's more to it than that, but it will definitely get you thinking in the right direction.

HTML 5 difference input id and input name?

In short, the name is the identifier that is sent to the server when you submit the form. The id is a unique identifier for the browser, clientside, for javascript and such.

Name vs Id attribute in HTML

Here are some differences between both:

1. name has never been a div element attribute.

2. name as used on the form controls (input, textarea, select, and button elements) is radically different from the id attribute on named elements. In this case, the name attribute relates to how data is labeled when sent to server, and multiple elements may share the same name.

   The id attribute on the other hand is for identifying one unique element for the purposes of scripting, styling, or addressing.

3. The use of the name attribute on other elements than form controls was in HTML 4.01 the same as that of id, but it allowed for a wider set of characters than the id attribute and wasn't controlled in quite the same way. Because of this ambiguity the W3C decided to deprecate/remove the name attribute on those elements in favor for the unambigous id attribute in XHTML.

   This is also connected to another detail of XML however - only one attribute of any element may be of the type ID, which would not be the case if they let name stay on the element, but corrected the ambiguity problems.

4. As the name attribute didn't work the same on those two sets of elements, it was best to remove one of them.

In short, for backwards compatibility, you should use the name and id attribute both, both set to the same value, for all elements except form controls if you use HTML 4.01 or XHTML 1.0 Transitional. If you use XHTML 1.0 Strict or later you should use only id. For form controls, you should use name for what you want the form to send to the server and for DOM 0 access, and only use id for styling, DOM1-3 access or addressing reasons

HTML Forms - Are name and id required?

name is used by the server-side. This is necessary if you plan to process the field. id is only so label elements, when clicked and accessed by screen-readers, can trigger/invoke the form controls (inputs and selects).

<form method=POST action="form-processor.php">
    <input name=first_name value=john>
</form>

results in

$_POST = array('first_name' => 'john');

If the method is GET, it's appended to the query string:

http://site-name.com/form-handler.php?first_name=john

It's popular for query string appending with hidden inputs:

<input type="hidden" name="q" value="1">

Do the id and name have to match inside form input tags?

No, the id attribute is just a way to uniquely identify a html element. This id can be used in a lot of ways depending on how you are creating the html (raw html with css, react, ect).

The name attribute is usually used to identify data in the multipart-form-data of a http request.

You might also look here:

• difference between id and name attributes in html
• name vs id attribute in html

exact difference between name and value attribute in input tag

actually, the value is the property that defines the input data while the name property defines the input field name that can be used for form handling in backend languages like PHP, ...

the name should be unique (in some cases it can be an array of names like multiple checkboxes use case) while the value can be dynamic and repeatable for all inputs.

---

Related Topics