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?
2
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">
0
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.
0
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.
4
name is the attribute that determines the “variable name” when doing a post. id is used for JavaScript purposes, etc.
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.
2
name is needed for POST and GET… but not id… id is used for client-side processing.
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.
2
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
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.
8