• Post category:HTML

Select tag in HTML example | Explained

Select tag in HTML example

In this article, we will see about the select tag in HTML example. The select tag is used to create a selection list.

What is the selection list?

The selection list contains some list of options. We can display the selection list in two different ways:

  • selection list in a drop-down box
  • selection list in a list box.

If we display the selection list in a drop-down box, the user can be able to select only one option. If we display the selection list in a list box, then the user can be able to select more than one option. The selection list is one of the most important controls of a form. it is used to get inputs like date of birth or qualification details or listing out some set of items.

Drop-Down Selection List

<form>
<select name="slctQual">
<option value="i">Intern(PU)</option>
<option value="u">UG</option>
<option value="p">PG</option>
<option value="ph">PH.D</option>
</select>
</form>

Output:select tag in html example

  1. I want to get the qualification detail of the applicant, so in the above code, we have the text “Qualification” in <p> tag.
  2. Create a select tag to create a selection list, it is a paired tag, so we put opening and closing tags.
  3. Now, we have a selection list. As I told selection list is a list of options, we need to add options.
  4. We can add options by using the option tag. The option tag is a child of the select tag and it is a paired tag. So, I created three options namely Intern, UG, PG, and PH.D.
  5. So, see the above output the drop-down list is displayed with three options. A user can select only one option out of the available options.
  6. Also, we can give values to each option by using the “value” attribute as in the above code. And we can use the “name” attribute in the select tag and give your desired name for returning the user-selected option. For ex :  If the user selects the UG option, the ‘u’ value will be returned in the code name.
READ ALSO  2 Simple Way to Add HTML to Squarespace

Similarly, we can display the selection list in a list box instead of a drop-down box.

List Box Selection List

<form>
<select name="slctQual" multiple>
<option value="i">Intern(PU)</option>
<option value="u">UG</option>
<option value="p">PG</option>
<option value="ph">PH.D</option>
</select>
</form>

Output:select tag in html example

To create a list box, we can add an attribute “multiple” to the select tag. If you add it, a user can select multiple options. So, see the above output I can select two options.

Leave a Reply