Sometimes when you create forms or input fields, you need to provide a set of options for the user to select. There are two ways to do this. Those use the <select> tag and <datalist> tag.

Select

<select> tags are generally used inside the forms because you want to process the value provided by the user in the backend.

The <select> tag itself doesn't provide any options. For that, you use <option> tags inside the <select> tag to specify the options you want to give the user.

It's essential to give a value to the name attribute; otherwise, the data user selected will not be submitted after submitting the form.

You can use the required attribute with the <select> tag to make it mandatory to choose the select option when submitting the form.

Datalist

However, as you can see, <select> doesn't allow the user to type an answer he/she wants. Use the <datalist> tag.

Datalist tag also autocompletes your text. So when you press a specific letter inside the text box, it will only suggest options containing the letter types.