快速學會html表單提交（php）

天小編給大家帶來的是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>

</head>

<body>

</tr>

<tr>

<!-- <input type="text" name="tireqty" size //這里為type為提交類型

text為文本類型 name為名稱和class一樣 size為字體大小-->

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

以下是php中代碼

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<form>

<?php

$tireqty=$_POST['tireqty'];

$sj=$_POST['sj'];

$dz=$_POST['dz'];

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

謝謝觀看，喜歡的就收藏加關注吧！

.表單提交驗證的幾種方法

一、submit按鈕和onsubmit事件實現驗證

用戶名：<input type=“text”name=“username” />

</form>

二、button按鈕和onclick事件實現驗證

用戶名：<input type=“text”name=“username” />

注意：普通按鈕的onclick的返回值，不會阻止普通按鈕的默認動作

</form>

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事件實現驗證

用戶名：<input type=“text”name=“username” />

</form>

2.復選框對象checkbox

checkbox對象的屬性

name：復選框的名稱

value：復選框的值

type：復選框的類型

form：復選框所在的表單對象。如：this.form

checked：復選框是否選中

注意：在表單中，多個name的值一樣，將產生一個數組。

實例：全選和反選

//定義函數：當“全選”復選框被“選中”時，所有的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>

3.上傳文件域file

對于上傳的文件要做兩方面的判斷：文件的類型(擴展名)、文件的大小(PHP中再講)。

//定義：對上傳文件的擴展名進行判斷

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>

4.下拉菜單對象select和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>

第五種方式：

在線咨詢

上一篇：一次搞懂CSS 字體單位：px、em、rem 和 %
下一篇：HTML代碼中的空格和空行

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

快速學會html表單提交（php）

.表單提交驗證的幾種方法

2.復選框對象checkbox

3.上傳文件域file

4.下拉菜單對象select和option對象

您的項目需求