What's The Point of HTML Forms 'Name' Attribute

What's the point of HTML forms `name` attribute?

In short, and probably oversimplifying a bit: It is used instead of id for browsers that don't understand document.getElementById.

These days it serves no real purpose. It is a legacy from the early days of the browser wars before the use of name to describe how to send control values when a form is submitted and id to identify an element within the page was settled.

What is the purpose of the HTML name attribute?

The name attribute identifies the input value if it is sent to a server via a traditional GET or POST of a form.

Specific to the example if you had:

<form action="http://localhost" method="POST">
    <label for="User">Click me</label>
    <input type="text" id="User" name="Name" value="foo" />
    <input type="submit" value="submit" />
</form>

and you submit the form, the server localhost will receive a content body like:

Name=foo

which as another post mentions, is usually parsed by a server side language like PHP into something easier to work with.

The id attribute identifies the input to the DOM. If you specify an input with no name but an id and try to submit it via a GET or POST it will not be parsed correctly by the server.

Use of name property in form elements?

the name attribute isn't really necessary when you are not sending data through it. The id of the form input element can fulfill the purpose of hooking the element with JavaScript and CSS.

The name attribute is used in the HTTP request sent by your browser to the server as a variable name associated with the data contained in the value attribute.

Here I'm taking example of extracting data with php in a login form. If you don't know php you wouldn't probably know $_POST and $_GET. For now just know that they are used to extract data sent with this HTTP request.

<form action="login.php">
    <input type="text" name="user" value="kittyCat">
    <input type="password" name="password" value="querty123">
</form>

Now in login.php file you can extract the data like this:

$userName = $_POST['user'];
$password = $_POST['password'];

here user points to the fist input so $username will be equal to the value of that input, which is "kittyCat". similarly $password will be equal to "qwerty123".

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.

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.

What is the purpose of the `name` attribute in a checkbox input element?

Dont be confused because of name="checkbox". It could more logically be name="drink" and type=checkbox.

In the above case, you have multiple checkboxes with the same name. When several checkboxes have the same name, the form will send a group of values to the server in the request. Note: only the values of the checked checkboxes will be sent to the server.

Ideally these are used to allow multiple choice questions where more than one answer is allowed.
As opposed to radio buttons, where only one answer is allowed among the options.

Update:

On the receiving side, if you're using JSP for example - the values of the selected checkboxes will be available as request.getParameterValues("drink") or request.getParameterValues("checkbox") in your actual case. This is where the name attribute is used.

What do id and name do in a form?

Name

The name attribute is needed for the database or other data destination to uniquely identify that piece of data.

When the form is submitted, most scripts use the name attribute to place the form data into a database or into an email that can be read by a person. Thus, if the <input> element is for the site visitor to enter their name into, then the name attribute would be name="name" or name="first-name", etc. (source (W3C)).

A control's "control name" is given by its name attribute. The scope of the name attribute for a control within a FORM element is the FORM element. Source (W3C).

Id

The id attribute has several roles in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g., for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.) (Source (W3C).)

Is it redundant to use the name attribute for input fields in modern web development?

The name attribute is the notation to reference specific elements within the scope of a webpage through non-DOM Javascript:

document.forms['your_form'].elements['aa']

The id attribute for the element needs to be set with the same value for the following to work:

document.getElementById('aa')

My understanding is that when Netscape created Javascript, it used the name attribute. The HTML spec however decided to go with id, but kept name for backwards compatibility. IME, using the name attribute was required for Internet Explorer 6 support because the javascript engine in IE wouldn't read the id attribute - only the name though both were defined.

...could be avoided the use of this attribute with input fields of "text" type (when there aren't no styling or scripting purposes)?

If you don't have any javascript attached to the text fields, yes - they would be unnecessary.

---

Related Topics