在表单中button与input的区别-js教程-PHP中文网

在表单中button与input的区别

php中世界最好的语言

发布： 2018-03-19 09:23:37

原创

2373人浏览过

这次给大家带来在表单中button与input的区别，在表单中使用button与input的注意事项有哪些，下面就是实战案例，一起来看一下。

先说一下button 和input的定义：

1、在

2、

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

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

元素在

<form action="#">
    <input type="text" name="username"/><br/>
    <input type="password" name="password"/><br/>
    <input type="submit" value="登录"/></form>

登录后复制

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

当check函数里返回false会阻止submit的默认行为，即阻止表单数据提交（阻止页面刷新）

注意：onsubmit="return check()" 中的 return 不能省略

二、普通按钮，必须搭配JS才有用，如onclick事件等

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <input type="submit" value="登录"/>
    <input type="button" value="提醒" onclick="remind()"/></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

登录后复制

三、

<button type="submit"></button>表单数据提交按钮，与<input type="submit"/> 用法相同

登录后复制

四、普通按钮，与的用法是一样的

<form action="#" onsubmit="return check()">
    用户名：<input type="text" name="username"/><br/>
    密码：<input type="password" name="password"/><br/>
    <button type="submit">登录</button>
    <button type="button"onclick="remind()">提醒</button></form><script  LANGUAGE="JavaScript">function check(){
    console.log("提交前先验证");    var checkElement=document.getElementsByTagName("input");     if(checkElement[0].value==="" || checkElement[1].value==="") {         return false;//当用户名或者密码为空时返回false，此时表单不会提交     }
}function remind(){
    alert("这是一个简单按钮，默认不会提交表单数据,不会刷新页面");
}</script>

登录后复制

注意一点：

当

而当

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

总结一下：