<input>标签中属性"type=hidden"作用

本文介绍了隐藏域的基本语法及其多种用途,包括收集用户信息、区分不同的表单提交按钮、协调多个表单之间的交互、存储JavaScript全局变量及实现父子窗口间的通讯。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用(隐藏只是在网页页面上面不显示输入框,但是虽然隐藏了,还是具有form传值功能。一般用来传值,而不必让用户看到。)

基本语法

<input type="hidden" name="field_name" value="value">

这里写图片描述
作用

1.隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

2.有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey,等等.当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。

3.有些时候一个form里有多个提交按钮,怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢?我们就可以写一个隐藏域,然后在每一个按钮处加上οnclick=”document.form.command.value=”xx”“然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。

4.有时候一个网页中有多个form,我们知道多个form是不能同时提交的,但有时这些form确实相互作用,我们就可以在form中添加隐藏域来使它们联系起来。

5.JavaScript不支持全局变量,但有时我们必须用全局变量,我们就可以把值先存在隐藏域里,它的值就不会丢失了。

6.比如按一个按钮弹出四个小窗口,当点击其中的一个小窗口时其他三个自动关闭.可是IE不支持小窗口相互调用,所以只有在父窗口写个隐藏域,当小窗口看到那个隐藏域的值是close时就自己关掉。

<!DOCTYPE html> <!--STATUS OK--><html> <head><meta http-equiv=content-type content=text/html;charset=utf-8><meta http-equiv=X-UA-Compatible content=IE=Edge><meta content=always name=referrer><link rel=stylesheet type=text/css href=https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/bdorz/baidu.min.css><title>百度一下,你就知道</title></head> <body link=#0000cc> <div id=wrapper> <div id=head> <div class=head_wrapper> <div class=s_form> <div class=s_form_wrapper> <div id=lg> <img hidefocus=true src=//www.baidu.com/img/bd_logo1.png width=270 height=129> </div> <form id=form name=f action=//www.baidu.com/s class=fm> <input type=hidden name=bdorz_come value=1> <input type=hidden name=ie value=utf-8> <input type=hidden name=f value=8> <input type=hidden name=rsv_bp value=1> <input type=hidden name=rsv_idx value=1> <input type=hidden name=tn value=baidu><span class="bg s_ipt_wr"><input id=kw name=wd class=s_ipt value maxlength=255 autocomplete=off autofocus=autofocus></span><span class="bg s_btn_wr"><input type=submit id=su value=百度一下 class="bg s_btn" autofocus></span> </form> </div> </div> <div id=u1> <a href=http://news.baidu.com name=tj_trnews class=mnav>新闻</a> <a href=https://www.hao123.com name=tj_trhao123 class=mnav>hao123</a> <a href=http://map.baidu.com name=tj_trmap class=mnav>地图</a> <a href=http://v.baidu.com name=tj_trvideo class=mnav>视频</a> <a href=http://tieba.baidu.com name=tj_trtieba class=mnav>贴吧</a> <noscript> <a href=http://www.baidu.com/bdorz/login.gif?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2f%3fbdorz_come%3d1 name=tj_login class=lb>登录</a> </noscript> <script>document.write('<a href="http://www.baidu.com/bdorz/login.gif?login&tpl=mn&u='+ encodeURIComponent(window.location.href+ (window.location.search === "" ? "?" : "&")+ "bdorz_come=1")+ '" name="tj_login" class="lb">登录</a>'); </script> <a href=//www.baidu.com/more/ name=tj_briicon class=bri style="display: block;">更多产品</a> </div> </div> </div> <div id=ftCon> <div id=ftConw> <p id=lh> <a href=http://home.baidu.com>关于百度</a> <a href=http://ir.baidu.com>About Baidu</a> </p> <p id=cp>©2017 Baidu <a href=http://www.baidu.com/duty/>使用百度前必读</a>  <a href=http://jianyi.baidu.com/ class=cp-feedback>意见反馈</a> äº¬ICP证030173号  <img src=//www.baidu.com/img/gs.gif> </p> </div> </div> </div> </body> </html>
07-15
``` <%@ page language="java" import="test_package.*" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../style/certificate.css"> </head> <body> <% List<test_information> list = (List<test_information>)session.getAttribute("date"); %> <div class = "tit">查看凭证</div> <div class = "Ribbon"> <table> <tr> <td style="white-space: nowrap;"> <!-- 按钮1 --> <input type="button" value="传统记账" class="R_button"> <!-- 表单2 - 导出 --> <form action="" class="inline-form"> <input type="submit" value="导出" class="R_button"> </form> <!-- 表单3 - 打印 --> <form id="printForm" action="white.jsp" method="post" class="inline-form"> <input type="hidden" id="selectedTelsHiddenField" name="telsToPrint"> <input type="submit" value="打印" onclick="return submitSelectedTels();" class="R_button"> </form> <!-- 按钮4 --> <input type="button" value="模板" onclick="template.show()" class="R_button"> </td> <td> <input type = "text" name = "search_name"> <input type = "button" value = "搜索"> </td> </tr> </table> </div> <div class="body"> <table class="cer" > <% for(test_information news:list) { %> <!-- 将每条记录分为两列展示 --> <tr> <td class="zero_box"> <input type="checkbox" name="selectedTels" value="<%=news.getTel()%>" onchange="updateSelection(this)" style = "zoom : 300%"> </td> <td class="first_box"> <%= news.getMaterial() %> <br/> <%= news.getStart_time() %> </td> <td class="second_box"> <%= news.getWashing_method() %> <br/> <%= news.getPrice() %> </td> <td class="third_box"> <form action =""> <input name = "id" value ="<%=news.getTel() %>" type = "hidden"> <input type ="submit" class = "func_button" value = "税费" ><br> <input type ="submit" class = "func_button" value = "查看凭证" ><br> <input type ="submit" class = "func_button" value = "删除凭证" > </form> <br/> </td> </tr> <% } %> </table> <div style="display:none;" id="printArea"></div> </div> <script> let selectedTelsArray = []; function updateSelection(el) { if (el.checked && !selectedTelsArray.includes(el.value)) { // 如果当前被选中,则加入集合 selectedTelsArray.push(el.value); } else { // 否则移除该元素 const indexToRemove = selectedTelsArray.indexOf(el.value); if (indexToRemove !== -1) { selectedTelsArray.splice(indexToRemove, 1); } } console.log(selectedTelsArray); // 输出调试信息 } // 提交之前设置 hidden field 的值 function submitSelectedTels() { document.getElementById('selectedTelsHiddenField').value = JSON.stringify(selectedTelsArray); return true; } </script> </body> </html>```为什么搜索框和搜索按钮未对齐
03-18
<div class="container" id="content"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-5 col-lg-6 hidden-xs hidden-sm"> <h1 class="txt-color-red login-header-big">VisionTool MES 生产制造系统</h1> <div class="hero"> <img class="pull-right display-image" style="width: 380px;" alt="" src="/staticResource/vendor/img/demo/loading.jpg"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4"> <div class="well no-padding"> <form class="smart-form client-form" id="login-form" action="index.html"> <header>系统登录认证</header> <fieldset> <section> <label class="label username">用户名</label> <label class="input"> <i class="icon-append fa fa-user"></i> <input name="username" id="username" type="username" placeholder="用户名"> <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i>请输入用户名</b></label> </section> <section> <label class="label">密码</label> <label class="input"> <i class="icon-append fa fa-lock"></i> <input name="password" id="password" type="password" placeholder="密码"> <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> 请输入密码</b> </label> </section> <section> <label class="label">班次</label> <div class="dropdown bootstrap-select bs3"><select name="shiftClass" tabindex="-98" class="selectpicker" id="shiftClass"></select><button title="Nothing selected" class="btn dropdown-toggle btn-default bs-placeholder" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="bs-select-1" type="button" data-toggle="dropdown" data-id="shiftClass"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div> </div><span class="bs-caret"><span class="caret"></span></span></button><div class="dropdown-menu open"><div tabindex="-1" class="inner open" id="bs-select-1" role="listbox"><ul class="dropdown-menu inner " role="presentation"></ul></div></div></div> </section> <div class="note"> <a onclick="alert('请联系信息管理部:') ">忘记密码了?</a> </div> </fieldset> <footer> <button class="btn btn-primary" id="btnlogin" type="button">登录</button> </footer> </form> </div> </div> </div> </div> 这里面是否包含CSRF令牌信息
06-25
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 让网页的宽度自动适应手机屏幕的宽度--> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>图书管理</title> <!--引入本地css文件--> <link rel="stylesheet" href="../common/content.css"/> <link rel="stylesheet" href="../common/table.css"/> <link rel="stylesheet" href="../common/jquery-confirm.css"/> </head> <body> <form id="search_form"> <span class="search"> <label for="bookname">请输入图书信息</label> <input type="text" id="bookname" name="bookname" /> </span> <input type="button" value="查询" onclick="bookList()"/> </form> <input type="button" value="新增" onclick="openBookADDModel()"/> <table class="bookList"> <thead> <tr> <th>ID</th> <th>图书类别</th> <th>图书名称</th> <th>作者</th> <th>出版社</th> <th>库存</th> <th>操作</th> </tr> </thead> </table> <!--模态框 新增用户--> <div class="book-add-model-box"> <div class="book-add-content"> <div class="book-add-title"> <span>图书新增</span> <i class="book-add-close">×</i> </div> <form id="add_form"> <div class="form-input"> <label for="publisher">请输入出版社</label> <input type="text" id="publisher" name="publisher"/> </div> <div class="form-input"> <label for="num">请输入图书数量</label> <input type="text" id="num" name="num"/> </div> <div class="form-input"> <label for="typename">请选择图书类别</label> <select id="typename" class="typename" name="typename"> </select> </div> <input type="button" value="提交" onclick="addBook()"/> </form> </div> </div> <!--模态框 用户信息修改--> <div class="book-update-model-box"> <div class="book-update-content"> <div class="book-update-title"> <span>图书信息修改</span> <i class="book-update-close">×</i> </div> <form id="update_form"> <input type="hidden" name="bid" /> <div class="form-input"> <label for="bookname">请输入图书名称</label> <input type="text" id="bookname" name="bookname"/> </div> <div class="form-input"> <label for="author">请输入作者</label> <input type="text" id="author" name="author"/> </div> <div class="form-input"> <label for="publisher">请输入出版社</label> <input type="text" id="publisher" name="publisher"/> </div> <div class="form-input"> <label for="num">请输入图书库存</label> <input type="text" id="num" name="num" /> </div> <div class="form-input"> <label for="times">请输入被借阅次数</label> <input type="text" id="times" name="times" /> </div> <div class="form-input"> <label for="typename">请选择图书类别</label> <select id="typename" class="typename" name="typename"> </select> </div> <input type="button" value="提交" onclick="upadateBook()"/> </form> </div> </div> <script src="../common/book_model.js"></script> <script src="../common/jquery-3.6.1.min.js"></script> <script src="../common/jquery-confirm.js"></script> <script> window.onload = function(){ bookList(); $.post( "typeList.php", function(res){ //将PHP返回的JSON字符串解析成对象 let typename=$.parseJSON(res); let typeList=document.querySelectorAll(".typename"); let typeContent=""; for(let i=0;i<typename.length;i++){ typeContent +="<option value=\""+typename[i].tid+"\">"+typename[i].typename+"</option>"; } typeList[0].innerHTML=typeContent; typeList[1].innerHTML=typeContent; } ); } let bookList=function(){ var bookname=$('#search_form input[name=bookname]').val(); $.post( "../common/bookList.php", {"bookname":bookname}, function(res){ var books=$.parseJSON(res); //根据类选择器获取标签对象 let bookList=document.querySelector(".bookList"); let content="<thead><tr><th>ID</th><th>图书类别</th><th>图书名称</th><th>作者" +"</th><th>出版社</th><th>库存</th><th>操作</th></tr></thead>"; for(let i=0;i<books.length;i++){ content += "<tbody><tr><td>"+books[i].bid+"</td><td>" +books[i].typename+"</td><td>" +books[i].bookname+"</td><td>" +books[i].author+"</td><td>" +books[i].publisher+"</td><td>" +books[i].num+"</td><td>" +"<input type=\"button\" value=\"修改\" onclick=\"openBookUpdateModel("+books[i].bid+")\" />" +"<input type=\"button\" value=\"删除\" onclick=\"deleteBook("+books[i].bid+")\" /></td></tr>"; } content +="</tbody>"; //把content内容填充到table里面 bookList.innerHTML = content; } ); } function addBook(){ if(confirm("是否添加?")){ var bookname=$('#add_form input[name = bookname]').val(); var author=$('#add_form input[name = author]').val(); var publisher=$('#add_form input[name = publisher]').val(); var num=$('#add_form input[name = num]').val(); var tid=$('#add_form select[name = typename]').val(); $.post( "addBook.php", {"bookname":bookname,"author":author,"publisher":publisher,"num":num,"tid":tid}, function(res){ //alert(res) //将PHP返回的JSON字符串解析成对象 var obj=$.parseJSON(res); if(obj.success){ $.confirm({ title:'添加提示!', content:obj.msg, buttons:{ "确认":function(){ window.location = 'bookManage.html'; } } }); }else{ $.alert(obj.msg); } } ); } } let deleteBook = function(bid){ if(confirm("是否删除")){ $.post( "deleteBook.php", {"bid":bid}, function(res){ //alert(res); var obj=$.parseJSON(res); if(obj.success){ $.confirm({ title:'删除提示!', content:obj.msg, buttons:{ "确认":function(){ window.location = 'bookManage.html'; } } }); }else{ $.alert(obj.msg); } } ); } } function upadateBook(){ if(confirm("是否修改?")){ var bid = $('#update_form input[name = bid]').val(); var bookname=$('#update_form input[name = bookname]').val(); var author=$('#update_form input[name = author]').val(); var publisher=$('#update_form input[name = publisher]').val(); var num=$('#update_form input[name = num]').val(); var times=$('#update_form input[name = times]').val(); var tid=$('#update_form input[name = typename]').val(); $.post( "updateBook.php", {"bid":bid,"bookname":name,"author":author,"publisher":publisher,"num":num,"times":times,"tid":tid}, function(res){ //alert(res); var obj=$.parseJSON(res); if(obj.success){ $.confirm({ title:'更新提示!', content:obj.msg, buttons:{ "确认":function(){ window.location = 'bookManage.html'; } } }); }else{ $.alert(obj.msg); } } ); } } </script> </body> </html>
06-09
<think>好的,我现在需要帮助用户解决关于HTML模板中表单布局和字段定义的问题。用户提到想寻求示例,所以我应该提供具体的代码例子和说明。 首先,我得回忆一下HTML表单的基本结构。通常,表单使用<form>标签,包含各种输入字段如text、email、password等。布局方面,用户可能需要使用CSS或框架来美化表单,比如Bootstrap。但用户可能只需要基础的HTML和CSS示例,所以我应该先给出一个简单例子,再逐步增加复杂度。 然后,考虑到用户提到了模板,可能是在使用类似Django、Flask等后端框架,所以可能需要结合模板引擎的例子。例如,在Flask中使用Jinja2模板。不过用户没有明确说明,所以最好保持通用,同时提一下如何与后端结合。 接下来,我需要检查提供的引用内容是否有相关帮助。引用[1]提到了处理表单数据和模板执行,这可能涉及到后端如何接收表单数据。引用[2]关于创建应用显示URL输入和协议选择,这部分可能与表单中的字段类型有关,比如下拉菜单和按钮。这些引用可以作为示例的补充,比如在表单中添加协议选择的菜单。 然后,我应该组织回答的结构。先给出一个基础的HTML表单示例,包含常用字段和布局,使用<div>或<fieldset>进行分组。接着,介绍如何使用CSS进行样式美化,比如Flexbox或Grid布局。然后,如果需要更复杂的布局,可以引入Bootstrap的示例。最后,结合模板引擎的例子,比如在Jinja2中使用变量填充表单值。 还要注意用户可能需要的表单验证,比如required属性或正则表达式模式。此外,文件上传字段也是常见的需求,应该包含进去。引用[3]和[4]可能不太相关,但引用[1]和[2]可以作为后端处理和前端组件设计的参考。 最后,生成相关问题,帮助用户深入了解表单布局和字段定义的其他方面,比如响应式设计、验证方法、框架集成等。确保回答结构清晰,分步骤说明,代码示例正确,并且引用相关的站内引用在适当的位置。</think>### HTML模板表单布局与字段定义示例 以下是基础HTML表单布局的逐步实现方法,包含常用字段定义和布局技巧: #### 1. 基础表单结构 ```html <form action="/submit" method="POST"> <!-- 字段分组 --> <fieldset> <legend>用户信息</legend> <!-- 文本输入 --> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required minlength="4"> </div> <!-- 密码输入 --> <div class="form-group"> <label for="pwd">密码:</label> <input type="password" id="pwd" name="password" pattern="(?=.*\d)(?=.*[a-z]).{8,}"> </div> </fieldset> <!-- 下拉选择 --> <div class="form-group"> <label>协议类型: <select name="protocol"> <option value="http">HTTP</option> <option value="https">HTTPS</option> </select> </label> </div> <!-- 文件上传 --> <div class="form-group"> <label>上传头像: <input type="file" name="avatar" accept="image/*"> </label> </div> <!-- 提交按钮 --> <button type="submit">提交表单</button> </form> ``` (包含协议选择字段的定义参考了前端组件的实现方式[^2]) #### 2. CSS布局样式示例 ```css form { max-width: 600px; margin: 20px auto; padding: 20px; background: #f8f9fa; } .form-group { margin-bottom: 15px; display: flex; align-items: center; } label { flex: 0 0 120px; margin-right: 10px; } input, select { flex: 1; padding: 8px; border: 1px solid #ddd; } ``` #### 3. Bootstrap增强版示例 ```html <form class="container mt-4"> <div class="row mb-3"> <label class="col-sm-2 col-form-label">电子邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" name="email" placeholder="name@example.com"> </div> </div> <div class="row mb-3"> <label class="col-sm-2 col-form-label">服务协议</label> <div class="col-sm-10"> <select class="form-select" name="agreement"> <option selected>选择协议...</option> <option value="1">个人用户协议</option> <option value="2">企业用户协议</option> </select> </div> </div> </form> ``` #### 4. 模板引擎集成示例(Jinja2) ```html <form action="{{ url_for('submit') }}" method="POST"> <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"> <div class="form-group"> <label>服务器地址</label> <input type="url" name="server_url" value="{{ form_data.url if form_data else '' }}"> </div> </form> ``` (表单数据处理方式参考了模板执行机制[^1])
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值