天小編給大家帶來的是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 = “大專”
edu.options[0].text = “大專”;
selectedIndex:默認選中的option對象的索引號(下標)
length:指一共有多少個option對象
name:select對象的名稱
option對象的屬性
value:指option對象的值
text:指<option></option>之間的文本內容
以上就是我今天學到的表單提交的幾種方法。跟大家一起交流。寫的不好,望大神多多指教。
一種方式:表單提交,在form標簽中增加onsubmit事件來判斷表單提交是否成功
<html>
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表單?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="" onsubmit="return validate(document.getElementById('myText'));"> <!—參數的這種寫法注意下-->
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
第二種方式:通過button按鈕來觸發表單提交事件onclick="submitForm();", 會忽略掉其他標簽中的屬性, 比如form標簽中的onsubmit屬性就失效了。
這時為了進行表單驗證, 可以將驗證代碼放在submitForm();方法中進行驗證。
<html>
<script type="text/javascript">
function validate() {
if (confirm("提交表單?")) {
return true;
} else {
return false;
}
}
function submitForm() {
if (validate()) {
document.getElementById("myForm").submit();
}
}
</script>
<body>
<form action="" id="myForm">
<input type="text"/>
<input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementById("該按鈕的id").click();來執行onclick事件-->
</form>
</body>
</html>
第三種方式:將onsubmit事件放在submit標簽中, 而不是form標簽中, 此時表單驗證失效, 點擊提交按鈕表單直接提交
<html>
<script type="text/javascript">
function validate() {
if (confirm("提交表單?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>
</html>
第四種方式:為submit按鈕添加上onclick事件, 其中該事件用于表單提交的驗證, 功能類似于在form標簽中增加了onsubmit事件一樣
<html>
<script type="text/javascript">
function validate() {
if (confirm("提交表單?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="">
<input type="text"/>
<input type="submit" value="submit" onclick="return validate()"/>
</form>
</body>
</html>
第五種方式:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。