<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>最喜欢的水果：长度限制</title>
  <style>
    input:invalid {
      border: 2px dashed red;
    }

    input:valid {
      border: 2px solid black;
    }

    div {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <form>
    <div>
      <label for="choose">你喜欢香蕉还是樱桃？</label>
      <input id="choose" name="i_like" required minlength="6" maxlength="6">
    </div>
    <div>
      <label for="number">你要吃多少？</label>
      <input type="number" id="number" name="amount" value="1" min="1" max="10">
    </div>
    <div>
      <button>提交</button>
    </div>
  </form>
</body>

</html>
