Basics of HTML forms indispensable for creating web applications
About the form
This is an article about ** "form" **, which is one of the important technologies for creating web applications. Forms allow users to ** enter data ** into their web applications.
--Form basics (form structure, parts, creation, data transmission mechanism) --Get request parameters --How to create a program using a form
I will explain the above three points step by step.
If you read the whole code first, the first explanation will be easier to understand. → [How to create a program using a form](# How to create a program using a form)
Form basics
Forms allow you to submit the data you enter on a ** web page to a server-side program. ** **
From here, I will explain each of the four items that are the basis of the form.
- Form structure
- Foam parts
- Form creation
- Data transmission mechanism
1. Form structure
Forms are created by combining multiple HTML tags. A form is a set of input items.
1, text box (input tag: type attribute = "text") 2, radio button (input tag: type attribute = "radio") 3, registration button (input tag: type attribute = "submit")
python
<form action="/example/FormSampleServlet" method="post">
name:<br>
<input type="text" name="name"><br>//Text box
sex:<br>
Man<input type="radio" name="gender" value="0">//Radio buttons
woman<input type="radio" name="gender" value="1">//Radio buttons
<input type="submit" value="Registration">//Registrationボタン
</form>
2. Foam parts
In the form, put parts (controls) for data entry and submission. Example:
java:name:<br>
<input type="text" name="name">
Part name: name Creating a part is just a matter of writing a tag. The thing to watch out for is the name of the part. ** Each part must have a unique name for identification. ** **
3. Form creation
Form is created with the form tag. Note that if you write a part outside the ** form tag, the value of that part will not be sent **.
java:name:<br>
<form action="/example/FormSampleServlet" method="post">
//parts
</form>
Form syntax
python
<form action="Destination" method="Request method(get/post)">
//parts
</form>
action attribute: Specify the destination
For Servlet class →
method attribute: Specify the request method get (GET request) or post (POST request)
4. Data transmission mechanism
When you click the register button of the form, the data entered in the parts of the form will be registered in the format of "part name = value". This "part name = value" is called ** request parameter **. Use ** GET ** or ** POST ** as the method of the request to send the request parameters. So which one will you use? Let's see the difference between GET request and POST request.
| GET request | POST request |
|---|---|
| Get new information(Search) | Register the data entered in the form(user registration) |
| Save and share the submitted results | I don't want to display data in the address bar |
Get request parameters
** Request parameters are stored by the application server in the "HttpServletRequest" instance ** and passed to the request destination Jakarta class or JSP file.
Servlet class to get request parameters
@WebServlet("/FormSampleServlet")
public class FormSampleServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Specify the character code of the request parameter
request.setCharacterEncoding("UTF-8");
//Get request parameters
String name=request.getParameter("name");
String gender=request.getParameter("gender");
How to create a program using a form
Create a program that performs the following user registration.
The code is below.
JSP file
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User registration</title>
</head>
<body>
<form action="/example/FormSampleServlet" method="post">
name:<br>
<input type="text" name="name"><br>
sex:<br>
Man<input type="radio" name="gender" value="0">
woman<input type="radio" name="gender" value="1">
<input type="submit" value="Registration">
</form>
</body>
</html>
Servlet class
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class FormSampleServlet
*/
@WebServlet("/FormSampleServlet")
public class FormSampleServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//Get request parameters
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("name");
String gender=request.getParameter("gender");
//Check request parameters
String errorMsg="";
if (name==null||name.length()==0) {
errorMsg+="No name entered<br>";
}
if (gender==null||gender.length()==0) {
errorMsg+="Gender not selected<br>";
}else {
if (gender.equals("0")) {gender="male";}
else if (gender.equals("1")) {gender="Female";}
}
//Message settings to display
String msg=name+"Mr.("+gender+")Registered";
if (errorMsg.length()!=0) {
msg=errorMsg;
}
//HTML output
response.setContentType("text/html; charset=UTF-8");
PrintWriter out=response.getWriter();
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<meta charset=\"UTF-8\">");
out.println("<title>User registration</title>");
out.println("</head>");
out.println("<body>");
out.println("<p>"+msg+"<p>");
out.println("</body>");
out.println("</html>");
}
}
Recommended Posts