Categories
Learn HTML

HTML: select tag

HTML: <select> tag

In this series of learning HTML, we will teach you how to use HTML select tag with proper syntax and lots of examples. Let’s start on the HTML select tag.

 

 

Description for HTML select tag

The HTML <select> tag is used to create a drop-down list of options on a web page. It allows users to select one or more options from a predefined list of choices.

Here is an example of how the <select> tag can be used:

<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>

In this example, the <select> tag is used to create a drop-down list of fruit options, with three choices: Apple, Banana, and Orange. Each option is created using the <option> tag, which specifies the value of the option and the text that is displayed to the user.

When the code is rendered in a web browser, it will appear like this:

[dropdown arrow]
Apple
Banana
Orange

The user can click on the drop-down arrow to display the list of options, and then click on an option to select it. The selected option is then sent to the server when the form is submitted.

The <select> tag also supports several attributes, such as multiple (allowing users to select multiple options) and disabled (disabling the selection of options).

Here is an example of a <select> tag with the multiple attribute:

<select name="fruit" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>

In this example, the user can select multiple options by holding down the Ctrl key (Windows) or the Command key (Mac) while clicking on the options.

Overall, the <select> tag is a useful tool for creating drop-down lists of options on a web page, and can be used in forms, surveys, and other user input scenarios.

 

Syntax for HTML select tag

The HTML select tag is used to create a drop-down list of options in a web page. The syntax of the select tag is as follows:

<select name="select_name" id="select_id">
<option value="option_value1">Option 1</option>
<option value="option_value2">Option 2</option>
<option value="option_value3">Option 3</option>
</select>

Here, the select tag is a container element that encloses a list of option tags. The name attribute is used to specify the name of the select element, which is sent to the server when the form is submitted. The id attribute is used to give a unique identifier to the select element so that it can be referenced by JavaScript.

Each option tag represents an option in the drop-down list. The value attribute is used to specify the value of the option, which is sent to the server when the form is submitted. The text between the option tags is the display text of the option.

Example:

<select name="cars" id="carList">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

This will create a drop-down list of cars with four options: Volvo, Saab, Mercedes, and Audi. When the form is submitted, the value of the selected option is sent to the server with the name “cars”.

 

 

Global Attributes

The <select> tag in HTML has several global attributes that can be used to modify its behavior and appearance. These include:

  • accesskey: Specifies a keyboard shortcut for the element.
  • autofocus: Specifies that the element should automatically get focus when the page is loaded.
  • class: Specifies one or more class names to associate with the element.
  • dir: Specifies the directionality of the element’s text.
  • disabled: Specifies that the element should be disabled.
  • hidden: Specifies that the element should be hidden.
  • id: Specifies a unique identifier for the element.
  • lang: Specifies the language of the element’s content.
  • multiple: Specifies that the user can select multiple options from the element.
  • name: Specifies the name of the element.
  • required: Specifies that the user must select at least one option from the element.
  • style: Specifies one or more inline CSS styles to apply to the element.
  • tabindex: Specifies the tab order of the element.
  • title: Specifies a title for the element, which is typically displayed as a tooltip when the user hovers over the element.

It’s worth noting that the <select> tag is often used in conjunction with the <option> tag, which is used to define the available options for the <select> element. The <option> tag also has several attributes that can be used to modify its behavior, including disabled, selected, and value.

 

 

 

Event Attributes

The <select> tag in HTML also has several event attributes that can be used to define JavaScript code that will be executed when certain events occur on the element. These event attributes include:

  • onchange: This event occurs when the value of the <select> element is changed by the user.
  • onfocus: This event occurs when the <select> element receives focus.
  • onblur: This event occurs when the <select> element loses focus.
  • onkeydown: This event occurs when a key is pressed down while the <select> element has focus.
  • onkeypress: This event occurs when a key is pressed while the <select> element has focus.
  • onkeyup: This event occurs when a key is released while the <select> element has focus.

Here is an example of how to use the onchange attribute with the <select> element:

<select onchange="myFunction()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

<script>
function myFunction() {
var x = document.getElementsByTagName("select")[0].value;
alert("You selected: " + x);
}
</script>

In this example, the onchange attribute is used to call a JavaScript function named myFunction() when the user changes the value of the <select> element. The function retrieves the selected value and displays it in an alert box.

 

 

 

Other Attributes

In addition to global and event attributes, the <select> tag in HTML also has several other attributes that can be used to specify additional information about the element. Some of these attributes include:

  • name: Specifies a name for the <select> element, which is used when submitting the form data to the server.
  • multiple: If present, allows the user to select multiple options from the list. When this attribute is present, the <select> element will be rendered as a list box instead of a drop-down list.
  • size: Specifies the number of visible options in the drop-down list. This attribute is only used when the multiple attribute is not present.
  • disabled: If present, disables the <select> element so that it cannot be used by the user.
  • required: If present, specifies that the <select> element must be filled out before submitting the form.

Here is an example of how to use the name and required attributes with the <select> element:

<form>
<label for="color">Choose your favorite color:</label>
<select id="color" name="color" required>
<option value="">Select a color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<input type="submit" value="Submit">
</form>

In this example, the name attribute is used to specify the name of the <select> element as color. This name will be used when submitting the form data to the server. The required attribute is also used to specify that the user must select an option from the list before submitting the form.

 

Note on HTML select tag

The <select> tag in HTML is used to create a drop-down list of options that the user can choose from. It is a very useful form element for allowing users to select one or more options from a list of choices.

Here are some important notes to keep in mind when using the <select> tag in HTML:

  • The <select> element must contain one or more <option> elements to define the available options. Each <option> element must have a value attribute, which specifies the value that will be sent to the server when the form is submitted. The text between the opening and closing <option> tags is the visible text that the user will see in the drop-down list.
  • The selected attribute can be used to specify which option should be selected by default when the page is loaded. If no selected attribute is present, the first option in the list will be selected by default.
  • The size attribute can be used to specify the number of visible options in the drop-down list. This attribute is only used when the multiple attribute is not present.
  • If the multiple attribute is present, the user can select multiple options from the list. When this attribute is present, the <select> element will be rendered as a list box instead of a drop-down list.
  • The name attribute is used to specify a name for the <select> element, which is used when submitting the form data to the server.
  • The required attribute can be used to specify that the user must select an option from the list before submitting the form.
  • The <select> element can be styled using CSS to change its appearance and behavior. The appearance of the drop-down list can be customized using the appearance property, and the behavior of the drop-down list can be customized using the select pseudoclass.

Overall, the <select> tag is a powerful form element that allows users to select one or more options from a list of choices. It is widely used in web forms and is an important part of building interactive and user-friendly web applications.

 

Browser Compatibility

The HTML select tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

 

Examples for HTML select tag

We will discuss the <select> tag below, exploring examples of how to use the <select> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML select tag below, with some examples of how to use the select tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

HTML5 Document

If you created a new HTML webpage in HTML 5, your HTML select tag might look like this, as shown below:

<!doctype html>
<html>

<head>
<metacharset="UTF-8">
<title>HTML5 Examples by www.home4cloud.com</title>
</head>

<body>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="breakfast">Choose a Breakfast:</label>
<select name="breakfast" id="Breakfast">
<option value="Dosa">Dosa</option>
<option value="Idli">Idli</option>
<option value="Chutney">Chutney</option>
<option value="Sandwich">Sandwich</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>

</body>
</html>

 

The output of HTML Select Tag in Action.

 

In the above HTML5 code sample, we have created an HTML select tag to create the list of dropdown values – Dosa, Idli, Chutney, Sandwich. These values will appear as a dropdown list in that selected form.

 

 

HTML 4.01 Transitional Document

If you created a new HTML webpage in HTML 4.01 Transitional, your HTML select tag might look like this, as shown below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.home4cloud.com</title>
</head>

<body>
  <label for="breakfast_choice">Choose a Breakfast: </label>

  <select id="breakfast_choice">
    <option value="Dosa">Dosa</option>
    <option value="Dosa">Idli</option>
    <option value="Chutney">Chutney</option>
  </select>
</body>

</html>

 

The output of HTML 4.01 Transitional, HTML Select Tag in Action.

In the above HTML 4.01 Transitional code sample, we have used an HTML select tag that is used to create a list of dropdown values of breakfast recipes – Dosa, Idli, Chutney, Sandwich. These values will appear as a dropdown list in that selected form.

 

 

XHTML 1.0 Transitional Document

If you created a new HTML webpage in XHTML 1.0 Transitional, your HTML select tag might look like this, as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.home4cloud.com</title>
</head>

<body>
  <label for="breakfast_choice">Choose a Breakfast: </label>
 
 <select id="breakfast_choice">
    <option value="Dosa">Dosa</option>
    <option value="Dosa">Idli</option>
    <option value="Chutney">Chutney</option>
  </select>

</body>

</html>

 

The output of XHTML 1.0 Transitional, HTML Select Tag in Action.

In the above XHTML 1.0 Transitional code sample, we have used an HTML select tag that is used to create a list of dropdown values of breakfast recipes – Dosa, Idli, Chutney, Sandwich. These values will appear as a dropdown list in that selected form.

 

 

XHTML 1.0 Strict Document

If you created a new HTML webpage in XHTML 1.0 Strict, your HTML select tag might look like this, as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.home4cloud.com</title>
</head>

<body>
<div>
  <label for="breakfast_choice">Choose a Breakfast: </label>

 <select id="breakfast_choice">
    <option value="Dosa">Dosa</option>
    <option value="Dosa">Idli</option>
    <option value="Chutney">Chutney</option>
  </select>
</div>
</body>

</html>

 

The output of XHTML 1.0 Strict, HTML Select Tag in Action.

In the above XHTML 1.0 Strict code sample, we have used an HTML select tag that is used to create a list of dropdown values of breakfast recipes – Dosa, Idli, Chutney, Sandwich. These values will appear as a dropdown list in that selected form.

 

XHTML 1.1 Document

If you created a new HTML webpage in XHTML 1.1, your HTML select tag might look like this, as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.home4cloud.com</title>
</head>

<body>
<div>
  <label for="breakfast_choice">Choose a Breakfast: </label>

 <select id="breakfast_choice">
    <option value="Dosa">Dosa</option>
    <option value="Dosa">Idli</option>
    <option value="Chutney">Chutney</option>
  </select>
</div>
</body>

</html>

The output of XHTML 1.1, HTML Select Tag in Action.

 

In the above XHTML 1.1 code sample, we have used an HTML select tag that is used to create a list of dropdown values of breakfast recipes – Dosa, Idli, Chutney, Sandwich. These values will appear as a dropdown list in that selected form.