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. SpringMVC整合MongoDB

    首先,在pom文件中新增spring-data-mongodb的依赖: <dependency> <groupId>org.springframework.data</g ...

  2. 开源BT磁力搜索引擎收集

    基本是利用bt网络中p2p技术实现,开源项目上实现了dht网络的搜索.是学习dht算法的好项目. https://lanmaowz.com/open-dht-spider/ https://githu ...

  3. maven打包自动配置数据库链接信息

    pom.xml加入下面代码 <profiles> <profile> <id>dev</id> <activation> <activ ...

  4. Android Service实现双向通信（一）

    首先,大概来总结一下与Service的通信方式有很多种: 通过BroadCastReceiver:这种方式是最简单的,只能用来交换简单的数据: 通过Messager:这种方式是通过一个传递一个Mess ...

  5. [转]Go的50坑：新Golang开发者要注意的陷阱、技巧和常见错误-高级

    from : https://levy.at/blog/11 进阶篇 关闭HTTP的响应 level: intermediate 当你使用标准http库发起请求时,你得到一个http的响应变量.如果你 ...

  6. IOS 教你玩转UITableViewController和TableView

    iphone和Ipad开发中UITableViewController和TableView应该是用得比較多得控件. 可是你是会由于写这些控件写得多了而厌烦. 全部怎么让这个控件一直能用.怎么让这个控件 ...

  7. 百科知识 华为手机P7如何更换电池

    参考下面 教程 https://item.jd.com/3265516.html  

  8. 使用excel进行数据挖掘（5）---- 应用场景分析

    使用excel进行数据挖掘(5)---- 应用场景分析 在配置环境后,能够使用excel进行数据挖掘. 环境配置问题可參阅: http://blog.csdn.net/xinxing__8185/ar ...

  9. soapUI学习笔记---断言的小使用

    转自:http://www.cnblogs.com/duimianyoushan/p/4274791.html 以下示例在soapUI 4.5中进行.刚开始学soapUI的使用,记录下以免忘记 1.创 ...

  10. 为Redmine的项目加上起止时间

    没有时间约束的项目不是好项目. 要给项目配置起止时间,须要用到自己定义属性. 我们须要管理员身份登录.才干够定义自己定义属性. 自己定义属性 看图吧,先是点击页面导航条(最上面那排菜单,有主页.我的工 ...