<html> <head> <title> New Document </title> </head> <body> <form method="POST" action="../0001/success.asp" name=form > <textarea cols="45" name="memo" rows="8" wrap="on" class="editbox2" onKeyDown="textCounter(this.form.memo,this.form.remLen,160);" onKeyUp="textCounter(this.form.memo,this.form.remLen,160);"></textarea> <br> 共可输入160字,还剩 <input readonly type=text name=remLen size=3 maxlength=3 value="160" class=editbox1> 字。 <br> </form> </body> </html> <script language="JavaScript"> function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit) field.value = field.value.substring(0,maxlimit); else countfield.value = maxlimit - field.value.length; } </script>解析思路
时间: 2023-07-14 17:13:06 浏览: 60
这是一个基本的 HTML 页面,里面包含一个表单(form)元素和一个文本框(textarea)元素。当用户在文本框中输入文字时,通过 JavaScript 脚本实现了一个字数限制功能,文本框旁边会显示还可以输入多少个字。当用户输入的文字超过了限制时,脚本会自动截取多余的部分。当用户提交表单时,数据将被发送到 "../0001/success.asp" 页面进行处理。
相关问题
<!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>帮我优化一下代码
好的,以下是我对这段代码的优化建议:
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>
CSS样式添加到你的HTML文件的<head>标签
可以直接在<head>标签内添加<style>标签,并将CSS样式写在其中,如下所示:
```html
<!DOCTYPE html>
<html xmlns="">
<head>
<meta charset="UTF-8">
<title>Webmail客户端</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body background="R-C.jpg">
<h1>Email Sender</h1>
<form action="deal_email.php" method="POST">
<label for="from_email">Sender's Email:</label>
<input type="email" id="from_email" name="from_email" required><br><br>
<label for="passward">Password:</label>
<input type="password",id = "password" name="password"><br><br>
<label for="to_email">Receiver's Email:</label>
<input type="email" id="to_email" name="to_email[]" required>
<button type="button" id="add_email">Add</button><br><br>
<label for="title">Title</label><br>
<input type="text" id="title" name="title" required><br>
<label for="email_content">Message:</label><br>
<textarea id="email_content" name="email_content" rows="10" cols="50" required></textarea><br><br>
<button type="submit">Send Email</button>
</form>
<script>
var addEmailButton = document.getElementById("add_email");
addEmailButton.addEventListener("click", function() {
var emailList = document.createElement("input");
emailList.setAttribute("type", "email");
emailList.setAttribute("name", "to_email[]");
emailList.setAttribute("required", "");
document.getElementById("to_email").insertAdjacentElement("afterend", emailList);
});
</script>
</body>
</html>
```
这样整个页面就会居中显示了。