表单提交按钮input和button、a的差异

现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来。在以前的日子里,大家都习惯于用input,因为他直接拥有type=submit,而button没有,它更适合于表达 button。
然而。。。

首先我们说说:input标签;这个最常见了,不多说:当type="submit"时,提交表单数据!

button标签:经过测试:在<IE8浏览器,button的默认type="button",所以我们要使它能够进行表单数据提交需要设置type="submit";而从IE8开始就默认为type="submit",也算是微软一步一步的前进吧。

你可以自己去测试:

先创建一个php文件demo.php, 用来接收表单数据:

<?php
var_dump($_POST);
?>

再创建一个html文件demo.html, 用来显示表单:

<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form>

<form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>

使用Firefox依次浏览,就能看到input和button的区别:input提交按钮显示的文字就是value,而button提交按钮显示的文字 和value是独立的,从这个意义上来看,button更有表现力,是更值得推荐的提交按钮实现方式。

还有关于它们在不同浏览器下显示的效果,也会影响我们的选择(下面就会介绍用其他标签,更好维持表现层的统一):这个主要是ff和opera下line-height对input[‘button‘],button不起作用。

小结:从理论上来看,button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性,很多时候还是只能使用input形式的提交按钮。

再来说:a标签(以下为转载:)

之前看过一些文章,说是用a标签来代替submit按钮更好一些,因为submit按钮在IE6下会有一些兼容的问题,不好统一,而且input的行高在各浏览器参差不齐,还不能用line-height控制,在按钮有一些交互效果的时候,a标签更容易实现,hover效果便可,所以许多前端喜欢用a标签来代替input。

但是涉及到一点,input submit可以用来提交表单的值,而a标签似乎不太好传值,所以好多程序要求前端开发人员再把a标签改成input的,后来经过查找,发现a标签是一样的可以提交表单的,下面附上方法,也希望那些被程序要求把页面改来改去的前端人员告诉程序a标签一样可以提交表单的。

a标签提交表单的方式其实很简单的,首先你写一个方法
  function tosubmit(){
  var myform=document.getElementByIdx_x("myform");
  myform.submit();
  }
  然后用这个方法提交提交
  这样就可以提交表单了,是不是很简单。

----------------------------------------------------------------------------------------------------------

参考:http://www.w3school.com.cn/tags/tag_button.asp

样式设置:CSS按钮样式之button标签与input type=button的区别详解

时间: 2024-10-15 00:36:05

表单提交按钮input和button、a的差异的相关文章

表单提交验证--input框required

效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>表单提交验证</t

form表单提交文件(input file)

包含文件上传的form表单提交,要添加属性 enctype="multipart/form-data" <form method="post" id="create_form" action="" enctype="multipart/form-data"> <table style="display: table;"> <tr> <td>

工作总结 表单提交中 Input 设置 disabled readonly

input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正常提交

表单提交时submit按钮的值没有被提交

FORM表单中,submit提交的时候,有时候有值,有时候无值 FORM表单中,submit的name是Submit.如下<input type="submit" name="Submit" value="提交表单" /> 1.出现的几种情况 1.当点击submit按钮时,FORM被提交,提交后获取的数组中有Submit下标的值 2.回到FORM表单,直接敲回车提交,这时候发现获取的数组中没有Submit下标. 3.在浏览器版本低的情

表单提交:button input submit 的区别

http://harttle.com/2015/08/03/form-submit.html 最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践.先给结论: 建议使用button[type=submit]来提交表单,而不是input: 只有单行文本控件时,回车会引发表单提交: 通过onsubmit事件可阻止表单提交. input[type=submit] 这是最常见的提交方式.不多说了,看图: 图中可以看到点击提交按钮后的URL是/?key

表单提交中的input、button、submit的区别(转来学习)

最近项目中用了很多的表单提交,发现input.button.submit甚至回车键都可以引发表单提交,下面将分别验证他们在使用中的区别. 1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type="submit" value="提交"> </form> 其中点击按钮后的url变为?name=22222222

表单提交(三)——阻止Eneter键提交表单

当用户在文本框中进行编辑时,按下键盘Enter键,会触发表单提交.为了防止这种意外,有一种方法就是拒绝所有表单提交, 然后通过单击指定的提交命令按钮才能提交表单. 首先,将"return false"绑定到表单的onsubmit事件,来阻止所有表单提交. 第二,使用input="button"通过onclick事件,以this.form.submit()方法提交,而不会触发onsubmit事件. 所以不能使用jquery方式$("#myForm"

防止表单提交

首先前端的实现方式: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的