<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>下拉列表示例</title>
</head>

<body>
  <form>
    <p>
      <label for="simple">简单下拉列表：</label>
      <select id="simple" name="simple">
      <option>香蕉</option>
      <option>樱桃</option>
      <option>柠檬</option>
      </select>
    </p>
    <p>
      <label for="groups">含分组的下拉列表：</label>
      <select id="groups" name="groups">
        <optgroup label="水果">
          <option>香蕉</option>
          <option selected>樱桃</option>
          <option>柠檬</option>
        </optgroup>
        <optgroup label="蔬菜">
          <option>胡萝卜</option>
          <option>茄子</option>
          <option>土豆</option>
        </optgroup>
      </select>
    </p>
    <p>
      <label for="multi">可复选的选择框：</label>
      <select multiple id="multi" name="multi">
        <option>香蕉</option>
        <option>樱桃</option>
        <option>柠檬</option>
      </select>
    </p>
    <p>
      <label for="myFruit">你最喜欢的水果？</label>
      <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
      <datalist id="mySuggestion">
        <option>苹果</option>
        <option>香蕉</option>
        <option>黑莓</option>
        <option>蓝莓</option>
        <option>柠檬</option>
        <option>荔枝</option>
        <option>桃子</option>
        <option>梨</option>
      </datalist>
    </p>
    <p>
      <label for="myFruitWithFallback">你最喜欢的水果？（兼容模式）</label>
      <input type="text" id="myFruitWithFallback" name="fruit" list="fruitList">
      <datalist id="fruitList">   <label for="suggestion">或选择一种水果</label>
        <select id="suggestion" name="altFruit">
          <option>苹果</option>
          <option>香蕉</option>
          <option>黑莓</option>
          <option>蓝莓</option>
          <option>柠檬</option>
          <option>荔枝</option>
          <option>桃子</option>
          <option>梨</option>
        </select>
      </datalist>
    </p>
    <p>
      <button type="submit">提交</button>
    </p>
  </form>
</body>

</html>
