HTML 表单结构 ＜form＞

<!-- action 属性定义在提交表单时执行的动作 -->
    <!-- method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST） -->
   <form action="action_page.php" method="POST">
    <h1>Order your milktea</h1>

   <section>
     <!-- 实现点击 label 自动定位输入框 -->
     <label for="kouwei">你想要什么口味的奶茶？</label>
     <input type="text"  id="kouwei" minlength="2" maxlength="10" required>
     <!-- 最大字数 最小字数 必填字段 设置属性required -->
   </section>

   <section>
    <label for="number">你想要几杯？</label>
    <input type="number"  id="number" required value="2" min="1" max="4">
     <!-- 数量限制 必填字段 设置属性required  -->
   </section>

    <section>
     <label for="sugar">你需要的糖分量</label>
     <progress id="sugar" max="5" value="2"></progress>
     <!-- 进度条 -->
    </section>

   <section>
    <label >你想要什么顶料？</label>
    <input type="checkbox" name="ice">冰淇淋
    <input type="checkbox" name="naigai">奶盖
    <input type="checkbox" name="coco">可可粉
    <!-- 多选框 -->
   </section>


   <section>
    <label >你需要加冰吗？</label>
    <input type="radio" name="yes">Yes
    <input type="radio" name="yes">No
    <!-- 单选框 -->
   </section>

    <section>
     <label >你需要加什么料？</label>
     <select name="xiaoliao">
         <option value="zhenzhu">珍珠</option>
         <option value="boba">波霸</option>
         <option value="buding">布丁</option>
     </select>
     <!-- 下拉列表 -->
    </section>

    <section>
     <label for="">你要什么规格</label>
     <input list="guigelist">
      <datalist id="guigelist">
          <option value="small">小杯</option>
          <option value="middle">中杯</option>
          <option value="big">大杯</option>
      </datalist>
      <!-- 下拉列表 区别是显示不一样-->
    </section>

     <section>
      <label for="other">你还有什么别的要求吗？</label>
      <textarea  id="other" cols="30" rows="10"></textarea>
      <!-- 多行输入框 -->
     </section>

     <section>
        <label for="phone">你的联系方式</label>
        <input type="text" id="phone" pattern="[0-9]">
        <!--  pattern 属性 使value符合的模式条件 -->
     </section>

     <section>
        <input type="submit" value="submit">
        <!-- 提交按钮 -->
     </section>
   </form>

/* 校验失败样式 */
    input:invalid {
        border: 2px dashed red;
    }
    /* 校验通过样式 */
    input:valid {
        border: 2px solid black;
    }