Introduction and examples of hidden fields in HTML

Introduction and examples of hidden fields in HTML
Basic syntax:

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

effect:

1 Hidden fields are invisible to users on the page. The purpose of inserting hidden fields in a form is to collect or send information for use by the program that processes the form. When the viewer clicks the Send button to send the form, the information in the hidden fields is also sent to the server.

2 Sometimes we need to give users some information to confirm their identity when submitting a form, such as session key, etc. Of course, these things can also be achieved using cookies, but using hidden fields is much simpler. And there will be no trouble of browser not supporting or users disabling cookies.

3 Sometimes there are multiple submit buttons in a form. How can the program tell which button the user pressed to submit? We can write a hidden field, and then add onclick="document.form.command.value="xx"" to each button. Then after we receive the data, we can check the value of command first to know which button the user pressed to submit it.

4 Sometimes there are multiple forms on a web page. We know that multiple forms cannot be submitted at the same time, but sometimes these forms do interact with each other. We can add hidden fields in the form to connect them.

5 JavaScript does not support global variables, but sometimes we have to use global variables. We can store the value in a hidden field first, and its value will not be lost.

6 Another example is that four small windows pop up when a button is pressed, and when one of the small windows is clicked, the other three are automatically closed. However, IE does not support small windows calling each other, so you can only write a hidden field in the parent window, and when the small window sees that the value of the hidden field is close, it will close itself.

Example: Use hidden to add 1 to the number when clicking the submit button

Value auto-increment.htm

Copy code
The code is as follows:

<form action="value increment.ashx" method="post">
<input type="hidden" name="_viewstate" value="a" />
<input type="hidden" name="_div" value="@n" />
<!-- <input name="txt" type="text" value="@value" />-->
<div>@n</div>
<input type="submit" value="click" />
</form>

Using a general handler implementation

Value auto-increment.ashx

Copy code
The code is as follows:

int n = 0;
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/html";

string path = context.Request.MapPath("value increment.htm");
string html = System.IO.File.ReadAllText(path);
// Check if the page is loaded for the first time
string viewstate = context.Request.Form["_viewstate"];
if (!string.IsNullOrEmpty(viewstate))
{
//Click the post button
//Get the value of the hidden field
string s = context.Request.Form["_div"];
if (int.TryParse(s, out n))
{
n++;
html = html.Replace("@n",n.ToString());
}
}
else
{
//The page is loaded for the first time, assign values ​​to div and the hidden fields corresponding to div
html = html.Replace("@n", n.ToString());
}
context.Response.Write(html);
}

<<:  Description of the execution mechanisms of static pages and dynamic pages

>>:  How to start Vue project with M1 pro chip

Recommend

Quickly learn MySQL basics

Table of contents Understanding SQL Understanding...

Example of exporting and importing Docker containers

Table of contents Exporting Docker containers Imp...

Basic usage knowledge points of mini programs (very comprehensive, recommended!)

Table of contents What to do when registering an ...

Implementation of CSS Fantastic Border Animation Effect

Today I was browsing the blog site - shoptalkshow...

MySQL master-slave replication principle and points to note

Written in front I have been writing a special to...

Detailed explanation of ES6 Promise usage

Table of contents What is a Promise? Usage of rej...

Detailed explanation of downloading, installing and using nginx server

download http://nginx.org/en/download.html Unzip ...

Docker container exits after running (how to keep running)

Phenomenon Start the Docker container docker run ...

How is MySQL transaction isolation achieved?

Table of contents Concurrent scenarios Write-Writ...

Vue image cropping component example code

Example: tip: This component is based on vue-crop...

MySQL Series 3 Basics

Table of contents Tutorial Series 1. Introduction...

Example analysis of interval calculation of mysql date and time

This article uses an example to describe the inte...

CSS beginner tutorial: background image fills the entire screen

If you want the entire interface to have a backgr...