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.

  1. Form structure
  2. Foam parts
  3. Form creation
  4. Data transmission mechanism
1. Form structure

Forms are created by combining multiple HTML tags. A form is a set of input items.

コメント 2020-01-09 134640.png

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 → / For JPS files → /

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.

コメント 2020-01-09 132000.png コメント 2020-01-09 132042.png コメント 2020-01-09 131808.png

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

Basics of HTML forms indispensable for creating web applications
Rails Basics of creating a new application
Creating Java Web Applications to Azure Web Apps
[Rails] Building an environment for developing web applications
[Introduction to Java] Basics of java arithmetic (for beginners)
Dreaming of easily creating a Web API for the DB of an existing Java system