About datalist and option tags

Question

I have a question, why when we make a datalist we write

<datalist id="name">
<option value="Alex">
</datalist>
<input id="names" type="text" list="name">

And not

<datalist id="name">
<option value="Alex">
</datalist>
<input id="names" type="text" list="#name"> ??

I thought we used # to reference an id

Also, why when I remove the id="names" from input it doesn't work anymore?

Also, when we want to make a list of options for <select> tag why do <option> tags need a closing tag like this:

<select>
<option value="Alex"> Alex </option>
</select>

While using option tag in a datalist it works just fine with only value, when we use it in select tag I need to also write the value between <option> and </option> for some reason, can someone explain?

Answer 1

Question 1: Why is there no # when referencing a datalist id?
Answer:
- The list attribute's value isn't a CSS selector. HTML isn't CSS. CSS is where selectors always use # to select by id.
- HTML isn't consistent on using # for id so it is basically up to discretion of the HTML designers. # is used with usemap attribute. # is used in internal anchors but that's also part of the URL formatting rules. # is not used for label elements that reference their labelled elements, though. For example, <label for="my_input_id">.

Question 2: Why is text within the option needed for select but not for a datalist?
Answer:
SELECT options are used for 2 text-like values but datalist options are used for only 1. As a result, the text in a datalist option element is completely ignored.

SELECT options are both shown and submitted as form data. This means you may want different content shown to the user than submitted when the form is submitted.

For example, you could have names of people shown in a select dropdown but the data submitted with the form is id values for each person.
<select name="person">
<option value="1">Bob</option>
<option value="2">Sam</option>
</select>

If you wanted something like this below, you could just remove the value attributes and it'll work the same with less markup:
<select name="person">
<option value="Bob">Bob</option>
<option value="Sam">Sam</option>
</select>

Here is a cleaner version:
<select name="person">
<option>Bob</option>
<option>Sam</option>
</select>

A datalist option is never submitted directly. It may be copied into an input that uses the datalist but that's just the same single value that you also see in the datalist popup.

Answer 2

Thanks for your answe, I only have one more question, I don't know why but if I don't put an id in the input the options don't appear, I don't understand why, if I write it like this:

<input type="text" id="example" list="names">
<datalist id="names">
<option value="Alex">
</datalist>

when I press to type in the input the option "Alex" appears, if I however remove the id="example" the options don't appear.

Answer 3

Nvm, I just tried it in code playground and it works, for some reason it wasn't working when I tried on my laptop, I will need to check if the id really was the reason it didn't work.