21

Why do I need the name and id attributes for <input> form elements?

Which is used for POST data sending and which can I exclude?

pnuts
  • 56,678
  • 9
  • 81
  • 133
Robin Rodricks
  • 105,357
  • 137
  • 385
  • 594

9 Answers9

25

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">

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
meder omuraliev
  • 177,923
  • 69
  • 381
  • 426
9

An id isn't required. Name isn't mandatory either, but the browser will not sent the <input>'s data without it. This is the same for POST and GET.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Kobi
  • 130,553
  • 41
  • 252
  • 283
3

name is the attribute that determines the "variable name" when doing a post. id is used for JavaScript purposes, etc.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
aioobe
  • 399,198
  • 105
  • 792
  • 807
3

name is used for POST and GET.

id is used for styling.

class is used for applying the same style to a bunch of elements that are of the same "class".

That's how I memorize them.

Leo Jweda
  • 2,463
  • 3
  • 24
  • 34
2

HTML5 quote

Naming form controls: the name attribute confirms that it is not mandatory:

The name content attribute gives the name of the form control, as used in form submission and in the form element's elements object. If the attribute is specified, its value must not be the empty string or isindex.

What happens if it is not specified?

In Chromium 75 where I tested with nc, it just does not get sent:

<!doctype html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>Min sane</title>
    </head>
    <body>
        <form action="http://localhost:8000" method="post">
            <p><input type="text" name="key" value="default value"></p>
            <p><button type="submit">Submit</button></p>
        </form>
    </body>
</html>

sends:

key=default+value

but without name it simply doesn't.

Both pass the HTML validator however.

Why would you want an input without name?

JavaScript can still access the value and do something with it.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Ciro Santilli Путлер Капут 六四事
  • 302,449
  • 85
  • 1,093
  • 879
0

name is needed for POST and GET... but not id... id is used for client-side processing.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
Reigel
  • 62,834
  • 21
  • 119
  • 135
0

Name is required so that you can post or get the values in the next page. Id is required for you to do manipulations with CSS and stuff like that. It is also possible only with the name. So Name is more important. Giving an id makes it look standardised.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
1s2a3n4j5e6e7v
  • 1,235
  • 2
  • 15
  • 28
  • Why does giving it an ID make it look 'standardized'? And you really should use 'necessary' instead of 'required'. Word choice is key in programming. – animuson Jun 16 '10 at 08:02
  • document.getElementsByName() can be used instead of document.getElementsById() for all client side operations. – Ricardo Slafford Jun 16 '10 at 08:06
0

Just want to add that the name attribute is required if you're working with radio elements.

With the name attribute, the radios in a radio group will belong together. Example below:

<p>Colors</p>
<div>
   <input type="radio" name="colors" value="red" id="radio-red"><label for="radio-red">Red</label>
   <input type="radio" name="colors" value="blue" id="radio-blue"><label for="radio-blue">Blue</label>
</div>

<p>Pets</p>
<div>
   <input type="radio" name="pets" value="cats" id="radio-cats"><label for="radio-cats">Cats</label>
   <input type="radio" name="pets" value="dogs" id="radio-dogs"><label for="radio-dogs">Dogs</label>
</div>

Link for you to play with: https://codepen.io/bj-rn-andreasson-jogmark/pen/PoQprja

Björn Andreasson
  • 61
  • 1
  • 4
-1

name is required, and id is not that important. However, id is used to associate labels to common form input fields like radio button, textboxes, etc.

Peter Mortensen
  • 30,030
  • 21
  • 100
  • 124
deostroll
  • 11,345
  • 21
  • 82
  • 152
  • 1
    The name attribute is *not* required. – animuson Jun 16 '10 at 07:59
  • @animuson, while I agree with you, technically, I'd argue that, if you want to do something with the entered data, it's kind of essential to have a `name` attribute. – David Thomas Jun 16 '10 at 08:02
  • @ricebowl: You're basically saying it is necessary in order to perform certain functions, but there are still plenty of uses for an input field where a name attribute would not be needed. – animuson Jun 16 '10 at 08:06
  • @animuson: true, but if you need the data in the field to be posted to the server (for processing), the name attribute is required. – deostroll Jun 16 '10 at 08:20
  • There is still a difference between requirement and necessity. If you were writing an instruction manual, you would say that you "need to define a name attribute if you are planning to post the data." You don't say a name attribute is required because that gives them the false assumption that they must *always* define a name attribute. – animuson Jun 16 '10 at 08:28
  • @animuson, I accept that there are valid uses for a name-less input, but I can't think what they would be; which is the position from which I wrote my previous comment. – David Thomas Jun 16 '10 at 09:19