快速学会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对象

您的项目需求