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.
Table of contents
- What is a parameter
- How to send parameters in HTML
- Basic form of request parameters
- Send request parameters in link
- Send request parameters in form
- important point
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.
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.
If you create the following HTML file and store it in the same folder, you can check the operation.
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 &.
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.
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.
I introduced how to pass request parameters in HTML.
- Request parameters can be sent as link or form elements
- In principle, the data to be passed is displayed in the URL, so it is not suitable for exchanging data that requires security such as login information.
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.