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:

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