Creating Lists of Options

The <select> element creates lists of options. This is a compact alternative to the radiobutton type of the input element and is suited for larger sets of options.

The name, disabled, form, autofocus, and required attributes work the same way as the input elements. The size attribute specifies how many choices to show. When the multiple attribute is applied, the user is able to select more than one value.

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

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <input type="hidden" name="recordID" value="1234" />
            <p>
                  <label for="name"> Name: <input value="Adam" id="name"
                        name="name" />
                  </label>
            </p>
            <p>
                  <label for="password"> Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password" />
                  </label>
            </p>
            <p>
                  <label for="fave"> Favorite: <select id="fave"
                        name="fave">
                              <option value="apples" selected label="Apples">Apples</option>
                              <option value="oranges" label="Oranges">Oranges</option>
                              <option value="cherries" label="Cherries">Cherries</option>
                              <option value="pears" label="Pears">Pears</option>
                  </select>
                  </label>
            </p>
            <input type="submit" value="Submit" />
      </form>
</body>
</html>
  
Click to view this demo.
Home 
  HTML CSS Book 
    HTML  

select:
  1. Creating Lists of Options
  2. Using the size and multiple Attributes on the select element
  3. Adding Structure to a select Element
Related: