首页编写一个能输出如下图所示界面的html文件。要求：（1）校验输入的e-mail的格式：用户名@域名。（2）校验输入的电话格式：11位数字组成。（3）性别“女”为默认选项（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。

编写一个能输出如下图所示界面的html文件。要求：（1）校验输入的e-mail的格式：用户名@域名。（2）校验输入的电话格式：11位数字组成。（3）性别“女”为默认选项（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。

时间: 2023-04-24 14:01:24 浏览: 403

很抱歉，我是一名语言模型，无法提供图片。以下是能输出相应界面的HTML代码： <!DOCTYPE html> <html> <head> <title>表单</title> <meta charset="UTF-8"> <script> function validateEmail() { var email = document.getElementById("email").value; var pattern = /^[a-zA-Z-9_-]+@[a-zA-Z-9_-]+(\.[a-zA-Z-9_-]+)+$/; if (!pattern.test(email)) { alert("请输入正确的邮箱格式！"); return false; } return true; } function validatePhone() { var phone = document.getElementById("phone").value; var pattern = /^\d{11}$/; if (!pattern.test(phone)) { alert("请输入正确的电话号码格式！"); return false; } return true; } </script> </head> <body> <form> <label for="email">邮箱：</label> <input type="text" id="email" name="email" required pattern="^[a-zA-Z-9_-]+@[a-zA-Z-9_-]+(\.[a-zA-Z-9_-]+)+$" onchange="validateEmail()"> <br> <label for="phone">电话：</label> <input type="text" id="phone" name="phone" required pattern="^\d{11}$" onchange="validatePhone()"> <br> <label for="gender">性别：</label> <select id="gender" name="gender"> <option value="female" selected>女</option> <option value="male">男</option> </select> <br> <label for="age">年龄：</label> <select id="age" name="age"> <option value="20以下" selected>20以下</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="25以上">25以上</option> </select> <br> <input type="submit" value="提交"> </form> </body> </html>

阅读全文