What does `id` and `name` do for an input tag?

What is the point in adding id="" and name="" when it is irrelevant the feature itself? For example, on the section “How do you want your patty cooked?” the input is as follows: <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">

However, take out those 2 and you still get the exact same functionality on the menu. The input could look like this:
<input type="range" value="3" min="1" max="5">

So is the name and id in this scenario simply for data we are retrieving?

The id could be a hook for some CSS selector rule, it could be a hook for a JS element node to capture events, or it could be associated with a label. If neither of those apply, then it is not needed. As for the name, that is used to identify the user input in the POSTDATA on Submit.

11 Likes

Is there some reason that the form element was not programmed to use the id values to identify user input in the POSTDATA?

Backward compatibility. The name attribute was here long before CSS came on the scene. The idea of version iteration is rarely to do away with things that work, but rather to enhance the workflow. id is a global attribute that allows us to hook page fragments. It was introduced in CSS 1.

In a previous input type, the tutorial points out that the label and input are linked, and for instance if you click on the label portion, you’ll see the cursor appear in the entry field (or even just mousing over the label visibly activates the entry field.) The “How many patties would you like?” label just before this was a good example of this.
In the example you asked about, the id=“doneness” is also used by the label. You referred to the section “How do you want your patty cooked”, but that text is not actually the section, it’s the label for the input, and the label’s opening tag has a for=“doneness” attribute, which depends on the input tag’s id.
This input, however, is not an entry field but rather a slider, something where the user picks from a set of possible choices (like the checkboxes and radio buttons), and I imagine there’s not a great way for this linkage to show up on those. (There’s no cursor for instance.) But you would still want the label to be linked to the input for consistency with the other input types when applying a CSS style sheet, or as mtf mentioned, some javascript treatment later on in the development.