<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>创建菜单</title> </head> <body> <form action="www.4399.com/" method="post"> 账号 <input type="text" name="yikaishishabi" /> <br /> <br /> 密码 <input type="password" name="123456" /> <br /> <br /> <input type="submit" value="登录" /> <input type="reset" /> </form> </body> </html>帮我优化一下代码
时间: 2023-10-21 19:03:52 浏览: 43
好的,以下是我对这段代码的优化建议:
1. 在表单中添加一个 id 属性,以便在 JavaScript 中更方便地访问它。
2. 在文本框和密码框的前面添加标签,以提高表单的可读性。
3. 在提交按钮和重置按钮之间添加一个空格,以提高按钮的可读性。
4. 将表单的 method 属性设置为 POST,并使用相对路径或绝对路径作为 action 属性的值(不要忘记添加协议部分)。
5. 在表单的结束标签之前添加一个 JavaScript 脚本块,以便在表单提交之前验证用户输入。例如,可以检查用户名和密码是否为空,或者是否符合某些规则。
6. 在表单提交之前,禁用提交按钮,以避免多次提交表单。
综上所述,下面是优化后的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建菜单</title>
</head>
<body>
<form id="login-form" action="http://www.4399.com/" method="post">
<label for="username">账号:</label>
<input type="text" id="username" name="username" />
<br />
<br />
<label for="password">密码:</label>
<input type="password" id="password" name="password" />
<br />
<br />
<input type="submit" value="登录" id="submit-btn" />
<input type="reset" />
</form>
<script>
var form = document.getElementById('login-form');
var usernameInput = document.getElementById('username');
var passwordInput = document.getElementById('password');
var submitBtn = document.getElementById('submit-btn');
form.addEventListener('submit', function(event) {
// 禁用提交按钮
submitBtn.disabled = true;
// 检查用户名和密码是否为空
if (usernameInput.value.trim() === '' || passwordInput.value === '') {
alert('用户名和密码不能为空!');
event.preventDefault();
submitBtn.disabled = false;
}
});
</script>
</body>
</html>