问题：

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按钮的一些问题的更多相关文章

  1. button 按钮，结合onclick事件，验证和提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 如何在MFC界面开发中响应Button按钮的Down和Up事件

    通过尝试有两种方案可以解决这个问题,第一种方案是通过PreTranslateMessage函数在调度消息之前对消息类型进行筛选,第二种方案是重载CButton类,在重载后的类CForTestButto ...

  3. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  4. button按钮

    button按钮只加类名不加type时,点击此按钮页面会刷新

  5. Unity3D NGUI 给button按钮添加单间事件

    Unity3D中, NGUI 给button按钮添加单间事件的方法很多,在这里只给推荐一种比较常用的方法. 推荐方法:使用UIListener. 1.给button组价添加上UIListener.选择 ...

  6. iphone中button按钮显示为圆形解决

    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...

  7. RFS_点击button按钮之后，RFS出现卡死的问题

    [html代码] <html> <head> <title> 主窗口 </title> </head> <body> <d ...

  8. Android 自定义Button按钮显示样式（正常、按下、获取焦点）

    现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...

  9. input与button按钮背景图失效不显示的解决办法

    今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式 ...

随机推荐

  1. Activity的四种启动模式详解

    Activity的启动模式在清单文件AndroidManifest.xml中的Activity属性中进行设置: 如:<activity android:name=".MainActiv ...

  2. Titanium系列－－安装Titanium Studio 中的Android SDK，JDK以及环境变量的配置(二)

    Ubuntu安装配置JDK 1.先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-8u25-linux-x64.tar.gz文件,下好后直接解压 Step1:# 将解压好的jdk1. ...

  3. 第12周&第13周

    12&13:STL Standard Template Library sort, binary_search/lower_bound/upper_bound, multiset, set, ...

  4. Replication--复制延迟的诊断和解决

    要解决复制延迟问题,需要首先定位复制延迟发生点,再找出复制延迟的原因,再做相应处理. 复制延迟发生点:1. 发布服务器2. 分发服务器3. 订阅服务器4. 发布服务器与分发服务器和分发服务器与订阅服务 ...

  5. 使用NHibernate（9）-- 缓存

    1,对象状态. 作为基础,还是先看一下对象的状态吧.主要涉及到三个名词,瞬时.持久.托管. 瞬时态:对象刚创建,Session还不知道这个对象的存在.可以通过调用ISession的Save等方法可以转 ...

  6. Asp.Net Web API 2第九课——自承载Web API

    前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html Asp.Net Web A ...

  7. JQuery中动态生成元素的绑定事件（坑死宝宝了）

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  8. JavaScript严谨模式(Strict Mode)

    下面的内容翻译自It’s time to start using JavaScript strict mode,作者Nicholas C.Zakas参与了YUI框架的开发,并撰写了多本前端技术书籍,在 ...

  9. ASP.NET MVC简单编程之(二)经典路由篇

    话题:请求从路由开始 在实际的ASP.NET MVC开发中,URL访问规则----路由的定义是非常重要的.因为任何一个请求都离不开路由.理解它,我们将能理解MVC处理请求的整个过程,灵活地定义系统各种 ...

  10. Cocos2d-x3.6 Android编译问题

    在Cocod2d-x论坛上看到越来越多人吐槽新版本更新太快,改动太大,而且经常有BUG导致升级要折腾很久很久..但我就是喜欢折腾,喜欢升级到最新版本,看看有了哪些新功能,哪些改进.为此也折腾了不少,遇 ...