HTML 普通按钮

标签: HTML HTML5
19人阅读 评论(0) 收藏 举报
分类:

普通按钮

把 input 元素的 type 属性设置为“button”,可以创建普通按钮。按钮上显示的文本是value 属性的值,如果没有提供 value 属性,则只创建一个空按钮。如:

  1. <input type="button" value="立即购买">

上述按钮的运行结果如图 3‑33 所示:

普通按钮图3-33 普通按钮

默认情况下,在普通按钮上点击,是没有任何反应的。因此,需要为普通按钮注册事件,并手动编写相应的处理函数。假如希望单击上述按钮时,提交表单,则要为按钮注册onClick 事件。如:

  1. <form name="buy" action="form.html" method="post">
  2.     <button onClick="submitForm(buy)">立即购买</button>
  3. </form>

现在点击按钮,就会触发 onClick 事件,并调用事件处理函数submitForm(buy),参数 buy 为待处理表单name 属性的值。如果希望点击按钮后提交表单,就可以在事件处理函数中调用 form 对象的 submit() 方法:

  1. function submitForm(f) {
  2.     f.submit();  
  3. }

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。

版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

查看评论

HTML表单元素2(普通按钮、提交按钮、重置按钮、图像提交按钮、HTML的按钮标签<button>、练习)

HTML的普通按钮 即普通按钮 1.普通按钮 2.普通按钮不具备提交form的效果 普通按钮不能提交 账号: 密码: HTML的提交按钮 即为提交按钮  用于提交form,...
  • wo_shi_LTB
  • wo_shi_LTB
  • 2018-01-16 02:45:54
  • 58

HTML里怎么给普通按钮添加超链接

使用javascript,比如:这是一个按钮 看到abc.html了吗?改成你想要链接到的页面URL。...
  • a772116804
  • a772116804
  • 2018-01-25 18:01:32
  • 75

HTML中,按钮button与submit区别是什么?

button-普通按钮,submit-提交按钮; submit按钮一般出现在网页上需要提交信息到服务器是才使用, 而button按钮是创建一个按钮,对于实现按钮将会发生什么事这个不一定, 考页面...
  • jingmeifeng
  • jingmeifeng
  • 2012-03-19 21:04:10
  • 12599

HTML表单介绍((千万要区分button和submit的区别))

http://www.w3school.com.cn/html/html_forms.asp
  • winbobob
  • winbobob
  • 2014-06-01 10:29:49
  • 3272

html中按钮的几种不同写法

第一种:在一般情况下按钮提交表单   这样提交按钮是标签 ,如果想换成图片加上样式,把value="提交" 改成value=" "(这样“提交”两个 字就不会显...
  • xiaolu3
  • xiaolu3
  • 2015-01-03 13:51:12
  • 1180

普通按钮+提交按钮+重置按钮

按钮type=“button” 普通按钮; type=“submit” 提交按钮; type=“reset” 重置按钮; name 给按钮命名; value 设置显示...
  • isabellebaby007
  • isabellebaby007
  • 2017-08-08 03:38:20
  • 522

html几个不同功能的按钮

在表单中添加普通按钮 下面是有几个不同功能的按钮
  • u010383937
  • u010383937
  • 2017-05-25 07:19:44
  • 1023

Button按钮实例:普通按钮和图片按钮

  • 2017年09月21日 16:05
  • 1.86MB
  • 下载

Html中设置按钮竖直居中

button标签一定要用一个div包裹着,类似于这种的, 搜索 其中css的布局如下: #search { display: table; text-align: center; flo...
  • u013180692
  • u013180692
  • 2017-04-15 20:25:17
  • 2504

怎么简便地去掉html中难看的文件上传按钮并实现图片预览功能?

问题描述通常的文件上传按钮是这样的: 选择了文件过后是这样的: 很显然,这样的按钮并不好看。解决方法用一个label标签来装载样式,其for属性指向type=file的input,然后将i...
  • zhoucheng05_13
  • zhoucheng05_13
  • 2016-12-23 14:47:10
  • 5449
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 3万+
    积分: 5224
    排名: 6688
    博客专栏