form表单提交中的input,button,submit
原文链接:http://www.cnblogs.com/shytong/p/5087147.html
1.input[type=submit]
我们直接来看例子:
代码如下:
<form><input name="name"><input type="submit" value="提交"> </form>
其中点击按钮后的url变为?name=222222222。
其中有些值得注意的细节:
- 设置
type=submit
后,输入控件会变成一个按钮,显示的文字为其value
值,默认值是Submit
。 form[method]
默认值为GET,所以提交后会使用GET方式进行页面跳转。input[type]
默认值为text
,所以第一个input
显示为文本框。
input
其实是一个由输入控件改装过来的按钮,这源于Web早期的简陋设计。我们给它设置name
便可以验证这一点:
<input name='btn' value='提交' type='submit'>
提交后的结果为:
注意其中的URL为/?key=foo&btn=ok
。作为按钮的input
控件同时被当做一个表单输入提交给了服务器。 它到底是交互控件还是数据控件呢?定位是有些不清晰。再加上它的样式难以定制、不可作为其他标签的容器, 所以建议不要用input
作为表单提交按钮。
注意:input
的type
属性还可以是button
,这时它只是一个按钮,不会引发表单提交。
(注意:只有name值可以作为与服务器端交互数据的HTML元素在服务器端的标示提交给服务器,而id值不会,这里就涉及到了name和id的区别,具体可以参考:http://blog.csdn.net/tt_twilight/article/details/78408618)
2.button[type=submit]
button
的语义很明确,就是一个按钮不含数据,作用就是用户交互。但它也有type
和value
属性。 type
的默认值是submit
,所以点击一个button
会引起表单提交:
<form><input name='key'><button>确定</button> </form>
注意:如果你在做IE浏览器的兼容,请记住button[type]
在IE中的默认值是button
,这意味着它只是一个按钮而不会引发表单提交。
另外,我们通过设置元素内容的方式来指定button
的文字。这意味着button
是一个容器控件, 其中可以包含任意的HTML标签,同时样式更容易定制。这也是为什么Bootstrap 文档中大量使用button
作为示例的原因之一。
但是,button会很乱。button
可以设置name
和value
。提交表单时,value
会被作为表单数据提交给服务器。 在IE中,甚至会把button
开始与结束标签之间的内容作为name
对应的值提交给服务器。button
和input
的相似还不止于此,button
也可以设置type=reset
,此时点击按钮会导致表单被重置(这还挺有用的)。 w3school给出了如下的示例:
<form action="form_action.asp" method="get">First name: <input type="text" name="fname" />Last name: <input type="text" name="lname" /><button type="submit" value="Submit">Submit</button><button type="reset" value="Reset">Reset</button> </form>
(button中的属性name同样是可以提交的,但是button元素间的内容并不会作为value值,所以如果要显示value值,就要显示设定value属性的值,不然就是空值)
对于button
就不多说了,建议用button
作为交互用的按钮,来提交表单。同时请注意设置type=submit
来兼容IE。
3.回车键提交表单
Enter键是可以提交表单的!但是你可能已经注意到了,并非所有的表单都可以用Enter键来提交。来看HTML2.0 标准:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行的文本输入控件时,用户代理应当接受回车键来提交表单。
“单行”指的是type
为text
而非textarea
,显然在textarea
中回车提交表单是怎样的难以接受。 其实在实践中,有多个单行的input
也可以用Enter提交,比如登录页面。
4.阻止表单提交
阻止表单提交也是一个常见的话题,通常用于客户端的表单验证。通用的办法是设置onsubmit
:
<form οnsubmit="return false;"><input name='key'><input value='ok' type='submit'> </form>
只需要在onsubmit
的一系列语句最后返回false
,便可以阻止它提交。 如果你希望调用一个方法来决定是否阻止提交,记得在此处返回方法的返回值:
<form οnsubmit="return false;"><input name='key'><input value='ok' type='submit'> </form>
form表单提交中的input,button,submit相关推荐
- 关于form表单提交时的坑,submit,submit,submit
关于form表单提交时的坑,submit,submit,submit 说是坑,也是自己的用前端的经验不足,被form表单困扰了一下午.其实当把问题解决后,有一种"TMD竟然是这样,想抽死自己 ...
- 表单提交中的input、button、submit的区别
参考博文:http://www.cnblogs.com/shytong/p/5087147.html 设置type=submit后,输入控件会变成一个按钮,显示的文字为其value值,默认值是Subm ...
- html form 表单提交过滤某些input元素
给input 的form属性设置不同的值 <!DOCTYPE HTML> <html> <body><form action="/example/h ...
- 解决Form表单提交文件后台获取为null的情况
项目想做一个上传文件的功能模块,但是发现后台获取文件始终为null,而且在form表单上也配置好了需要的action属性.method属性和enctype="multipart/form-d ...
- html中form表单提交和阻止表单提交的细节
如何阻止表单提交 HTML禁止表单提交方法 源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...
- action无法传参数给html页面,HTML 解决form表单提交时,action url中参数无效问题
这篇文章主要为大家详细介绍了HTML 解决form表单提交时,action url中参数无效问题,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...
- laravel中的form表单提交
提交方法:form表单提交只能提交post 和get ,如果你想提交其他的提交方法,就要如图所示 转载于:https://www.cnblogs.com/luxia/p/9001310.html
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show():# 获取数据库所有文章数据,得到一个个对象res=A ...
- vue form表单提交动态数据
项目vue-cli搭建 需求为:vue页面跳转至第三方的支付页面 操作流程为:点击确认按钮时得到得到第三方网页的url和参数信息,以form表单的post方式提交 尝试了N种方法,都不可以成功完成逻辑 ...
- 前端页面与form表单提交:代码分享
今天分享下"前端页面与form表单提交:代码分享"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习 ...
最新文章
- 设计赋能,数联杭温!2020温州“市长杯”·数字设计(杭州)专项赛开始报名啦!...
- tcptracerte参数_TCP/IP详解学习笔记(4)-ICMP协议,ping和Traceroute【转】
- ArcGIS 10.7如何获取矢量多边形所有折点的坐标(平面坐标和经纬度坐标)?
- P3403 跳楼机 同余最短路
- fastadmin model关联模型 关联查询问题
- 点击头像上传文件的效果
- 苏浪浪 201771010120 第三周 Java基本程序设计总结
- Texar安装、Textgenrnn安装
- 编写build.xml的12个原则
- 苹果电脑是“监狱”、弃用 Ubuntu,GNU 创始人斯托曼谈自由软件运动现状
- JDK 7(Java SE Development Kit)全平台全版本安装包免费下载
- (转)最大流最小割定理
- 【保姆级】-spotfire服务端、客户端安装部署(V7.8)
- git如何查看缓存区文件内容_[暂存盘已满怎么解决]git暂存区的理解
- 服务器CPU和普通CPU有什么区别?常用的服务器有六大区别
- MyBatis 关于order by失效
- linux 从samba拷贝,提升samba复制速度,树莓派外接硬盘读取从40M到110M(2020-11-15更新)...
- 修改本地的host文件
- truncate()函数
- 第 13 周 / 编程题 - 新兵队列训练(选做)
热门文章
- 实现ViewPager动态添加和删除页面
- typedef struct LNode* list和struct LNode有什么区别?
- 计算机专业文献阅读报告,文献阅读报告范本.doc
- 201671030123+词频统计软件项目报告
- C51单片机实验——中断实验
- 实验01 使用网络协议分析仪Wireshark分析数据链路层帧结构实验报告
- FC协议监控卡(FC协议分析仪),FC Monitor
- matlab保存pdf图片太大,matlab中的图片保存方法精选.pdf
- 【CAD】CAD插件
- 商业方向的大数据专业_大数据行业5个职位方向