form表单提交三种方式，demo实例详解

2021-08-27 06:09:19

第一种：使用type=submit 可以直接提交

<html>
<head>
<title>submit直接提交</title>
</head>
<body>
<form method="get">
username: <input type="text" name="username"/>
<br/>
password: <input type="password" name="password"/>
<br/>
<input type="submit" value="提交"/>
</form>
</body>
<script type="text/javascript">
</script>
</html>

第二种：使用type=button提交需要得到表单的控件使用表单空间调用自己的submit（）方法

<pre name="code" class="html"><html>
<head>
<title>button提交</title>
</head>
<body>
<form id="form01" method="get">
username: <input type="text" name="username"/>
<br/>
password: <input type="password" name="password"/>
<br/>
<input type="button" value="提交" onclick="form01();"/>
</form>
</body>
<script type="text/javascript">
//使用button进行表单的提交
function form01() {
//得到form标签
var form01 = document.getElementById("form01");
//提交form表单
form01.submit();
}
</script>
</html>

第三种：直接使用get网址进行超链接提交

<pre name="code" class="html"><a href="html?username=ccc&password=123456">超链接提交数据</a>