首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )

文章目录 一、按钮表单 1、普通按钮 2、提交按钮 3、重置按钮 4、图片按钮 二、文件域 一、按钮表单 ---- 1、普通按钮 将 标签 的 type 属性设置为 button..."> 小时效果 : 2、提交按钮 将 标签 的 type 属性设置为 submit , 就可以将该 表单组件 设置为 提交按钮 类型表单...将 标签 的 type 属性设置为 reset , 就可以将该 表单组件 设置为 重置按钮 类型表单 ; 提交按钮 默认显示的文本信息是 " 重置 " , 通过 value 属性...image , 就可以将该 表单组件 设置为 图片按钮 类型表单 ; 图片按钮需要设置 src 属性 , 设置一个 图片文件的 绝对或者相对路径 ; 展示效果 : 二、文件域 ---- 将 标签 的 type 属性设置为 file , 就可以将该 表单组件 设置为

8K40
您找到你想要的搜索结果了吗?
是的
没有找到

图片代替提交重置按钮

为了整个界面美观,我们需要对提交重置按钮美化一番,可是无论用什么CSS样式定义按钮,都很难达到满意的效果,只得用JS+图片的方式进行处理,下边我是总结出的三种方法:   1、用图片代替提交重置按钮,...  2、给1的图片加上style,用于弥补方法1鼠标移到图片上无反应,未能给客户好的浏览体验 function fsubmit(obj){   obj.submit(); } function freset...(obj){   obj.reset(); }  姓名:   3、用图片代替提交重置按钮,并加上链接,效果同2 function fsubmit(obj){   obj.submit(); }...由于默认图像域点击时都是提交表单,因而要进行适当的处理: function fsubmit(obj){   obj.submit(); } function freset(obj){   obj.reset...(); }  姓名: 要注意的是JS表单提交重置事件后必须加(),如submit()reset()

4K20

异步提交表单_js异步提交表单并回调

异步提交表单 异步提交表单的步骤 所谓异步提交表单,就是不再使用表单提交按钮实现表单提交功能,而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下: 获取表单及所有表单组件对应的数据值。...将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。 通过Ajax异步交互方式提交表单。...info, success: function(data){ console.log(data); } }); Jetbrains全家桶1年46,售后保障稳定 异步提交表单的案例...= $("#password"); $form.bind("submit", function (event) { // 阻止表单默认的同步提交 event.preventDefault(); /.../ 表单序列化 - 根据表单默认同步提交获取数据的方式 // var data = $("form").serialize(); // console.log(data); var data = $("

11.7K10

提交到不同URL的表单按钮

-- inputs and stuff --> 当你提交表单,它会跳转到/submit。...然后你需要 另一个 提交按钮,跳转到不同的URL。为什么需要这样做不重要,任何事都有原因,毕竟网页包含太多东西。 我找到了一些人们尝试处理这个问题的其它方法。...其中一种方法是放弃提交到不同的URL,但是给每个提交按钮一个相同的name,不同的value,然后当需要处理不同问题时检查value值。...它是formaction属性,你可以直接放在提交按钮里,它会覆盖表单自己的action。...---- 往期精选文章 ES6中一些超级好用的内置方法 浅谈web自适应 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全 WEB前端性能优化常见方法

2K30

firefox中用js提交表单

表单提交在 firefox 浏览器下是不起作用的 2....用.submit () 方法提交表单 3).button 的 name/id 绝对不能命名为”submit” 4).form 中所有的组件(按钮,文本框等)的 name/id 也不能命名为”submit...” # 当提交按钮的 name 或者 id 为 submit 时候,用 js 提交表单表单名.submit () 时候会报一个错误,提示对象不支持此属性或办法。...那么,请问为什么 当提交按钮的 name 或者 id 为 submit 或者 action 的时候 js 提交表单会报错呢?这难道是 一个 bug? 高手们请指教。。。。...我在项目中发现 与 得出的效果截然不同, 谁能告诉我这两着有合不同 我又如何能用图片来替代原有的提交按钮 是说这是一个按钮,它的是一个提交按钮。当点击它时,它会自动将它所在的表单进行提交.

7.1K20

js – form表单提交不刷新

大家已经发现了, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法: 利用iframe 我们可以利用一个隐藏的iframe来实现, 主要是我们把提交目标放到一个隐藏的..."the_iframe" style="display:none;"> 利用onsubmit事件 我们还可以绑定onsubmit事件(用jq的话是submit()), 在submit按钮效果触发之前我们就把数据提交了..., 然后我们return false(让submit这次的点击触发事件失效, 否则表单又会提交一次, 并且刷新页面) 我们可以这样: ====== 如果你用原生js的话 html代码: js代码: function post_data(){ // ajax数据提交代码 // ........" /> js代码: $(document).ready(function() { $('#err_form').submit(function() { //这次我们这么绑定 var

14.3K10

基于Http原理实现Android的图片上传表单提交

但当这种方法出现问题,服务器根据文件名这个表单中的字段来判定是否接收到文件,我上面那种简单的方法从而使得每次服务器反馈说没有接收到图片文件,从而发送失败。...比如对于C#的表单提交,简简单单几句话搞定: WWWForm form = new WWWForm(); form.AddField("frameCount", Time.frameCount.ToString...表单信息 包含Content-Disposition、name、filenameContent-Type等四个表单变量,必须要填写正确的字段,web服务器才可以对相关变量进行正确解析 3....所以需要采用HttpURLConnection,但是这种方案没有成型的表单提交接口,所以在上传图片时,服务器对表单解析很容易出问题。...最后采用Firefox浏览器来分析请求协议: 图片中requestload的内容一目了然,所以就知道如何去构造图片+表单提交的request内容了,所以这次非常感谢FireFox这种强大的工具,帮忙定位核心问题

5.5K00

Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据

表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。...jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子代码。 [html] view plain copy print ?...设置三秒后提交按钮 显示 }) 附:其他的实现方法,也使用了js 第一种: [html] view plain copy...后台代码控制表单提交有一个好的办法就是使用session, 具体可以参考下面这篇博文: JavaWeb学习总结(十三)——使用Session防止表单重复提交 http://www.cnblogs.com.../xdp-gacl/p/3859416.html 其实后台控制表单重复提交的原理: (1)在表单提交页面生成一个唯一的token;token可以保存在session中。

3.9K20

Button按钮为什么无缘无故会提交form表单

我的form表单里有好几个Button按钮,每个按钮有不同的功能,可是这些按钮居然都有提交功能,真是把我惊呆了 <button class="btn btn-info " οnclick="do_collection...()" title="非Guest用户可收藏">收藏 这个问题困惑了我好几天一直百思不得其解,然后我就去查了一下button按钮的属性,才发现原来是因为我没有指定Button按钮的type...属性值,type有三个可选属性:Button,submit,reset,而Button按钮的type属性默认值是submit ,所以在没有指定type属性的情况下,点击Button按钮触发提交form表单就合情合理了...,所以要想此按钮提交,可以指定Button按钮的type属性值为Button <button class="btn btn-info " type="button" οnclick="do_collection

67430
领券