HTML Select Tag

HTML <select> tag is used to create a drop-down list, allowing users to choose one or more options from a predefined set. It is commonly used in forms to let users select from a list of options.

HTML Select Tag Syntax

<select>
  <option value="Php">Php</option>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
</select>

HTML Select Tag Attributes

Name
Id
Multiple
Size

Example 1 HTML Select Tag with example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Drop-Down List</title>
</head>
<body>
  <form action="/submit">
    <label for="cars">Choose a color:</label>
    <select name="color" id="color">
      <option value="Red">Red</option>
      <option value="Blue">Blue</option>
      <option value="Green">Green</option>
      <option value="Pink">Pink</option>
    </select>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Example 2 : HTML Multiple Selections <Select> Tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple Selections with example</title>
</head>
<body>

  <form action="/submit">
    <label for="color">Choose your favorite color:</label>
    <select name="color" id="color" multiple size="4">
      <option value="Red">Red</option>
      <option value="Green">Green</option>
      <option value="Blue">Blue</option>
      <option value="Pink">Pink</option>
      <option value="Yellow">Yellow</option>
    </select>
    <input type="submit" value="Submit">
  </form>

</body>
</html>

Example 3: HTML Grouping Options <Select> Tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Option Groups</title>
</head>
<body>

  <form action="/submit">
    <label for="Language">Choose a Language:</label>
    <select name="Language" id="Language">
      <optgroup label="Select Language">
        <option value="Php">Php</option>
        <option value="Java">Java</option>
      </optgroup>
      <optgroup label="other Language">
        <option value="Css">Css</option>
        <option value="Python">Python</option>
      </optgroup>
    </select>
    <input type="submit" value="Submit">
  </form>

</body>
</html>

363