Web开发-HTML button与submit

HTML原生态的button主要有两种，button和submit，主要的区别在于所能实现的功能，但是同时也有一些共同点。

type="button"和type="submit"的共同点：

1. 都支持onclick调用JS的函数，比如如下代码

<form>
    <label for="testName">Name:</label> <input id="testName" />
    <br/>
    <label for="testDescription">Description:</label>
    <input id="testDescription" />
    <br/>
    <button onclick="testAlert()">Button</button>
    <input type="submit" onclick="testAlert()" />
</form>

<script>
    function testAlert()
    {
        alert("hehe");
    }
</script>

最后都可以成功执行alert（）函数

 

 

 

*注意button和input的文本显示类型，不管是button方式还是submit方式，button控件的文本显示为button而input的文本，当type="button"时，文本设置与一样，当type="submit"时，文本显示默认为submit，可以通过value="custom title"来更换文本。

type="button"与是两个不同的概念，在表单中，类型选用前者时，就变成了一个,后者的默认类型就是type="button"，但是当type="submit"时，则与是一样的。只是因为在

中控件都为 格式比较规范

关于onsubmit，这个属性是用于提交表单的内容，所以只有能够提交表单的控件才能成功调用onsubmit，比如

就是包含有表单数值的控件，能够成功执行onsubmit调用的函数，但是  这种控件由于不包含有提交的内容所以并不能执行onsubmit调用的函数，正确的写法为

<form onsubmit="testAlert()">
    <label for="testName">Name:</label> <input id="testName" />
    <br/>
    <label for="testDescription">Description:</label>
    <input id="testDescription" />
    <br/>
    
    <input type="submit" onclick="testAlert()" />
</form>

 

2.都可以将表单提交给数据库，如下代码(服务器操作为PHP）

<form action="buttonTest.php" method="post">
    <label for="testName">Name:</label> <input id="testName" />
    <br/>
    <label for="testDescription">Description:</label>
    <input id="testDescription" />
    <br/>
    <button>Button</button>
    <input type="submit" />
</form>

<?php

$con = mysqli_connect("localhost","root","","Test","3306");

mysqli_query($con,"INSERT INTO Test.TestTable (testName,testDescription) VALUES ('TESTNAME','TESTDESCRIPTION')");

mysqli_close($con);
?>

 

*这里注意使用的是mysqli的方法，与mysql的方法小有不同，mysql的方法已经deprecated的了，意思是以后逐渐都要改成mysqli来操作mysql数据库，而在国内的文章很少有关于mysqli的使用，都是从stackoverflow上找的，之后我会再写一篇关于mysqli的使用 

type="button"和type="submit"的不同点：

当在控件下时，不管type是什么，只要作为表单元素之一 ，都可以成功提交表单内容，而在控件下，如果type="button" 则不能提交表单，必须当type="submit"时才能提交

欢迎错误指正 

欢迎访问我的个人主页www.jiachengzhi.com