<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>leon</title> <style> * { margin: 0; padding: 0; } form { width: 500px; padding: 20px; border: 10px solid pink; border-radius: 15px; margin: 50px auto; display: flex; flex-direction: column; } form > label { height: 50px; position: relative; } form > label > span { position: absolute; left: 20px; bottom: 5px; color: red; display: none; } form > label > span.active { display: block; } </style> </head> <body> <form action=""> <label for=""> 用户名 : <input class="username" type="text"> <span>用户名必须字母开头6-12位, 请重新填写 ^_^</span> </label> <label for=""> 密 码 : <input class="password" type="text"> <span>密码必须6-12位, 请重新填写 ^_^</span> </label> <label for=""> 手机号 : <input class="phone" type="text"> <span>手机号不符合规则, 请重新填写 ^_^</span> </label> <label for=""> 昵 称 : <input class="nickname" type="text"> <span>昵称必须3~5位中文, 请重新填写 ^_^</span> </label> <button>提交</button> </form> </body> </html> <script src="./index.js" type="module"></script>
时间: 2024-04-03 16:31:36 浏览: 14
您的代码是一个包含表单验证的 HTML 文件,并且在最后引入了一个名为 index.js 的 JavaScript 文件。其中,表单包含用户名、密码、手机号和昵称四个输入框,每个输入框下面都有一个隐藏的提示信息。当用户在输入框中输入内容时,如果输入内容不符合要求,对应的提示信息会显示出来。当用户点击提交按钮时,表单会提交到指定的 URL。
相关问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> <h1>Not found</h1> </body> </html>是一个HTML页面模板,它是一个简单的404页面,用于显示“Not found”错误信息。在这个模板中,<!DOCTYPE html>定义了文档类型,<html>标签定义了HTML文档的根元素,<head>标签定义了文档的头部部分,<meta charset="UTF-8">指定了文档的字符编码为UTF-8,<title>标签定义了文档的标题,<body>标签定义了文档的主体部分,<h1>标签定义了一个一级标题。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> 绿叶学习网; </body> </html>哪里错了
根据你提供的代码,我发现以下几个问题:
1. 缺少`<!DOCTYPE html>`声明,这个声明告诉浏览器使用哪个HTML版本来解析页面。
2. 缺少`<title>`标签,这个标签用于定义网页的标题,显示在浏览器的标题栏或标签页上。
3. 缺少`<body>`标签内的内容,这个标签用于定义网页的主体内容,可以在其中添加文本、图片、链接等元素。
修正后的代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绿叶学习网</title>
</head>
<body>
绿叶学习网
</body>
</html>
```