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. Linux下快速删除输错的密码技巧（快速删除输入的命令）

    1.[Esc]+[退格键(Backspace)] 2.[Ctrl]+[U] 说明:以上两个快捷键都会删除全部输错的命令或密码. 参考: http://blog.csdn.net/u013895662/ ...

  2. Maven出现User setting file does not exist ...\.m2\setting.xml的问题解决（同时也解决用户.m2目录下无setting.xml文件）

    如果Eclipse中出现User setting file does not exist ...\.m2\setting.xml这样的问题,解决方法如下: 1.拷贝%M2_HOME%/conf/set ...

  3. ios构造和析构

    遵循规则: 构造先父类后子类 析构先子类后父类 所以,自定义的init函数需要首先[super init....] dealloc中[super dealloc]却是放在最后的 - (id)initW ...

  4. 词典对象(NSDictionary和NSMutableDictionary)

    词典(dictionary)顾名思义就是同由键-值组成的数据集合.与在词典中查找单词定义一样,可以通过对象的键从词典中获取需要的对象,看到 这里,你是不是想起了java中的map?和NSArray一样 ...

  5. Android的包管理机制浅析（二）

    上篇刚好说到获取到了签名信息,以下进入安装过程,直接上源代码: private void installNewPackageLI(PackageParser.Package pkg, int pars ...

  6. C# Window编程随记——ClickOnce程序部署

    关于ClickOnce我们要说的主要有一下两点: 什么是ClickOnce? ClickOnce的使用 一.什么是ClickOnce(来自百度)         ClickOnce 是一种部署技术,使 ...

  7. d3js 添加数据

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. C++学习总结1

    一.内存管理 一般new 与 delete 同时出现.假如释放一个对象用 delete p即可.多个对象用delet [ ]p  即:new与delete需要搭配好. C++继承了C的许多函数,mal ...

  9. python（19）- 列表生成式和生成器表达式练习Ⅰ

    列表表达式 程序一: 常规写法: egg_list=[] for i in range(100): egg_list.append('egg%s' %i) print(egg_list) 列表表达式写 ...

  10. gulp是用来干什么的？（概念）

    当我们在使用gulp的时候,gulp到底用来干什么呢? 编译 sass 合并优化压缩 css 校验压缩 js 优化图片 添加文件指纹(md5) 组件化头部底部(include html) 实时自动刷新 ...