HTML Forms - Are Name and Id Required

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

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.

Does the name and id need to be the same in a HTML form input

As shown in this example:

<label for="username">Enter your username:</label>
<input id="username">

id can be used to connect inputs with their labels. Also you can use id to find the element in JS (DOM manipulation) and add css styles to that input. Although you can do both with name, it's not common practice.
In languages like PHP or/and in forms sending data to some url (without reading the form data without getting the values of input items in JS and then sending it through ajax/fetch) name is used to label the data being sent to destination.

for example in PHP we read input values like this:

$var = $_GET['some_input_name'];
$var_posted = $_POST['some_other_input_name_but_with_post']

in this does not work with id.

if you send a form data to some url with GET method, you can see your input names added to the action (destination) url.
for example:

<form action="http://example.com/" method="get">
    <input name="username" type="text">
</form>

will send and attach data to:
http://example.com/?username=text_entered_in_the_input

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

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).)

was the name attribute really needed in html?

name, id, and class have fundamentally different purposes.

name is for form element names and is not required to be unique (in fact, sometimes you need to reuse the same name).
id is, as the name indicates, an identifier for an element and must be unique in the document as a whole.
class is primarily for presentation (although it sometimes used for hooking up client-side UI as well) and contains a list of classes for the element, not just a single class. If you used class for form field identification, which of the possibly-several classes would you use?

Ways you might use the same name on more than one field:

You can use the same name in different forms without there being any conflict.
You use the same name within a form for radio buttons that should be grouped together.
You can use the same name within a form for multiple other kinds of elements whose values should all be sent to the server.

In contrast, id must be unique — not only within the form, but within the entire document.

#3 might need an example for clarity. Suppose you have:

<form action="example" method="get">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="text" name="foo">
    <input type="submit" value="Send">
</form>

If the user fills in a, b, and c in those three text fields and sends the form, this is the query string:


?foo=a&foo=b&foo=c

Notice that foo was repeated. The receiving resource can access all three of those values. (Perhaps you're listing tags for a post, or all of your children's names, or...)

In HTML forms does the label target the name or the id of the input?

The attribute for in a label, target the id of an input.

Some definitions:

<input>

name: Name of the input form control. Submitted with the form as part
of a name/value pair.

id: Global attribute valid for all elements, including all the input
types, it defines a unique identifier (ID) which must be unique in the
whole document. Its purpose is to identify the element when linking.
The value is used as the value of the <label>'s for attribute to
link the label with the form control.

<label>

for: The id of a labelable form-related element in the same document
as the <label> element. The first element in the document with an id
matching the value of the for attribute is the labeled control for
this label element, if it is a labelable element. If it is not
labelable then the for attribute has no effect. If there are other
elements which also match the id value, later in the document, they
are not considered.

More information: input element and label element

Is name attribute mandatory in input, textarea and button elements?

If these tags are inside a form tag and you are subbmitting that
form to a server, then name is required,
If you are just using them for client-side purposes and don't want to send them to server, then it is optional.

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.

HTML Forms - Are Name and Id Required