button元素与input元素的区别

最新推荐文章于 2023-07-21 23:28:43 发布

原创最新推荐文章于 2023-07-21 23:28:43 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html input

html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML表单中的button和input元素的区别与用法，包括它们的type属性、提交值的行为差异以及如何在实际项目中合理选择使用。

一、button元素

1.type属性为button、reset、submit。

2.button元素在浏览器中的默认值不同，一定要明确指定button类型（IE中为button，其他浏览器为submit）

3. 表单中使用button元素时，不同的额浏览器提交的值不一样(IE提交的是button元素之间的值，其他浏览器提交的是 button元素的value属性）

4.在button元素内部，可以放置内容，比如文本或图像。

二、input元素

1.type类型为button、submit、reset时，表单中提交的值是input元素的value属性。

2.提交表单时，尽量使用input元素。

三、使用

当类型为submit时，此时将表单的数据提交到服务器，若在此时改变form中的数据，则数据不可变。

当类型为button时，此时，仅仅是一个按钮。

在编写表单时，对每一项先进行检验，再进行提交

实例：

<form>
	
    <button type="submit">click</button>

	<p>webti</p>
</form>
<script type="text/javascript">
		var btn=document.getElementsByTagName('button')[0];
		var p=document.getElementsByTagName('p')[0];
		// alert(btn.type);
		btn.onclick=function (event) {

			alert(event.type);
			p.innerHTML="CCC";
			
		};
</script>

结果：点击时，此时的p的内容改变，之后就又会恢复原来的值。

不是很明白这个？？