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. 朱子奇- 精算师，Tailorwoods创始人 | 到「在行」来约见我

    朱子奇- 精算师,Tailorwoods创始人 | 到「在行」来约见我 Tailorwoods

  2. 邁向IT專家成功之路的三十則鐵律 鐵律二十：IT人證照之道-收斂

    這是一個各行各業都講究專業證照的世代,彷彿證照只要比別人少一些就感覺自己遜掉了.現今IT領域的證照肯定是所有行業中最複雜的,無論是想求職升遷的還是想轉進IT跑道的,許多人由於受到媒體與廣告的影響,都不 ...

  3. 全方位绕过软WAF攻略

    0×00 前言 现在软waf较为多,就在今年夏天苦逼挖洞的日子里经常遇到360主机卫士,安全狗,云锁之类的软waf进行拦截,经常碰到如下拦截提示: 看到以上三个拦截提示就让人头疼不已,欲罢不能. so ...

  4. python 工具mouse_find 鼠标定位

    import os,time import pyautogui as pag try: while True: print ("Press Ctrl-C to end") x,y ...

  5. OpenCV入门笔记（一） Linux下的安装

    关于OpenCV,有中文的官方站点.里面翻译了官网的教程和API等.中文官方Tutorials见这里:[Tutorials] 一.Ubuntu下的安装 能够选择直接从库里安装,或者手动编译安装,请參考 ...

  6. Hibernate Restrictions QBC运算符

    HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <>  Restrictions.ne() 不等于not equal >  Restrict ...

  7. Thrift安装介绍

    一.简介 1.语言库要求 因为thrift支持多语言.所以编译thrift源代码的过程中,会用到该语言的一些类库.如c++的boost.java的jdk等. 那么,在安装thrift过程中,须要对各种 ...

  8. 使用JDBC连接SQL Server

    源文:http://bbs.bc-cn.net/dispbbs.asp?boardid=12&id=140292 整理:秋忆 接触Java或者JSP,难免会使用到数据库SQL Server 2 ...

  9. 前端自动化工具 gulp

    最近一个项目才接触这些自动化工具 webpack gulp grunt 等等.. webpack 可以引入模块 和 压缩 gulp 和 grunt 可以压缩 这里只说下gulp  因为项目里只用到gu ...

  10. 误用了 react-scripts eject 命令

    react 小白编程 由于使用 create-react-app 脚手架构建项目的时候,会给几个命令用 其中一个命令吸引了我的注意力  yarn eject,因为构建完成后特别提示说“你不会想要用到这 ...