• Home
• Web Tutorial
• Full Course
• English Tutorial
• HTML
• HTML Tag
• What is HTML <select> Tag

How to create HTML <select> Tag

It creates a drop-down list with four options

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

How to add Use <select> with <optgroup> tags

The optgroup tag is used to group related options in a drop-down list.

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <select> autofocus Attribute

The autofocus attribute specifies whether the <element> should be auto-focused when the page document loads.

Definition and Usage

The autofocus attribute is a boolean attribute.

When present, it specifies that the drop-down list should automatically get focus when the page loads.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

How to add HTML <select> autofocus Attribute

It is a drop-down list with autofocus

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" autofocus>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <select> disabled Attribute

The disabled attribute for <select> element in HTML is used to specify that the select element is disabled. A disabled drop-down list is un-clickable and unusable. It is a boolean attribute. 

Definition and Usage

The disabled attribute is a boolean attribute.

When present, it specifies that the drop-down list should be disabled.

A disabled drop-down list is unusable and un-clickable.

The disabled attribute can be set to keep a user from using the drop-down list until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript can remove the disabled value, and make the drop-down list usable.

Browser Support

Syntax

How to create HTML <select> disabled Attribute

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" disabled>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <select> form Attribute

Definition and Usage

The form attribute specifies the form the drop-down list belongs to.

The value of this attribute must be equal to the id attribute of a <form> element in the same document.

Browser Support

Syntax

Attribute Values

How to create HTML <select> form Attribute

index.html

Output should be:

What is HTML <select> multiple Attribute

Definition and Usage

The multiple attribute is a boolean attribute.

When present, it specifies that multiple options can be selected at once.

Selecting multiple options vary in different operating systems and browsers:

• For windows: Hold down the control (ctrl) button to select multiple options
• For Mac: Hold down the command button to select multiple options

Because of the different ways of doing this, and because you have to inform the user that multiple selection is available, it is more user-friendly to use checkboxes instead.

Browser Support

Syntax

How to add HTML <select> multiple Attribute

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <select> name Attribute

Definition and Usage

The name attribute specifies the name for a drop-down list.

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Browser Support

Syntax

Attribute Values

How to add HTML <select> name Attribute

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <select> required Attribute

Definition and Usage

The required attribute is a boolean attribute.

When present, it specifies the user is required to select a value before submitting the form.

Browser Support

Syntax

What is HTML <select> required Attribute

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" required>
    <option value="">None</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

What is HTML <select> size Attribute

Definition and Usage

The size attribute specifies the number of visible options in a drop-down list.

If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.

Browser Support

Note: In Chrome and Safari, this attribute may not work as expected for size="2" and size="3".

Syntax

Attribute Values

How to add HTML <select> size Attribute

index.html

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars" size="3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

Output should be:

Reffered: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select