整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML提交按钮是一种HTML表单元素，允许用户将表单数据提交到服务器。提交按钮通常与表单元素（如文本框和下拉列表）一起使用，以便用户可以输入并提交信息。在HTML中，提交按钮通常使用标签来定义。
如何编写HTML提交按钮代码？
要创建HTML提交按钮，您需要使用标签，并将type属性设置为“submit”。例如，以下代码会创建一个名为“submit”的提交按钮：
```
```
在这个例子中，“action”属性指定了表单数据提交到的URL，“method”属性指定了提交表单的HTTP方法（通常是POST或GET）。按钮的“value”属性指定了按钮上显示的文本。
如何自定义HTML提交按钮样式？
默认情况下，HTML提交按钮的样式取决于用户的操作系统和浏览器。但是，您可以使用CSS样式表来自定义按钮的外观。例如，以下代码将创建一个红色的提交按钮：
```
```
在这个例子中，我们使用了style属性来设置按钮的背景颜色和文本颜色。您还可以使用其他CSS属性来自定义按钮的大小、边框等。
如何使用JavaScript处理HTML提交按钮？
您可以使用JavaScript来添加交互性和验证表单数据。例如，以下代码将在用户单击提交按钮时弹出一个提示框：
```
```
在这个例子中，我们使用了onsubmit属性来指定当表单提交时要运行的JavaScript函数。此函数返回true或false，如果返回false，则表单将不会提交。在这个例子中，我们使用confirm()函数显示一个提示框，并在用户单击“确定”时返回true。
总结
HTML提交按钮是Web表单中的重要元素，允许用户将表单数据提交到服务器。您可以使用标签来创建提交按钮，并使用CSS样式表自定义外观。您还可以使用JavaScript添加交互性和验证表单数据。通过掌握HTML提交按钮的知识，您可以创建复杂的Web表单，并收集和处理用户数据。
一篇文章我们说了单选框、多选框以及下拉框的使用，今天呢我们继续看一下表单剩下的常用控件：提交按钮以及重置按钮。
提交按钮，顾名思义就是当我们填好了表单中的数据之后，我们需要通过提交按钮来将数据传递到后台的服务器中，供后台程序使用。
使用语法：<input type="submit" value="提交数据">
详细讲解：
1、type：只有当type值设置为submit时，按钮才有提交作用，才能正常的进行表单的提交。（或者使用JavaScript代码来触发提交事件，这个到后期我们讲解js的时候我进行介绍）
2、value：按钮上显示的文字，显示按钮的名称。
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
使用语法：<input type="reset" value="重置数据">
详细讲解：
1、type：只有当type值设置为reset时，按钮才有重置作用，点击按钮会将form表单内的所有信息还原到初始未输入的状态。
2、value：按钮上显示的文字，显示重置按钮的名称
使用练习：
我们创建一个表单，数据我们以post的形式提交到百度首页，表单里边有姓名和年龄的输入框，并且添加提交数据按钮以及重置数据按钮。具体代码如下图所示：
在网页中的显示效果就如下图所示：
我们在姓名和年龄输入框中输入内容，点击重置数据既可以清空里边的内容，还原到初始状态，点击提交数据按钮，那么数据将会提交到我们的指定链接处。
以上呢就是表单最常用的一些控件了，接下来我们对学到的表单知识进行一次综合的测试，我们来写一个完整的表单包含我们学到的所有知识。
我们在这里就写一个网站制作常用的留言表，表格名称就叫留言表，然后表中包含有姓名输入框、性别单选框（默认选中男）、爱好多选框（默认选中第一个）、所在地区下拉框、留言内容多行文本框，以及提交信息按钮和重置信息按钮。数据提交呢我们还是提交到百度，提交类型我们使用post。具体的代码如下图所示：
在网页中的显示效果就如下图所示：
好了，到了这里我们的第一个表单就算是做完了，到这有人就会问了，为什么别人的代码在浏览器上看起来都是那么的规整，我这么写完看着怎么这么丑，接下来的文章我们将为大家介绍css的知识了，学习了css你也可以将你的页面做的高达上起来。最后大家看完一定要自己动手写一写，只有自己写出的代码才能体会到其中的乐趣，多加练习才是王道。
每日金句：人生最大的喜悦是每个人都说你做不到，你却完成它了！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
一、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>之间的文本内容
以上就是我今天学到的表单提交的几种方法。跟大家一起交流。写的不好，望大神多多指教。
*请认真填写需求信息，我们会在24小时内与您取得联系。
