html中如何使用input表单隐藏域？

1. 项目需求：

点击下面日期筛选，只显示相应条件的金额，其他条件的金额隐藏，就类似选项卡的效果，点击标签内容切换

2. 目的：

在不影响页面的情况下通过input隐藏域存储值；可以通过点击事件，获取隐藏域的值，更改p标签的值

3. 什么是input隐藏域？

基本语法

＜input type="hidden" name="..." value="..."＞

属性解释：
type=”hidden” 定义隐藏域；
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；这里我们定义的是id，也是独一无二的
value属性定义隐藏域的值
例如：＜input type=”hidden” id=“input_1_3” value=”6135”＞

其实就是隐藏域不在前台显示，用户看不到，跟表单元素一样，有名字有值

4. input隐藏域的使用

html
点击事件里需要传两个参数 id代表是充值金额还是提现总额，type代表充值总额里的今日或者昨日等等

<div class="col-sm-2" style="width:calc(calc(100% - 72px)/5);background: #3B7DDD; padding: 0;"><div class="bgColor"><div class="cardCon"><p class="con-data" id="member">123,564,544</p><small class="con-name">注册会员(人)</small><input type="hidden" id="input_1_1" value="123,564,544"/><input type="hidden" id="input_1_2" value="63,254,549"/><input type="hidden" id="input_1_3" value="613,564,394"/><input type="hidden" id="input_1_4" value="123,564,544"/><input type="hidden" id="input_1_5" value="613,564,394"/></div><div class="divider"></div><ul class="dateList"><li style="background-color:#fff;color:#333;" id="li_1_1" onclick="click_top(1,1)">今日</li><li id="li_1_2" onclick="click_top(1,2)">昨日</li><li id="li_1_3" onclick="click_top(1,3)">本周</li><li id="li_1_4" onclick="click_top(1,4)">本月</li><li id="li_1_5" onclick="click_top(1,5)">总</li></ul></div></div>

css

.bgColor{min-height: 120px;}
.dateList{ width: 70%;border-radius: 0 0 4px 4px; height: auto; background: rgba(255, 255, 255, 0.1); display: flex; list-style: none; padding: 0; cursor: pointer; margin: 0 12px 9px 12px; margin-left: auto; }
.dateList li{  width: 25%;display: flex;justify-content: center;align-items: center;color: #fff; transform: scale(0.9); font-size: 12px; padding: 2px;}
.cardCon{color: #fff;  padding: 17px 12px 10px 12px;}
.con-data { margin: 0; font-size:18px}
.con-name { margin: 0; transform: scale(0.9); transform-origin: left; }
.divider {width: 100%;height: 1px;background: rgba(255, 255, 255, 0.2); margin: 9px 0;}

<script>function click_top(id,type){if(id == 1){var p_id = "member";}else if(id == 2){var p_id = "recharge_money";}else{var p_id = "withdraw_money";}var dom_id = id + '_'+ type;//获取li的标签，修改背景颜色$("#li_"+ dom_id).siblings().removeAttr("style"); $("#li_"+ dom_id).css({"background-color":"#fff","color":"#333"});//获取input的值，然后赋值即可var value = $("#input_"+ dom_id).val();$("#"+ p_id).text(value);}
</script>

具体隐藏域解释可参考：
【html标签表单隐藏域】input表单隐藏域及其使用方法

html中如何使用input表单隐藏域？相关推荐

表单中隐藏域的html代码是,JS中input表单隐藏域及其使用方法_心病_前端开发者...
一.表单隐藏域隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式: <input ...
input值不可变、隐藏input(表单隐藏域)
input标签值不可变.隐藏标签一.值不可变方法1:readonly 方法2:disabled readonly 和 disabled的区别: 二.隐藏\标签(表单隐藏域) 一.值不可变在写前端 ...
java获取表单隐藏域的值,Servlet中使用表单隐藏域
Servlet中使用表单隐藏域表单隐藏域也是一种会话跟踪技术. 如果使用了"表单隐藏域",将使用一个隐藏(不可见)文本域来维护用户的状态. 在这种情况下,我们将信息存储在表单的隐 ...
【HTML】表单隐藏域hidden
1.什么是隐藏域隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 2.怎么创建隐藏域 HTML ...
form表单隐藏域有什么作用
隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的.当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上. 代码格式:在form表单中写如下代码 < ...
Servlet会话管理一（URL重写和表单隐藏域）
会话可以简单的理解为客户端用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器的整个过程称为一个会话.即一个客户端用户和服务器端进行通讯的过程,也是客户端和服务器端之间的数据传 ...
php修改隐藏域非法提交,PHP get、post变量放在表单隐藏域示例
搜索热词 form里可以防止隐藏控件hidden,用来防止那些不希望让用户看到的信息,这个类可以把get和post里的变量放到hidden控件里,不用在单独遍历get和post了,PHP把get.po ...
通过表单隐藏域向后台传值
今天怂怂就为大家分享一篇在写毕设的时候遇到一个问题以及如何解决问题的,具有很好的参考价值,希望对大家有所帮助.一起跟随怂怂过来看看吧! 数据库使用数值存储权限(role)这个字段 . 由于项目需求,页 ...
表单隐藏域与display:none
有时候前端进行表单填写是分步骤的,每一步的时候其他步骤相关的表单视图不可见: 针对"不可见",以下有两种处理方式: ①display:none 这种方式呢,比较简单,就是将三个步骤 ...
HttpServlet 会话管理（一）（URL重写表单隐藏域简单示例）
本文代码转载自 <Servlet.JSP和Spring MVC初学指南> 会话管理的目的是记录用户访问的状态, 使得之前的Http访问状态可以被之后的应用直接使用,状态的记录即通过请求传值 ...