zoukankan      html  css  js  c++  java
  • BUTTON标签和INPUT标签的区别

    一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大。


    HTML 4.01规范的Forms部分指名表单有以下几种控制类型:buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之外,都是由<input>完成。

    我这里说的是<button>和<input>。

    <button>和<input>
    规范中指名:可以用<button>和<input>来做表单按扭。不同的按钮类型请参考这些元素的详细定义。要注意的是<button>比<input>支持更丰富的表现功能。

    一些区别
    大家都知道<input>可以这样用(实际上是一定要这样用):<input type="submit" value="OK" />,一定要这样闭合。而不是:<input type="submit" value="OK" ></input>。因为起始标签为必须,而关闭标签是禁止的。

    <button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里,而是包含在标签中。如:<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。

    你可以这样写:<button><strong>OK</strong>, I do.</button>,甚至是插入图片:<button><img src="button.gif" alt="" />, it's great.</button>。有点类似于<input type="image">,但是显然强大多了。

    最后要注意的是,被<button>包含的图片,不能使用热点地图,即不能<img src="foo.gif" usemap="..." />,这是不合法的。当然也不能再包含诸如input, select, textarea, label, button, form, fieldset, iframe,和isindex(不推荐使用)元素了


    非原创,来源网络,原文地址:http://www.memoon.cn/news_view.asp?id=7429

    //------------------------------------------     另外一篇 -----------------------------------------------------------------

    type=button      就单纯是按钮功能
    type=submit      是发送表单

    但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
    使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.

    用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

    <input type=”submit” name=”b1″ value=”提交”     onClick=”bt_submit_onclick()”>

    执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

    <input type=”button” name=”b1″ value=”提交”     onClick=”bt_submit_onclick()”>

    执行完onClick,跳转文件在 js文件里控制。提交需要onClick。

    比如:

    1,onclick=”form1.action=’a.jsp’;form1.submit();”     这样就实现了submit的功能了。

    2,<form    name=”form1″    method=”post”    action=”http://blog.1xi.net”>
        <input    type=”button”    name=”Button”    value=”Button”    onClick=”submit()”>

       </form>

    3,<input    type=”button”    name=”Button”    value=”Button”    onClick=”javascript:windows.location.href=”你的url”" />

  • 相关阅读:
    安装pykeyboard模块
    Windows Defender Antivirus Service经常性出现占用CPU厉害
    Xpath 语法笔记
    通过docker部署rocketmq双主双从集群
    解决提取Mybatis多数据源公共组件“At least one base package must be specified”的问题
    设计模式-单例模式
    通过阳历生日计算星座,阴历生日,生辰八字,生肖五行
    设计模式-抽象工厂模式
    设计模式-工厂方法模式
    常用的MD5工具类
  • 原文地址:https://www.cnblogs.com/xiangniu/p/1988601.html
Copyright © 2011-2022 走看看