技术标签: html5 HTML html javascript
button 用于显示一个可点击的按钮,可用在表单或文档的其它地方。
button
元素是内联双标签,不同浏览器下button
样式不同,可以通过CSS
修改。
<button>按钮</button>
指定页面加载时聚焦此按钮,多个按钮指定autofocus
,仅仅只会聚焦首个按钮。
<button autofocus>按钮</button>
禁用,用户不能与button
交互。
<button disabled>按钮</button>
HTML5
新增属性,用于指定关联的form
元素的id
。一般button
按钮需要位于form
元素内部才能关联form
,而指定form
属性则可以在文档任意位置关联form
。
<form id="form" action="" method="post">
<input type="text">
</form>
<button type="reset" form='form'>按钮</button>
覆盖button
关联的form
表单的action
属性。
如下表单的提交地址将被覆盖为http://www.jd.com
。
<form method="get" action="http://www.baidu.com">
<input type="text">
<button type="submit" formaction="http://www.jd.com">按钮</button>
</form>
不同按钮设置不同formaction
属性,可将同一表单的数据提交到不同的URL
地址。
<form method="get" id="form">
<input type="text">
</form>
<button type="submit" formaction="http://www.baidu.com" form="form">百度</button>
<button type="submit" formaction="http://www.qq.com" form="form">qq</button>
若表单method
属性为post
,且button
是submit
类型时,用于指定表单的数据编码方式。
注意button
上的formenctype
也会覆盖form
表单的enctype
属性。
<form method="post" action="http://www.baidu.com">
<input type="text">
<button type="submit" formenctype="multipart/form-data">按钮</button>
</form>
实际上enctype
影响的是请求头的Content-Type
。
enctype 属性值包括三种类型。
application/x-www-form-urlencoded
:默认编码方式multipart/form-data
:表单含有文件上传控件需指定text/plain
:用于调试 如下为含有两个输入框的表单,通过在button
上设置不同formenctype
属性值来区分差异,其中name
控件固定输入hello
,desc
控件固定输入button formenctype
。
<form method="post" action="http://www.baidu.com">
<input type="text" name="value">
<input type="text" name="desc">
<button type="submit" formenctype="">按钮</button>
</form>
application/x-www-form-urlencoded
是默认的编码方式,适用于各种类型的表单。其中特殊字符(空格)已经被替换为+
,数据项的名称和值以=
分开,数据项之间以&
分开。
multipart/form-data
在表单含有type="file"
控件时指定,此类型更加适合传输二进制数据。
text/plain
中每个数据项独占一行,不会编码特殊字符。注意各种浏览器的实现方式各不相同,一般不建议使用。
覆盖button
关联的form
表单的method
属性,可选值包括get
、post
。
如下表单的请求方式将为get
。
<form method="post" action="http://www.baidu.com">
<input type="text">
<button type="submit" formmethod="get">按钮</button>
</form>
指定button
关联的form
表单,在表单提交时不用验证数据。
如下指定表单项只能输入email
邮箱格式。
<form method="post" action="http://www.baidu.com">
<input type="email" name="email">
<button type="submit">按钮</button>
</form>
点击按钮提交表单数据时,将验证数据是否为邮箱格式。
添加formnovalidate
属性将关闭表单的验证。
<button type="submit" formnovalidate>按钮</button>
若关联form
的button
其type
属性为值为submit
,formtarget
表示提交的表单在何处响应。
formtarget
属性值如下,其中具体差异 参考。
_self
:在当前页面响应_blank
:在新窗口响应_parent
:在当前页面的父框架页面中响应_top
:在当前页面的顶层框架页面中响应<form method="post" action="http://www.baidu.com">
<input type="text">
<button type="submit" formtarget="_blank">按钮</button>
</form>
指定按钮的name
属性,被单击时自身name
与value
属性值将被提交。
<form method="post" action="http://www.baidu.com">
<input type="text" name="value">
<button type="submit" name="button" value="value">按钮</button>
</form>
输入框录入值,单击按钮。
其中button
的name
与value
属性值均被提交。
指定按钮的初始值,将作为name
属性的键值提交。
指定button
的类型,其中可选值如下。
submit
:此按钮将表单数据提交至服务器。注意指定type
为空或者错误值时也是submit
类型reset
:重置表单控件为初始值button
:指定为普通按钮menu
:打开一个由menu
元素定义的菜单,此属性尚未在任何浏览器实现<button type="menu" menu="menu">Dropdown</button>
<menu id="menu">
<menuitem>hello</menuitem>
<menuitem>world</menuitem>
</menu>
如下获取butoon
上的value
属性。
<button id="btn" value="hello button">按钮</button>
<script>
var btn = document.getElementById('btn')
console.log(btn.value)
</script>
IE8
以下浏览器,其获取的值等价于button
的innerText
。
IE8
及以上浏览器、Chrome
、Firefox
、Opera
等,其获取的值为button
的 value
属性值。
兼容方式也很简单,即在获取 button
元素的 value
属性值时统一使用 getAttribute
。
btn.getAttribute('value')
关联form
表单的type
属性值为submit
的按钮,在点击提交表单数据时也会存在兼容性问题。
由于IE
浏览器的控制台F12
开启后,点击button
提交表单,无论将form
的target
属性设置为_self
还是_blank
,控制台均会被关闭,因此post
请求参数也无法查看。
客户端无法查看参数,换个思路从服务端中去打印请求参数。
<form action="http://127.0.0.1:3000" method="post">
<input type="text" name="input">
<button name="reset" value="button">重置</button>
<button type="submit" name="name" value="button">按钮</button>
</form>
IE8
及以上浏览器、Chrome
、Firefox
等。
IE8
以下浏览器,可以看出在提交表单时,会将表单内所有按钮都提交上去,并且提交的值并不是按钮的value
值,而是等价于按钮innerText
的值。
伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞或 Star 支持一下哦!
手动码字,如有错误,欢迎在评论区指正~
你的支持就是我更新的最大动力~
GitHub / Gitee、GitHub Pages、掘金、CSDN 同步更新,欢迎关注~
文章浏览阅读1.5k次,点赞3次,收藏16次。要求:将滑块与编辑框、进度条相连接。调整滑块位置同时显示滑块当前对应数值,达到设定要求时改变进度条的进度。一、界面设计滑块是slider control,进度条是progress control对于三个滑块,修改属性:对于三个示例编辑框,修改属性:二、添加变量三、初始化滑块和进度条在Dlg.cpp中找到初始化函数BOOL COOPEx3Dlg::OnI..._setticfreq
文章浏览阅读202次。packagecode;//importjava.awt.*;//importjava.awt.Canvas;//importjava.awt.event.*;//importjavax.swing.*;importjava.util.Random;importjavax.microedition.lcdui.*;//写界面所需要的包/***//***俄罗斯方块*高雷*2007年1..._240×320java游戏
文章浏览阅读779次,点赞14次,收藏19次。然后,实现系统的数据管理和服务功能,包括用户的注册与登录、电影的分类与展示、电影信息的查询与推荐、座位的选择与预订、在线支付与电子票生成等。此外,随着在线视频平台的兴起,越来越多的人选择在线观看电影,这对传统电影院产生了巨大的冲击。研究意义: 开发在线电影院售票平台对于提升用户的观影体验、优化电影院的运营效率、促进电影产业的发展具有重要的意义。该系统旨在通过技术手段解决传统电影院售票中的问题,提供一个集成化的电影信息展示、座位选择、在线支付和用户评价平台,同时也为电影院和电影制作方提供有效的工具。
文章浏览阅读509次。保护我们剩下的人的通话信息安全,使用TOX可以让你在和家人,朋友,爱人交流时保护你的隐私不受政府无孔不入的的偷窥.关于TOX:其他牛逼的软件因为一些细化服务问你要钱的时候, TOX分文不取 . 你用了TOX, 想干嘛就干嘛.网友评论:项目源码展示:源码测试效果:最后,如果你学C/C++编程有什么不懂的,可以来问问我哦,或许我能够..._基于c++的即时聊天系统设计
文章浏览阅读584次。鱼弦:CSDN内容合伙人、CSDN新星导师、全栈领域创作新星创作者 、51CTO(Top红人+专家博主) 、github开源爱好者(go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen)当Java服务在Linux系统中运行时,可能会出现swap分区被占用的内存泄露问题,导致系统性能下降或者崩溃。下面是该问题的故障及解决方法、底层结构、架构图、工作原理、使用场景详解和实际应用方式、原理详细描述、相关命令使用示例以及文献材料链接。_linux swap占用很高
文章浏览阅读662次。Alt+F11,然后插入-模块:复制下面代码到编辑窗口:Sub 半角标点符号转换为全角标点符号()'中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragraph, ChineseInterpunction() As Variant, EnglishInterpunction() As Variant Dim MyRange..._替换半角宏
文章浏览阅读1.2w次。内存从某种意义上来说对于电脑的运行会产生着基础性的影响,所以我们需要经常的检测一下我们电脑的稳定性,那么下载一款内存条监测工具对我们来说就非常的有必要了,现在的内存条检测工具有很多,那么我们应该如何选择一款合适的内存条监测工具呢,接下来就为大家介绍一下。【鲁大师】这是一款综合的电脑检测软件,不仅仅可以对我们电脑内存当中的内存进行检测,还可以对我们的电脑系统的方方面面都进行监测,比如说我们的内存占比..._怎么测试内存稳定性
文章浏览阅读7.8k次。自定义一个下拉列表框,当这个功能有效时,点击可弹出下拉框,选中某个选项后,在左边功能名称下面显示选项值,右边的箭头替换成自定义图标,例如手法功能;当功能无效时,置灰,如力度功能;具体示例如下:代码如下:index.hml<!--手法无效时--><div class="fun-grid-item" if="{{manualInvalid}}"> <div class="grid-item-parent-ver._harmonyos 下拉列表
文章浏览阅读1k次。第44集 图片与图形处理198、 Shape对象的类型和属性该对象代表工作表或图形工作表上的所有图形,它是sheets和chart的子对象(属性)。Sheet1.ShapesSub t2()On Error Resume NextDim ms As Shapek = 1For Each ms In Sheet1.Shapesk = k + 1Cells(k, 1) = ms.Na..._msofalse
文章浏览阅读1.2k次。公司个人年终工作总结1 20__年即将过去,在公司领导的悉心关怀下和同事们的帮助指导下,结合我自身的努力,在工作、学习等各方面都取得了长足的进步,尤其是在保险理赔专业知识和技能培养方面的成熟,使我成为一名合格的车险查勘定损员。随着工作岗位的调整,我已经成长为为一名能够独立工作、业务熟练的前台工作人员。现将一年来的工作情况向公司领导总结汇报如下: 一、加强理论学习,注重个人素质提高 加强自身业务学习,争做理赔标兵。在日常的工作学习中,我坚持学习更多的保险知识和业务技能,在老同志的“传帮带”下,不断加强个_csdn 公司 年终终结
文章浏览阅读1.6k次。_bitcoin 调试环境搭建
文章浏览阅读4.3k次,点赞93次,收藏94次。为了解决贝塞尔曲线无法局部修正、控制性减弱、曲线次数过高、不易拼接的缺陷,引入B样条曲线(B-Spline)。本文介绍B样条曲线的基本概念:节点向量、支撑性、次数阶数、加权性质、节点生成算法等,为后续曲线计算打下基础。_样条曲线生成