html5--3.16 button元素

学习要点

  • 掌握button元素的使用

button元素

    • 用来建立一个按钮从功能上来说，与input元素建立的按钮相同
    • button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计
    • 不仅可以在表单中使用，还可以在其他块元素和内联元素中使用
  • button元素的属性
    • type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同
    • name/vlue/disable属性：与input的用法相同
    • autofocus属性：设置按钮自动获得焦点。
    • form属性：设定按钮隶属于哪一个或多个表单
    • formmethod属性：设定表单的提交方式，将覆盖原本的提交方式
    • formnovalidate属性：设定表单将会覆盖原本的novalidate属性
    • fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
    • formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定
    • formtarget属性：将覆盖原本的target属性设定

重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <p style="color:#FF0000">

     </p>

     <form action="L3_01.html" method="get" >

         用户名：<input type="text" name="name" size="30"><br><br>

         意见：<textarea name="textarea" id="" cols="30" rows="5" placeholder="请输入您的意见，谢谢！！" style="background: #F0FFFF"></textarea><br>

 <!--        <br><input type="submit" value="确定"> <input type="reset"><br>-->

         <br><button type="submit" style="background: #FFF0FF;border-radius: 10px;padding: 10px"><img src="pen.jpg" alt="" width="12px">提交</button>

         <button type="reset" style="background: #FFFFF0;border-radius: 10px;padding: 10px">重置</button><br>

     </form>

 <body>

 </body>

 </html>

html5--3.16 button元素的更多相关文章

  1. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  2. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  3. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  4. HTML5之新增的元素

    今天打开博客看到自己有了一个小粉丝,说实话还是蛮开心的,坚持写博客大半年了,终于迎来了自己的第一个小伙伴.总算是坚持了那么久的事情看到了结果吧. 前几天参加了我们学院老师的比赛---<青年教师大 ...

  5. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  6. HTML5 增强的页面元素

    一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...

  7. 为什么要在<button>元素中添加type属性

    在HTML中<button> 标签定义一个按钮. <button type="button">Click Me!</button> 在 butt ...

  8. button元素兼容问题浅析

    缺省type属性值 <button>提交</button> button元素的type属性值有submit.button可选,在上面这种没有明确指出type值的情况下,浏览器的 ...

  9. input 和 button元素 作为提交、重置、按钮功用的区别。

    首先,input元素和button元素 都是可以作为普通按钮.提交按钮.重置按钮的. <input type="button" value="button" ...

随机推荐

  1. Android自定义Dialog效果

    上面是效果图. 使用方法: NiftyDialogBuilder dialogBuilder=NiftyDialogBuilder.getInstance(this); dialogBuilder . ...

  2. JSP/SERVLET新手教程－－Servlet 使用入门

    如今的JSP书籍有的是直接讲述JSP的使用,然后再解说SERVERLET的使用;也有书籍是先讲述SERVERLET的使用,然后解说JSP使用.个人觉得另外一种相对好一些,至于原因大家能够在学习体会到! ...

  3. How to create a freehand tool

    http://forums.esri.com/Thread.asp?c=159&f=1707&t=283694&mc=1 http://blog.sina.com.cn/s/b ...

  4. python+OpenCV进行人脸检测【转】

    OpenCV的人脸检测功能在一般场合还是不错的.而ubuntu正好提供了python-opencv这个包,用它可以方便地实现人脸检测的代码. 写代码之前应该先安装python-opencv: $ su ...

  5. 改进的SMS4算法的差分故障与暴力联合攻击

    改进的SMS4算法的差分故障与暴力联合攻击 (1．中国科学院研究生院,北京100049) 摘要SMS4是在国内正式使用并于2006年发布的第一个用于无线局域网的商用分组password算法.文中研究了 ...

  6. 页面登陆框老是乱乱的？banner跨页图片缩小之后总是在側面不能显示主要部分？哈哈~我来帮你忙~~

    有banner背景图片和登陆框的html.css排布 目的:无论页面大小,背景图片都要居中(显示图片中间主要内容,而不是側面的一些东西),登陆框基本能在页面内显示. 盒子的排列应该是这种: <d ...

  7. PS 如何制作柔和的边框

    柔和边框制作 1 新建一个图层,按填充为黑色.(填充当前图层为前景色 A/T+Delete 背景色 CTRL+Delete),不透明度设为60%.混合模式为正片叠底,   2 选择椭圆选择一片区域(也 ...

  8. Node.js 数据存储方式的选择

    如何为你的 Node.js 应用挑选数据库 Node.js 应用一般有三种方式保存数据. 不使用任何数据库管理系统(DBMS),把数据保存在内存里或直接使用文件系统. 使用关系数据库.例如 MySQL ...

  9. vim 自动补全

    1. vim编辑器自带关键字补全 触发: ctrl + n  or ctrl + p 补全命令: <C-n>              普通关键字 [能够根据buffer以及标签文件列表等 ...

  10. mongodb3.0 性能測试报告 二

    mongodb3.0 性能測试报告 一 mongodb3.0 性能測试报告 二 mongodb3.0 性能測试报告 三 測试环境: 服务器:X86 pcserver   共6台 cpu:  单颗8核 ...