Task03 制作一个奶茶点餐页面

最新推荐文章于 2022-09-28 11:45:00 发布

Haiji_

最新推荐文章于 2022-09-28 11:45:00 发布

阅读量1k

点赞数

文章标签： javascript html 正则表达式

本文链接：https://blog.csdn.net/weixin_43086941/article/details/121015585

版权

Task03 制作一个奶茶点餐页面

一、结果
二、注意事项
三、直接上码

一、结果

奶茶点餐页面

二、注意事项

表单页面与提交页面分别使用section标签包装。
form标签包装整个表单，其中action属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。.method定义发送数据的HTTP方法，POST or GET，二者没有本质上的区别。
使用label 的 for 属性与表单元素的 id 属性相对应，可以通过label定位表单元素。
使用内置属性及正则表达式进行验证。

三、直接上码

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <title>Forms Review</title>
</head>
<body>
  <section id="overlay">

    <p id="logo">Order your milktea!</p>
    <hr>
    <!--在这里进行您的代码编写-->
    <form action="submission.html" method="post">
      <p>
        <label for="favor">你想要什么口味的奶茶？</label>
        <input type="text" id="favor" required minlength="2" maxlength="10">
      </p>
      <hr>
      <p>
        <label for="num">你想要几杯？</label>
        <input type="number" id="num" required min="1" max="4">
      </p>
      <hr>
      <p>
        <label for="sugar">你想要的糖分量</label>
        <span>无糖</span><input type="range" id="sugar"  htmlattrdefmin="1" htmlattrdefmax="5"><span>全糖</span>
      </p>
      <hr>
      <p>
        <label>你想要什么顶料？</label><br>
        <label for="iceTop">
          <input type="checkbox" id="iceTop">冰淇淋
        </label>
        <label for="milkTop">
          <input type="checkbox" id="milkTop">奶盖
        </label>
        <label for="Coco">
          <input type="checkbox" id="Coco">可可粉
        </label>
      </p>
      <hr>
      <p>
        <label>你需要加冰吗？</label><br>
        <label for="yes">
          <input type="radio" id="yes" name="isIce">是
        </label>
        <label for="no">
          <input type="radio" id="no" name="isIce">否
        </label>
      </p>
      <hr>
      <p>
        <label for="add">你需要加什么料？</label>
        <select name="addItem" id="add">
          <option value="">珍珠</option>
          <option value="">波霸</option>
          <option value="">布丁</option>
        </select>
      </p>
      <hr>
      <p>
        <label for="size">你要什么规格</label>
        <input list="size" name="mySize">
        <datalist name="size" id="size">
          <option value="小杯"></option>
          <option value="中杯"></option>
          <option value="大杯"></option>
        </datalist>
      </p>
      <hr>
      <p>
        <label for="others">您还有别的什么要求吗</label><br>
        <textarea name="others" id="others" cols="50" rows="3"></textarea>
      </p>
      <hr>
      <p>
        <label for="tel">您的联系方式</label>
        <input type="tel" id="tel" required pattern="^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$">
      </p>
      <hr>
      <input type="submit">
    </form>
  </section>
</body>
</html>

Haiji_

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
Task03 制作一个奶茶点餐页面

Task03 制作一个奶茶点餐页面一、结果二、注意事项三、直接上码一、结果二、注意事项表单页面与提交页面分别使用section标签包装。form标签包装整个表单，其中action属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。.method定义发送数据的HTTP方法，POST or GET，二者没有本质上的区别。使用label 的 for 属性与表单元素的 id 属性相对应，可以通过label定位表单元素。使用内置属性及正则表达式进行验证。三、直接上码&
复制链接

扫一扫