HTML标签易混易错小总结

最新推荐文章于 2024-07-23 11:47:42 发布

neuandroid

最新推荐文章于 2024-07-23 11:47:42 发布

阅读量485

点赞数

分类专栏： php 文章标签： php web服务器

本文链接：https://blog.csdn.net/neuandroid/article/details/47112091

版权

php 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

纠结了一天，终于把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 个字符。

注： type=button：就单纯是按钮功能；type=submit：是发送表单。

HTML <button> 标签的 type 属性

值	描述
submit	该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button	该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset	该按钮是重置按钮（清除表单数据）。

未完待续……

neuandroid

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML标签易混易错小总结

纠结了一天，终于把HTML标签的正确使用，各自的适用性清楚地了解了一下，这里简单总结一下以免再犯类似的错误。一切都是由于这样的一个问题用户名：密码：登录 window.x=document.getElementById("username"); window.onload=function() { document.g
复制链接

扫一扫