【web表单】Web程序设计基础R课程实验（二）

本文链接：https://blog.csdn.net/m0_74878305/article/details/135069515

一，实验要求

2．编写一个能输出如下图所示界面的HTML文件。要求：

（1）校验输入的E-mail的格式：用户名@域名。

（2）校验输入的电话格式：11位数字组成。

（3）性别“女”为默认选项

（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。

二，实验代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验二</title>
</head>
<body>
    <h1 align="center"><ins>请留下个人资料<ins></h1>
        <form>
        <p>姓名：<input type="text"></p>
        <p>E-mail：<input type="Email" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$)"></p>
        <p>电话：<input type="Tel" pattern="^([0-9]{11})$"></p>
        <p>性别：
        <input type="radio" name="sex"  value="woman">女
        <input type="radio" name="sex"  value="man">男
        </p>
        <p>年龄：<select name="age" size="7">
            <option value="" selected>20以下</option>
            <option value="">20</option>
            <option value="">21</option>
            <option value="">22</option>
            <option value="">23</option>
            <option value="">24</option>
            <option value="">25</option>
            <option value="">25以上</option>
        </select>
         <p>留言板：<textarea name="say" rows="10" cols="20"></textarea>
         </p>
         
         <p>你的爱好：<input type="checkbox" name="hobby"value="">运动
         <input type="checkbox" name="hobby"value="">阅读
         <input type="checkbox" name="hobby"value="">听音乐
         <input type="checkbox" name="hobby"value="">旅游
        </p>
        <input type="submit" value="提交">
        <input type="reset" value="全部重写">
        </form>
    </body>
</html>