Use name attribute, value attribute, form tag [Java]
Introduction
When I tried to make a web application using Java, I was new to html and had a hard time. In this article, I will explain how to send data using form </ font>, which is easy to trip over in html and web applications.
Enter your name, gender, and age, and click the "Next" button to change the page and display the entered contents. The environment is Eclipse.
Make an input screen
Create input.jsp as an input screen. html is written using a format enclosed in <> called tag </ font>. The part surrounded by the tag is called element </ font>. (Example: The part surrounded by the html tag is the html element) Tags can be given settings called attributes </ font>. (Example: You can create a text box or a radio button by changing the type attribute of the input tag.)
Only the html element, but the source of input.jsp is as follows.
input.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
<h2>input form</h2>
<table border="1">
<tr>
<th>Surname</th>
<td><input type="text"></td>
<th>Name</th>
<td><input type="text"></td>
</tr>
<tr>
<th>sex</th>
<td>male:<input type="radio">Female:<input type="radio"></td>
</tr>
<tr>
<th>age</th>
<td>
<select>
<option>Under 10 years old
<option>10's
<option>20's
<option>30s
<option>Forties
<option>50s
<option>60 years and over
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="next"></td>
</tr>
</table>
</body>
</html>
Then, a screen without such a sense is completed.
However, this is incomplete. Nothing happens when I click the "Next" button.
The following two points are not enough to complete this web application.
(1) Mechanism for holding the entered value as data
(2) Mechanism for passing data to the next page
name attribute, value attribute </ font> are required to clear ①, that is, to retain data. form tag </ font> is required to clear ②, that is, to pass data.
name and value attributes
With the name and value attributes added, input.jsp looks like this: The screen layout is exactly the same as the one pasted above.
input.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
<h2>input form</h2>
<table border="1">
<tr>
<th>Surname</th>
<td><input type="text" name="sei"></td>
<th>Name</th>
<td><input type="text" name="mei"></td>
</tr>
<tr>
<th>sex</th>
<td>male:<input type="radio" name="sex" value="male">
Female:<input type="radio" name="sex" value="female"></td>
</tr>
<tr>
<th>age</th>
<td>
<select name="age">
<option value="9">Under 10 years old
<option value="10">10's
<option value="20">20's
<option value="30">30s
<option value="40">Forties
<option value="50">50s
<option value="60">60 years and over
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="next"></td>
</tr>
</table>
</body>
</html>
Name attribute in the text box, Name and value attributes on radio buttons, Added name and value attributes to the pull-down. The value attribute is not described in the text box because the value actually entered is treated as the value of the value attribute. The value of the name attribute and the value of the value attribute are passed as a set. For example, if you select a male with a radio button, it will be passed as (name = "sex", value = "male").
form tag
Next, add the form tag to the source code. Write the form tag so that it surrounds the element of the data you want to send and the button that the user clicks when sending the data.
input.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
<h2>input form</h2>
<form action="http://localhost:8080/QiitaProject/output.jsp" method="post">
<table border="1">
<tr>
<th>Surname</th>
<td><input type="text" name="sei"></td>
<th>Name</th>
<td><input type="text" name="mei"></td>
</tr>
<tr>
<th>sex</th>
<td>male:<input type="radio" name="sex" value="male">
Female:<input type="radio" name="sex" value="female"></td>
</tr>
<tr>
<th>age</th>
<td>
<select name="age">
<option value="9">Under 10 years old
<option value="10">10's
<option value="20">20's
<option value="30">30s
<option value="40">Forties
<option value="50">50s
<option value="60">60 years and over
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="next"></td>
</tr>
</table>
</form>
</body>
</html>
In this program, the data you want to send and the buttons you click when sending are all included in the table element. So I wrote the form tag so that it surrounds the talble element. The form tag attributes include action attribute </ font> and method attribute </ font>. In the action attribute, the URL of the transition destination, In the method attribute, specify the method when sending.
Since the server is set up locally, the URL will be localhost. I specified post for the action attribute. You can also send data by specifying get. However, when dealing with highly confidential information such as personal information, it is common to use post.
I actually entered the following data and clicked the "Next" button.
You have successfully sent the data. Next, I will explain how to get the sent data.
Get and display data
Use the request area </ font> to retrieve the data. All the data you entered earlier is stored in the request area. Therefore, on the transition destination screen, it is necessary to process to acquire the data on the request area.
output.jsp
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>output</title>
</head>
<body>
<h2>profile</h2>
<%
request.setCharacterEncoding("UTF-8");
String sei = request.getParameter("sei");
String mei = request.getParameter("mei");
String sex = request.getParameter("sex");
String age = request.getParameter("age");
out.println("Surname:" + sei + "<br>");
out.println("Name:" + mei + "<br>");
if(sex.equals("male")){
out.println("gender male<br>");
}else{
out.println("gender female<br>");
}
if(age.equals("9")){
out.println("Age: Under 10 years<br>");
}else if(age.equals("60")){
out.println("Age: 60 years and over<br>");
}else{
out.println("age:" + age + "Substitute<br>");
}
%>
</body>
</html>
Use the getParameter method </ font> to get the data from the request area. Specify the value of name attribute in the argument of getParameter method. This allows you to get the value of the value attribute that corresponds to the name attribute value of the argument. At this time, the acquired value will always be String type </ font>. So, for example, if you want to get an integer value, you need to cast from String to int.
The output screen is as follows.
in conclusion
Here, we explained how to use the name attribute, value attribute, and form tag through creating a simple program. The points are the following two points. ① name attribute and value attribute are required to hold data ② form tag is required to send data
Thank you for your cooperation.