Creating Lists of Options

Description

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

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><!--from w w  w .j a  v a 2s .c  om-->
    <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 ava2  s.  c om-->
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed