首页 > web前端 > js教程 > 正文

在表单中button与input的区别

php中世界最好的语言
发布: 2018-03-19 09:23:37
原创
2127 人浏览过

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

先说一下button 和input的定义:

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

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

   元素在

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

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

一、:当用户单击此按钮时,表单会按标记的action属性设置的方式来发送表单内容。点击时,页面会刷新

<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>
登录后复制

注意一点:

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

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

  • 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    jest测试react native组件的步奏是什么

    javascript的隐式调用详解

    JS添加元素新节点

    以上是在表单中button与input的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

    相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板