【html】button按钮的一些问题
问题：
button 按钮在不设置 type 属性时，在不同的浏览器作用不一样。举个例子：
html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>button按钮的一些问题</title>
</head>
<body>
<form action="result.php" method="post">
<input type="text" name="txt" placeholder="随便输入点什么吧！" autocomplete="off"/>
<button>button点击提交</button>
</form>
</body>
</html>
result.php：
<?php echo $_POST['txt'] ?>
我们发现，在 ie8 以上包括 ie8 点击按钮可以正常提交表单，但是在 ie6 和 ie7 下面，点击按钮没有反应。
原因：
为什么会有差异？因为 button 按钮没有设置 type 属性，在不同的浏览器中解析 button 的 type 类型不尽相同。
通过 w3school 可以发现，我们需要始终为 button 按钮规定 type 属性。Internet Explorer（经测试是 ie6 和 ie7）的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。具体内容点此了解。
最后我们修改下 demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>button按钮的一些问题</title>
</head>
<body>
<form action="result.php" method="post">
<input type="text" name="txt" placeholder="随便输入点什么吧！" autocomplete="off"/>
<button type="button">button按钮type为button</button>
<button type="submit">button按钮type为submit</button>
</form>
</body>
</html>
PS：
写这篇文章的目的在于提醒自己在使用 button 时需要为标签指定相应的 type 类型。
【html】button按钮的一些问题的更多相关文章
- button 按钮，结合onclick事件，验证和提交表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何在MFC界面开发中响应Button按钮的Down和Up事件
通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
- button按钮
button按钮只加类名不加type时,点击此按钮页面会刷新
- Unity3D NGUI 给button按钮添加单间事件
Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...
- iphone中button按钮显示为圆形解决
iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...
- RFS_点击button按钮之后，RFS出现卡死的问题
[html代码] <html> <head> <title> 主窗口 </title> </head> <body> <d ...
- Android 自定义Button按钮显示样式（正常、按下、获取焦点）
现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...
- input与button按钮背景图失效不显示的解决办法
今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...
随机推荐
- Robot Framework-Mac版本安装
Robot Framework-Mac版本安装 Robot Framework-Windows版本安装 Robot Framework-工具简介及入门使用 Robot Framework-Databa ...
- 横竖屏切换时Activity的生命周期
设置横竖屏切换时Activity生命周期的属性设置,在清单文件中的Activity节点中设置.根据具体需求设置: 1.不设置Activity的android:configChanges时,切屏会重新调 ...
- Hibernate Tools for Eclips Plugins
1. 安装: Help -> Install new software -> Add ->Achieve -> 找到安装包 -> OK 2. 创建映射:
- 写在Python前
Python是用C编写的一种解释型语言,和shell一样,变量可以直接使用,而且就像C中的宏替换,但是Python同样支持进行底层的调用,可以很容易的和各种语言进行融合,俗称"胶水语言&qu ...
- PHP-Beast V0.6 发布 (PHP源码加密模块)
本版本主要修改了一些bug和增加了一些配置项: 1. 设置缓存大小可以使用单位, 例如: beast.cache_size = 10m; 2. 可以在配置文件中禁止beast模块, 例如: beast ...
- MVC中使用RazorPDF创建PDF
这篇文章主要介绍使用Nuget package中的RazorPDF简单的创建PDF的方法. 关于RazorPDF 这个Nuget Package由Al Nyveldt创建.它内部使用ITextShar ...
- Winform（C#.NET）自动更新组件的使用及部分功能实现(续)
接昨天的文章Winform(C#.NET)自动更新组件的使用及部分功能实现 强制更新的实现部分: 将DownloadConfirm窗体修改成单纯的类 public class DownloadConf ...
- JqueryEasyUI浅谈---视频教程公布
http://pan.baidu.com/s/1pJqGXez 前两天我在博客园发了一个关于JqueryEasyUI浅谈本地化应用的博客,我简单的介绍了JqueryEasyUI的应用,今天我录制了了一 ...
- Asp.Net Web API 2第十三课——ASP.NET Web API中的JSON和XML序列化
前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html 本文描述ASP.NET W ...
- ASP.NET Web API 2 中的特性路由
ASP.NET MVC 5.1 开始已经支持基于特性的路由(http://attributerouting.net),ASP.NET WEB API 2 同时也支持了这一特性. 启用特性路 由只需要在 ...