How to pass parameters in HTML?

Sending data on an HTML page and processing it on another page based on the sent data is
a common practice in web systems.

The key here is the passing of parameters.

In this article, I’ll show you how to pass parameters in HTML.

What is a parameter

Parameters are variable values ​​that primarily affect program results.
In HTML, it is often “contents entered in a form”.

For example, if you look at the URL of the product description page on an online shopping site, you may see something like “?name=XXXXXX” at the end of the URL.
The contents after this “?” are called “request parameters”, and you can see that this parameter is used to perform some processing.

When handling this parameter on HTML, a programming language such as Javascript is used.

How to send parameters in HTML

The way to send parameters directly in HTML is mainly

・Send as a link ・Send
as a form element

There are two types of They are often used differently depending on the application.
Let’s check how to use it with a sample.

Sample of passing parameters in HTML and Javascript

As an example, here is a sample of sending and receiving parameters in HTML and Javascript.
If you create the following HTML file and store it in the same folder, you can check the operation.

Receiver

File name: receive.html

When you open “send.html”, it is successful if the following screen is displayed.
If you have problems such as this screen not opening or not responding to button presses, please check the file name.

Here, if you select the link to transition with “Taro”, “Taro” will be sent as follows and displayed as follows.

Basic form of request parameters

In the previous sample, when transitioning using the link, the URL on the receiving side is as follows.

This “?username=Taro” part is the “request parameter”.
Request parameters start with “?” and are specified in “key=value” format.
Also, if you want to send multiple parameters, connect them with &.

The parameters sent in this way are processed and displayed by Javascript.

Send request parameters in link

Sending request parameters in a link is simple.

It just creates a link with a request parameter attached to the transition destination URL.
This time we sent a fixed value, but in many web systems, a URL is generated and output using a programming language.

Send request parameters in form

Compared to the link, it looks a little more complicated to fill in and submit a form.
Below is the code for the form submission.

When sending parameters from a form, use the “input” element.
The content of the “name” attribute in the input element is used as the parameter key.
In this case, since name=”username”, the content entered in this text box is sent as username=input content.

important point

As you can see, request parameters are convenient for HTML-to-HTML communication, but
they don’t mean that you can send anything.

For example, in a member-only system, if you put the user name and password on the login screen as they are in the URL, there will be no security at all.

By changing the “method=”GET”” part to “method=”POST”” in the form, data can be exchanged in a state that is not visible from the URL, but it is vulnerable to external access and security has become weaker.

Remember that the actual use of the request parameter exchange is a non-security part.

summary

I introduced how to pass request parameters in HTML.

The exchange of request parameters is a technique commonly used in Google search result URLs and product pages on EC sites.
First, understand the basic form and use it to create more interactive web pages.