整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天小編給大家帶來的是html表單提交教程，非常簡單！
話不多說直接進入教程
首先要注意的事項：
第一：因為這節課涉及到了php所以本地要安裝php
在這里小編用的是phpStudyphpStudy（特點簡單很適合本地開發測試）
phpStudy界面
第二：在php編碼里一定要注意不要編寫錯誤
<?php //為開頭 //為結尾？>
<?php 這里寫php代碼 ?>
要切記php代碼要以分號未結束 “；”
首頁我們到我們剛剛安裝的軟件根目錄下，找到www這個文件夾
雙擊打開建立一個新文件夾（在這我命名為了表單的拼音你們可以自己命名為你們想命名的名字，切記不能用中文）
在打開剛剛建立好的文件夾創建兩個文件分別命名為orderform.html和processorder.php（當然你也可以自己取名）
我們用編程軟件打開這兩個新建文件（這里我用的是Sublime Text 3）
我們首先給orderform.html寫下如下代碼
然后我們開始寫建立表單
我們訪問本地連接看一下效果
我們在給php寫入代碼
以下為注意事項
<!--<?php //為php代碼 eoch為輸出代碼 $_POST為接收html提交過來的數據 $tireqty=$_POST['tireqty']
//$sj=$_POST['sj']
//$dz=$_POST['dz'] 為給建立的變量賦值? echo "$tireqty";為輸出這個變量-->
首先我們寫入和html一下的html代碼
在寫入php接收函數
完成效果
以下是html里的代碼
<!DOCTYPE html>
<html>
<head>
<!--這里編碼為utf-8國際編碼-->
<meta charset="utf-8">
<!--這里為網站標題-->
<title>表單</title>
</head>
<body>
<!--action為提交的頁面 method為提交類型 分為兩種一種為post還一種為get -->
<form action="processorder.php" method="post">
<!--border="0"為邊框粗細-->
<table border="0">
<!-- bgcolor="#cccccc"為表格背景顏色這里為灰色 -->
<tr bgcolor="#cccccc">
<td>參數</td>
<!-- aligan="center"為表格居中 -->
<td align="center">數據</td>
</tr>
<tr>
<td>姓名</td>
<!-- <input type="text" name="tireqty" size //這里為type為提交類型
text為文本類型 name為名稱和class一樣 size為字體大小-->
<td align="center"><input type="text" name="tireqty" size="3"/></td>
</tr>
<tr>
<td>手機</td>
<td align="center"><input type="text" name="sj" size="3"/></td>
</tr>
<tr>
<td>地址</td>
<td align="center"><input type="text" name="dz" size="3"/></td>
</tr>
<tr>
<!-- <input type="text" value="提交" value為input 元素的值 colspan為合并-->
<td colspan="0" align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>
以下是php中代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>接收</title>
</head>
<body>
<form>
<?php
$tireqty=$_POST['tireqty'];
$sj=$_POST['sj'];
$dz=$_POST['dz'];
?>
<table border="0">
<tr>
<td>參數</td>
<td align="center">數據</td>
</tr>
<tr>
<td>姓名</td>
<td align="center"><?php echo "$tireqty"; ?></td>
</tr>
<tr>
<td>手機</td>
<td align="center"><?php echo "$sj"; ?></td>
</tr>
<tr>
<td>地址</td>
<td align="center"><?php echo "$dz"; ?></td>
</tr>
</table>
</form>
</body>
</html>
謝謝觀看，喜歡的就收藏加關注吧！
一、submit按鈕和onsubmit事件實現驗證
<form name=“form1”onsubmit=“return checkForm()”>
用戶名：<input type=“text”name=“username” />
<input type=“submit” value=“提交表單” />
</form>
二、button按鈕和onclick事件實現驗證
<form name=“form1” >
用戶名：<input type=“text”name=“username” />
<input type=“button” value=“提交表單”onClick=“checkForm()” />
注意：普通按鈕的onclick的返回值，不會阻止普通按鈕的默認動作
</form>
<script>
function checkForm()
{
var flag; //局部變量
//先做表單驗證
If(document.form1.username.value==””)
{
flag = false;
}else
{
flag = true;
}
//判斷flag的值，如果為true，則提交表單
if(flag==true)
{
//如果為true，則提交表單，使用form對象的提交方法submit()
Window.alert(“表單驗證通過”);
document.form1.submit();
}else
{
//如果為false，則彈出一個提示信息
Window.alert(“表單驗證失敗”);
}
}
</script>
三、submit按鈕和onclick事件實現驗證
<form name=“form1” >
用戶名：<input type=“text”name=“username” />
<input type=“submit” value=“提交表單”onClick=“return checkForm()” />
</form>
checkbox對象的屬性
name：復選框的名稱
value：復選框的值
type：復選框的類型
form：復選框所在的表單對象。如：this.form
checked：復選框是否選中
注意：在表單中，多個name的值一樣，將產生一個數組。
實例：全選和反選
<script>
//定義函數：當“全選”復選框被“選中”時，所有的name=hobby都勾選
//如果“全選”復選框取消“選中”時，所有的name=hobby都取消勾選
function select_all(obj)
{
//取到name=hobby的對象，構成的一個數組
var arr = document.form1.hobby;
//判斷“全選”的狀態
if(obj.checked)
{
//遍歷所有name=hobby對象的checked的值，并將其值設為true
for(var i=0;i<arr.length;i++)
{
arr[i].checked = true;
}
}else
{
//遍歷所有name=hobby對象的checked的值，并將其值設為false
for(var i=0;i<arr.length;i++)
{
arr[i].checked = false;
}
}
}
//定義函數：選中的項，變成取消；沒有選中的項，被選中
function select_no_all()
{
//先獲得name=hobby的所有對象
var arr = document.form1.hobby; //checked
//遍歷所有的hobby對象
for(var i=0;i<arr.length;i++)
{
if(arr[i].checked)
{
arr[i].checked = false;
}else
{
arr[i].checked = true;
}
}
}
</script>
對于上傳的文件要做兩方面的判斷：文件的類型(擴展名)、文件的大小(PHP中再講)。
<script>
//定義：對上傳文件的擴展名進行判斷
function check_file_type(fileName)
{
//定義狀態變量
var flag = false;
//定義一個圖片擴展名的數組
var arr = ["jpg","jpeg","png","gif"]; //dedeCMS
//重蔚自留地的.xls
//先找到最后一個小點的位置
//提取子字符串substr(startIndex)、substring(startIndex)
//取出上傳文件的擴展名
var ext = fileName.substr(fileName.lastIndexOf(".")+1).toLowerCase();
//遍歷圖片數組，與取到的擴展名，進行比對，如果找到，則返回true
for(var i=0;i<arr.length;i++)
{
if(arr[i]==ext)
{
flag = true;
break;
}
}
//根據flag的值，彈出相應的提示信息
if(flag)
{
alert("文件可以上傳");
}else
{
alert("文件類型不允許上傳");
}
}
</script>
<select name=“edu”>
<option value=“大專”>大專</option>
<option value=“大本”>大本</option>
<option value=“研究生”>研究生</option>
</select>
select對象的屬性
options[]：所有的option構成的一個數組。
如：edu.options[0].value = “大?！?/p>
edu.options[0].text = “大?！?
selectedIndex：默認選中的option對象的索引號(下標)
length：指一共有多少個option對象
name：select對象的名稱
option對象的屬性
value：指option對象的值
text：指<option></option>之間的文本內容
以上就是我今天學到的表單提交的幾種方法。跟大家一起交流。寫的不好，望大神多多指教。
、使用場景：
安全性都一樣，都是發送的http協議。安全性與提交文件的業務處理（格式檢測，防注入）有關，與提交方式無關。
一般登錄用表單提交，點擊提交觸發submit事件，一般會 使頁面發生跳轉，頁面的跳轉等行為的控制往往在后端，后端控制頁面的跳轉及數據的傳遞；但是某些時候不希望頁面跳轉，或者說想要將控制權放在前端，通過js來操作頁面的跳轉或數據變化，一般這種異步操作，都會使用ajax。
但是Ajax會有個隱藏的問題，即瀏覽器不保存密碼，不符合用戶習慣。理想的方式：建立隱藏的iframe，把form標簽的target指向iframe，然后檢測iframe的狀態。
2、比較：
（1）ajax在提交、請求、接收時，都是異步進行，網頁不需要刷新，只刷新頁面局部，不關心也不影響頁面其他部分的內容。
Form提交則是新建一個頁面，哪怕是提交給自己本身的頁面，也需要刷新，為了維持頁面用戶對表單的狀態改變，要在控制器和模板之間傳遞更多參數以保持頁面狀態。
（2）ajax提交時，是在后臺新建一個請求。
Form卻是放棄本頁面，然后再請求。
（3）ajax必須要用js來實現，存在調試麻煩、瀏覽器兼容問題，而且不啟用js的瀏覽器，無法完成操作。
Form表單是瀏覽器自帶的，無論是否開啟js，都可以提交表單。
（4）ajax在提交、請求、接收時，整個過程都需要使用程序來對其進行數據處理。
Form表單提交，是根據表單結構自動完成，不需要代碼干預。用submit提交。
3、其他方面：
關于輸入內容的校驗，ajax可以在獲取到元素內容用程序判斷；form表單的屬性中有校驗的字段，easyui，jeecg等中都封裝，用戶只需添加正則表達式的校驗規則。
4、例：
（1）使用form提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="form-div">
<form id="form1" action="/users/login" method="post">
<p>用戶名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>
<p>密 碼：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>
<p><input type="submit" value="登錄"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
