HTML Tutorial - HTML Form Select

The select element creates lists of options for the user to select.

select has local attributes: name, disabled, form, size, multiple, autofocus, required. It can contents option and optgroup elements.

The form, autofocus and required attributes are new in HTML5

The name, disabled, form, autofocus, and required attributes work in the same way with the input elements.

The size attribute specifies how many choices you want to show to the user.

The multiple attribute allows the user to select more than one value.

You use the option element to define the choices that you want to present to the user.

Example 1

The following code shows how you use the select and option elements.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave"> Favorite Fruit: 
      <select id="fave"name="fave">
          <option value="A" selected label="Apples">Apples</option>
          <option value="B" label="Batch">Batch</option>
          <option value="C" label="C">C</option>
          <option value="S" label="SQL">SQL</option>
      </select>
      </label>
    </p><!--  w  w  w.j a v  a2  s. co m-->
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo

Example 2

You can use the size attribute on the select element to show more than one option to the user, and the multiple attribute to allow the user to select more than one option.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave" style="vertical-align: top"> Favorite
        Fruit: <select id="fave" name="fave" size="5" multiple>
          <option value="a" selected label="Apples">Apples</option>
          <option value="o" label="Oracle">Oracle</option>
          <option value="c" label="C">C</option>
          <option value="p" label="Pascal">Pascal</option>
      </select>
      </label>
    </p><!--from   w w w .j  av a2 s .  c o m-->
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo

select structure

You can add some structure to a select element by using the optgroup element.

It has local attributes:label, disabled and contains option elements.

You use the optgroup element to group option elements together.

The label attribute lets you create a title for the grouped options.

The disabled attribute makes the option elements not selectable.

The following code shows the optgroup element in use.

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="fave" style="vertical-align: top"> Favorite
        Fruit: <select id="fave" name="fave">
          <optgroup label="Top  Choices">
            <option value="apples" label="Apples">Apples</option>
            <option value="oranges" label="Oranges">Oranges</option>
          </optgroup>
          <optgroup label="Others">
            <option value="cherries" label="Cherries">Cherries</option>
            <option value="pears" label="Pears">Pears</option>
          </optgroup>
      </select>
      </label>
    </p><!-- w  w w.  ja v  a 2s .  com-->
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo

The optgroup labels are purely for structure; the user cannot select these as values.

Example 3

The following code shows how to creating groups of options with a disabled option.

<html>
<body>
  <form action="" method="get" name="frmInfo">
    Please select the product you are interested in:<br /> <select
      name="selInformation">
      <option disabled="disabled" value="">-- Hardware --</option>
      <option value="Desktop">Desktop computers</option>
      <option value="Laptop">Laptop computers</option>
      <option disabled="disabled" value="">-- Software --</option>
      <option value="OfficeSoftware">Office software</option>
      <option value="Games">Games</option>
      <option disabled="disabled" value="">-- Peripherals --</option>
      <option value="Monitors">Monitors</option>
      <option value="InputDevices">Input Devices</option>
      <option value="Storage">Storage</option>
    </select> <br />
    <br />
    <input type="submit" value="Submit" />
  </form><!--  w w  w.  ja  v a  2s. c o m-->
</body>
</html>

Click to view the demo