纠结了一天,终于把HTML标签的正确使用,各自的适用性清楚地了解了一下,这里简单总结一下以免再犯类似的错误。
一切都是由于这样的一个问题
<html>
<head>
</head>
<body>
<form id="form1" method="get" >
用户名:<input type="text" id="name" name="name" />
<p id="username"></p>
<br />
密码:<input type="password" id="password" name="password" />
<button type="submit" οnclick="mUp()">登录</button>
</form>
<script>
window.x=document.getElementById("username");
window.οnlοad=function()
{
document.getElementById('name').focus();
}
//
function mUp()
{
if(document.getElementById('name').value=="")
{
x.innerHTML = "用户名不能为空";
//alert("不能为空");
}
else
document.getElementById('form1').action="/login";
}
</script>
</body>
</html>
将以上代码运行,当什么也不输入时电击“登录”按钮,会提示“用户名不能为空”,但是仅出现一下就会闪退。是什么原因呢?
关键是这里
<button type="submit" οnclick="mUp()">登录</button>
此时会有两个事件触发,首先调用onclick对应的函数,然后再进行自动submit(因为此时type的类型为submit),自然会将提示覆盖掉。所以将type设置成button即可解决。
下面简单总结一下,
HTML <input> 标签的 type 属性
值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
HTML <button> 标签的 type 属性
值 | 描述 |
---|---|
submit | 该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。 |
button | 该按钮是可点击的按钮(Internet Explorer 的默认值)。 |
reset | 该按钮是重置按钮(清除表单数据)。 |