技术标签: 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 同步更新,欢迎关注~
文章浏览阅读748次。总结起来大概有5种做法:将要处理的文字写到一个资源文件,如string.xml(使用html用法格式化)当文字中出现URL、E-mail、电话号码等的时候,可以将TextView的android:autoLink属性设置为相应的的值,如果是所有的类型都出来就是**android:autoLink="all",当然也可以在java代码里 做,textView01.setAutoLinkMask(Li..._qaction::settext 无法添加下划线
文章浏览阅读6.3k次,点赞2次,收藏10次。摘要: 背景 随着近几年物联网的发展,时序数据迎来了一个不小的爆发。从DB-Engines上近两年的数据库类型增长趋势来看,时序数据库的增长是非常迅猛的。在去年我花了比较长的时间去了解了一些开源时序数据库,写了一个系列的文章(综述、HBase系、Cassandra系、InfluxDB、Prometheus),感兴趣的可以浏览。背景随着近几年物联网的发展,时序数据迎来了一个不小的爆发。从DB..._tablestore 时间类型处理
文章浏览阅读5.7k次,点赞8次,收藏49次。可以编译成功但是运行时段错误查找原因应该是ROS noetic版本中自带的OpenCV4和VINS-mono中需要使用的OpenCV3冲突的问题。为了便于查找问题,我只先编译feature_tracker包。解决思路历程:o想着把OpenCV4相关的库移除掉,但是发现编译feature_tracker的时候仍然会关联到Opencv4的库,查找原因是因为cv_bridge是依赖opencv4的,这样导致同时使用了opencv3和opencv4,因此运行出现段错误。oo进一步想着(1)把vins-mon_uabntu20.04安装vins-mono
文章浏览阅读3.6k次,点赞3次,收藏12次。创龙TL6748开发板中,EMIFA模块使用默认的PLL0_SYSCLK3时钟,使用AISgen for D800K008工具加载C6748配置文件C6748AISgen_456M_config(Configuration files,在TL_TMS6748/images文件夹下),由图可以看到DIV3等于4,注意这里的DIV3就是实际的分频值(x),而不是写入相应PLL寄存器的值(x-1)。_tms 6748
文章浏览阅读5.9k次,点赞4次,收藏13次。转载请说明出处:eigen稀疏矩阵拼接(块操作)eigen稀疏矩阵拼接(块操作)关于稀疏矩阵的块操作:参考官方链接 However, for performance reasons, writing to a sub-sparse-matrix is much more limited, and currently only contiguous sets of columns..._稀疏矩阵拼接
文章浏览阅读946次,点赞19次,收藏19次。波束形成是天线阵列信号处理中的一项关键技术,它通过对来自不同方向的信号进行加权求和,来增强特定方向的信号并抑制其他方向的干扰。本文介绍了两种基于 Capon 和信号子空间的变形算法,即最小方差无失真响应 (MVDR) 算法和最小范数算法,用于实现波束形成。这些算法通过优化波束形成权重向量,来最小化波束形成输出的方差或范数,从而提高波束形成性能。引言波束形成在雷达、声纳、通信和医学成像等众多应用中至关重要。它可以增强目标信号,抑制干扰和噪声,提高系统性能。
文章浏览阅读3.4w次。转自:http://www.linuxidc.com/Linux/2017-07/145335.htm使用Ubuntu开发已经有些时间了。写下这篇文章,希望记录下这一年的小小总结。使用Linux开发有很多坑,同时也有很多有趣的东西,可以编写一些自动化脚本,添加定时器,例如下班定时关机等自动化脚本,同时对于服务器不太了解的朋友,建议也可以拿台Linux来实践下,同时Ubuntu在Androi_ubuntu开发推荐软件
文章浏览阅读2.2k次。一,问题 nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递到应用程序中。二,解决 Nginx服务器增加转发配置 proxy_set_header Host $host;_nginx获取到的是交换机的ip
文章浏览阅读1.4k次。Wireshark TCP数据包跟踪 还原图片 WinHex简单应用 _wireshark抓包还原图片
文章浏览阅读1.5k次。Win8下安装VS2012时,蓝屏,报错WHEA_UNCORRECTABLE_ERROR(P.S.新的BSOD挺有创意":("),Google之,发现[via]需要BIOS中禁用Intel C-State,有严重Bug的嫌疑哦原因有空再看看..._win8.1 whea_uncorrectable_error蓝屏代码
文章浏览阅读919次,点赞21次,收藏22次。科大讯飞是一家专业从事智能语音及语音技术研究、软件及芯片产品开发、语音信息服务的软件企业,语音技术实现了人机语音交互,使人与机器之间沟通变得像人与人沟通一样简单。语音技术主要包括语音合成和语音识别两项关键技术。此外,语音技术还包括语音编码、音色转换、口语评测、语音消噪和增强等技术,有着广阔的应用。_科大讯飞培训案例
文章浏览阅读4.7k次。Perl是一个高阶程式语言,由 Larry Wall和其他许多人所写,融合了许多语言的特性。它主要是由无所不在的 C语言,其次由 sed、awk,UNIX shell 和至少十数种其他的工具和语言所演化而来。Perl对 process、档案,和文字有很强的处理、变换能力,ActivePerl是一个perl脚本解释器。其包含了包括有 Perl for Win32、Perl for ISAPI、PerlScript、Perl。_perl下载