Webアプリケーション作成に欠かせないHTMLフォームの基礎

##フォームについて
Webアプリケーションを作成する上で重要な技術の一つである**「フォーム」**についての記事です。
フォームを使うことでユーザーがWebアプリケーションに**データを入力**できるようになります。

- フォームの基礎(フォームの構造、部品、作成、データ送信の仕組み)
- リクエストパラメータの取得
- フォームを使ったプログラムの作成方法


以上の3点について順を追って解説していきます。

先に全体のコードを読んでおくと最初の説明が分かりやすくなると思います。→[フォームを使ったプログラムの作成方法](#フォームを使ったプログラムの作成方法)


##フォームの基礎

フォームを使うと、**Webページに入力したデータをサーバサイドプログラムに送信することができます。**

ここからはフォームの基礎である4つの項目を1つずつ説明していきます。

1. フォームの構造
2. フォームの部品
3. フォームの作成
4. データ送信の仕組み


#####1. フォームの構造
フォームはHTMLの複数のタグを組み合わせて作成します。
入力項目のひとまとまりがフォームです。


<img width="175" alt="コメント 2020-01-09 134640.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/0b835964-c106-e6eb-3e32-9bddae9b8986.png">

1,テキストボックス
(inputタグ:type属性="text")
2,ラジオボタン
(inputタグ:type属性="radio")
3,登録ボタン
(inputタグ:type属性="submit")


```java:
<form action="/example/FormSampleServlet" method="post">
名前:<br>
<input type="text" name="name"><br>//テキストボックス
性別:<br>
男<input type="radio" name="gender" value="0">//ラジオボタン
女<input type="radio" name="gender" value="1">//ラジオボタン
<input type="submit" value="登録">//登録ボタン
</form>
```


#####2. フォームの部品
フォームの中にはデータ入力や送信のための部品(コントロール)を入れます。
例：

```java:名前:<br>
<input type="text" name="name">
```

部品名:name
部品の作成自体はタグを書くだけです。気を付けるところは、部品の名前です。**各部品には識別のために固有の名前を付ける必要があります。**

#####3. フォームの作成

フォームはformタグで作成します。
**formタグの外に部品を書くと、その部品の値は送信されない**ので注意が必要。

```java:名前:<br>
<form action="/example/FormSampleServlet" method="post">
//部品
</form>
```
フォームの構文

```java:
<form action="送信先" method="リクエストメソッド(get/post)">
//部品
</form>
```



action属性：送信先を指定する
サーブレットクラスの場合→＜アプリケーション名＞/＜URLパターン＞
JPSファイルの場合→＜アプリケーション名＞/＜WebContentパス＞

method属性：リクエストメソッドを指定する
get(GETリクエスト)かpost(POSTリクエスト)




#####4. データ送信の仕組み
フォームの登録ボタンをクリックすると、フォームの部品に入力したデータは「部品名＝値」の形式で登録kされます。この「部品名＝値」のことを**リクエストパラメータ**といいます。
リクエストパラメータを送信するリクエストのメソッドには、**GET**または**POST**を使用します。
ではどちらを使用していくか？GETリクエスト、POSTリクエストの違いを見ていきましょう。

| GETリクエスト      | POSTリクエスト |  
|:-----------------|:------------------|
|  新しい情報を取得(検索)  | フォームに入力したデータを登録(ユーザー登録)|        
| 送信した結果を保存共有   |  データをアドレスバーに表示したくない        |       





##リクエストパラメータの取得

**リクエストパラメータは、アプリケーションサーバによって「HttpServletRequest」インスタンスに格納**され、リクエスト先のサーブレットクラスまたはJSPファイルに渡されます。

```java:リクエストパラメータを取得するサーブレットクラス
@WebServlet("/FormSampleServlet")
public class FormSampleServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		//リクエストパラメータの文字コードを指定
		request.setCharacterEncoding("UTF-8");

　　　　　//リクエストパラメータの取得
		String name=request.getParameter("name");
		String gender=request.getParameter("gender");

```

##フォームを使ったプログラムの作成方法

以下のユーザー登録を行うようなプログラムを作成します。

<img width="170" alt="コメント 2020-01-09 132000.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/dfab262a-f86b-2a64-f72c-f6fb7ce9171e.png"><img width="164" alt="コメント 2020-01-09 132042.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/03200f88-d04f-2784-44fc-99fdbf4ae0cf.png"><img width="194" alt="コメント 2020-01-09 131808.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c85d60b4-7e0a-ca89-c4d1-22ee13b987f5.png">



コードは以下の通りです。

```java:JSPファイル
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー登録もどき</title>
</head>
<body>

<form action="/example/FormSampleServlet" method="post">
名前:<br>
<input type="text" name="name"><br>
性別:<br>
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<input type="submit" value="登録">
</form>
</body>
</html>
```



```java:サーブレットクラス
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 {
		//リクエストパラメータの取得
		request.setCharacterEncoding("UTF-8");
		String name=request.getParameter("name");
		String gender=request.getParameter("gender");

		//リクエストパラメータをチェック
		String errorMsg="";
		if (name==null||name.length()==0) {
			errorMsg+="名前が入力されていません<br>";
		}
		if (gender==null||gender.length()==0) {
			errorMsg+="性別が選択されていません<br>";
		}else {
			if (gender.equals("0")) {gender="男性";}
			else if (gender.equals("1")) {gender="女性";}
		}
		//表示するメッセージ設定
		String msg=name+"さん("+gender+")を登録しました";
		if (errorMsg.length()!=0) {
			msg=errorMsg;
		}
		//HTML出力
		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>ユーザー登録もどき</title>");
		out.println("</head>");
		out.println("<body>");
		out.println("<p>"+msg+"<p>");
		out.println("</body>");
		out.println("</html>");
	}

}

```