这次给大家带来在表单中button与input的区别,在表单中使用button与input的注意事项有哪些,下面就是实战案例,一起来看一下。 先说一下button 和input的定义: 标签定义的是一个按钮 1、在 元素内部,您可以放置任何内容,比如文本或图像。这是该元素与使用 元素创建的按钮之间的不同之处; 2、 控件提供了更为强大的功能和更丰富的内容; 3、 与 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。 标签规定了用户可以在其中输入数据的输入字段 元素在 元素中使用,用来声明允许用户输入数据的 input 控件;input具体类型取决于type属性 接下来具体说明 四种按钮: 、、、 一、:当用户单击此按钮时,表单会按标记的action属性设置的方式来发送表单内容。点击时,页面会刷新 登录后复制 要想在提交数据之前,先对表单数据进行检验: 当check函数里返回false会阻止submit的默认行为,即阻止表单数据提交(阻止页面刷新) 注意:onsubmit="return check()" 中的 return 不能省略 二、普通按钮,必须搭配JS才有用,如onclick事件等 用户名: 密码: function check(){ console.log("提交前先验证"); var checkElement=document.getElementsByTagName("input"); if(checkElement[0].value==="" || checkElement[1].value==="") { return false;//当用户名或者密码为空时返回false,此时表单不会提交 } }function remind(){ alert("这是一个简单按钮,默认不会提交表单数据,不会刷新页面"); }登录后复制 三、 表单数据提交按钮,与 用法相同登录后复制 四、普通按钮,与的用法是一样的 用户名: 密码: 登录 提醒function check(){ console.log("提交前先验证"); var checkElement=document.getElementsByTagName("input"); if(checkElement[0].value==="" || checkElement[1].value==="") { return false;//当用户名或者密码为空时返回false,此时表单不会提交 } }function remind(){ alert("这是一个简单按钮,默认不会提交表单数据,不会刷新页面"); }登录后复制 注意一点: 当未处于表单中时,其浏览器默认的type就是button; 而当处于表单中时,不同的浏览器对 元素的 type 属性使用不同的默认值; 因此,建议时刻为button设置type值。 总结一下: 和 用法相同,用作表单数据提交按钮,默认即会刷新页面; 和 的用法是一样的,均为普通按钮,默认情况不会刷新页面。 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读: jest测试react native组件的步奏是什么 javascript的隐式调用详解 JS添加元素新节点