button 和input 的区别及在表单form中的用法

先说一下button 和input的定义:

1、在 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

标签规定了用户可以在其中输入数据的输入字段

元素在

元素中使用,用来声明允许用户输入数据的 input 控件;input具体类型取决于type属性

接下来具体说明 四种按钮: 、、

一、:当用户单击此按钮时,表单会按

标记的action属性设置的方式来发送表单内容。点击时,页面会刷新


    

要想在提交数据之前,先对表单数据进行检验:

用户名:
密码:
function check(){ console.log("提交前先验证"); var checkElement=document.getElementsByTagName("input"); if(checkElement[0].value==="" || checkElement[1].value==="") { return false;//当用户名或者密码为空时,返回false,此时表单不会提交 } }

当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 check(){ console.log("提交前先验证"); var checkElement=document.getElementsByTagName("input"); if(checkElement[0].value==="" || checkElement[1].value==="") { return false;//当用户名或者密码为空时返回false,此时表单不会提交 } } function remind(){ alert("这是一个简单按钮,默认不会提交表单数据,不会刷新页面"); }

注意一点:

而当

因此,建议时刻为button设置type值。

总结一下:

  • 和 用法相同,用作表单数据提交按钮,默认即会刷新页面;

  • 和的用法是一样的,均为普通按钮,默认情况不会刷新页面。

博客园精华区责编内容来自:博客园精华区 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » button 和input 的区别及在表单form中的用法

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录