Having trouble understanding this element fully

<input type="text" id="email" name="email">

The type field defines the type of input, the id field links to the correct label name, but what does the name field do? Is it for search engines or readability for the blind?

1 Like

When in doubt, check the documentation.

If I google “mdn input”, I an taken to a page where I find this. Take a read and see if that clears it up.

The “name” field is the name of the input field as part of the name/value pair.

When there is no “name” field then we do not know for which value this specific field is made for. It is basically just a label to the input value.

Like you already figured out, the type tells what input we have, a field where we write some text, a button which is clickable, a field where we can put numbers, or maybe few options we can choose from. The options are many. The id, is a selector tool, which helps us target the right element and apply some styles to it. The name field is used to associate the input, when its information is sent with the form. Lets say you have a form, where you have a field where you input your email address, a field where you input your favorite number and another field where you pick between several options of your favorite drink. You might give the email input a name “email”(you design the names, they are not preset), the number field with a name “number” and the inputs where you choose drink “drink”. When the form is filled and submitted successfully, its data will be sent to the server with object like format, where each input is associeted with its name. For example {email: 'randomemail@gmail.com', number: 6, drink: 'cola'}. This makes it comfortable for whoever handles the data, to work with it. In the case with the “drink” field, where we choose from different options, we will be likely to have radio inputs. All of those radio inputs will have the same name- “drink”, to associate them with the same value in the form.