天小編給大家帶來的是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小時內與您取得聯系。