一、结果
二、注意事项
表单页面与提交页面分别使用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>