表单元素之搭车系

对于表单元素,除了reset元素,只要有name与value都能提交

因为在我们印象中,只有能选择的,能填空的,就是我们要提交的。但浏览器还提供一种机制,让我们能让除了用户自己添加的东西外,还能偷偷地提交“额外”的东西。
这些搭顺风车的东西,目前有三种,input[type=hidden],input[type=submit],input[type=image]

偷偷加的东西,目的是不让用户填这么东西。比如某些报表,它是由多个表单组成,上一页用户提交的东西,下一页还要用户提交,此外还有验证用户合法性的令牌(token),也需要我们偷偷塞到表单里面。

我们可以看一下下表。


        by 司徒正美

            hidden+submit

            hidden+image

                btn

            hidden+button

                xxx

            hidden+reset

我们一一点击,就知道发现什么回事了。

隐藏域就不用说了,它肯定会提交。

submit按扭会携带其自身的name,value提交到后台,这样我们就可以少写一个隐藏域。

image按钮这里写不怎么规范,它其实还要一个src属性,指定一个图片,提交时,地址变成这样的:

http://localhost:8383/avalon/newhtml.html?bbb=eee&submit.x=7&submit.y=8&submit=yyy

image能提交你当时的点击位置,因此在早些年,可以防止机器人刷单刷评论!

如果button标签不指定type值,那么它会默认是submit,其效果与input[type=submit]相同!

reset按钮不会提交,因此没有反应。

此外,总结一下各种提交表单的方式:

  • 点击input[type=submit]
  • 点击input[type=image]
  • 点击button[type=submit]
  • 在文本域或密码域等可以填空的表单元素内回车!
时间: 2024-10-13 20:43:41

表单元素之搭车系的相关文章

表单元素之选择系

选择系特指input[type=radio]与input[type=checkbox], 俗话的单选框与复选框.它们都是 通过checked属性决定是否能提交到后端,在传统框架中,都是将它们序列化成字符串进行提交,但新的MVVM框架, 它们对应的是更语义化的东西.单选框为一个布尔,那么只要将它的name值及选中或选中的布尔(通常为节省字符简化为0或1)提交就行.在复选框 对应一个字符串数组,将数组序列化进行提交. 从上面的描述来看,关键在于checked属性的监听.通常来说,属性变动用chang

第 10 章 表单元素[下]

学习要点: 1.其他元素 2.输入验证 主讲教师:李炎恢 本章主要探讨 HTML5 中表单中剩余的其他元素,然后重点了解一下表单的输入验证功能. 一.其他元素 表单元素还剩下几个元素没有讲解,包括下拉框列表 select.多行文本框 textarea.和 output 计算结果元素. 元素名称 说明 select 生成一个下拉列表进行选择 optgroup 对 select 元素进行编组 option select 元素中的项目 textarea 生成一个多行文本框 output 表示计算结果

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

表单元素

1.单行文本框<input type="text"/>(input 的type 属性的默认值就是"text") <input type = "text" name="名称"/> 以下是单行文本框的主要属性: size:指定文本框的宽度,以字符个数为单位:在大多数浏览器中,文本框的缺省宽度是20个字符. value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击<input type=&q

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML之学习笔记(十)表单元素

html表单元素的基本格式为(必须包含在form标签中) 大致可以分为文本类.按钮类.复选框和单选框.文件选择几类 1.文本类 文本框标签<input type = “text“ />,属性size文本框的宽度.maxlength可输入的最大字节长度.readonly=“readonly”文本只读,无法修改 密码框标签<input type = “password” />,在页面显示为黑色小圆点 隐藏标签(隐藏域)<input type=“hidden” />,不会对页

点击enter回车键实现表单元素切换焦点效果

点击enter回车键实现表单元素切换焦点效果:现在网站都比较追求人性化,比如填写表单的时候,能够实现点击回车就可以切换表单元素的焦点,这样比使用鼠标进行切换更能让人接受,下面就通过代码实例介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://w

jQuery获取Select选择的Text(非表单元素)和 Value(表单元素)(转)

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#selec

JQuery表单元素过滤选择器

此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素(单选框,复选框) 集合元素 selected 选择所有被选中选项元素(下拉列表) 集合元素 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd&q