整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天小编给大家带来的是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>之间的文本内容
以上就是我今天学到的表单提交的几种方法。跟大家一起交流。写的不好，望大神多多指教。
、使用场景：
安全性都一样，都是发送的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小时内与您取得联系。
