はじめに

Javaを使ってWebアプリを作ろうってなった時に、htmlに不慣れで苦労をしました。
本記事では、htmlやWebアプリで最初につまずきやすい、formを使ったデータ送信を説明します。

氏名と性別、年齢を入力して、「次へ」ボタンをクリックするとページが遷移し、入力した内容が表示される、というプログラムを作ります。
環境はEclipseです。

入力画面を作る

入力画面としてinput.jspを作ります。
htmlはタグと呼ばれる<>で囲まれた書式を使って書いていきます。タグで囲まれた箇所を要素と呼びます。（例：htmlタグで囲まれた箇所はhtml要素です）
タグには属性と呼ばれる設定を与えることができます。（例：inputタグのtype属性を変えることで、テキストボックスを作ったりラジオボタンを作ることができます）

html要素のみですが、input.jspのソースは以下の通りです。

input.jsp

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
	<h2>入力フォーム</h2>
	<table border="1">
		<tr>
			<th>姓</th>
			<td><input type="text"></td>
			<th>名</th>
			<td><input type="text"></td>
		</tr>
		<tr>
			<th>性別</th>
			<td>男性：<input type="radio">女性：<input type="radio"></td>
		</tr>
		<tr>
			<th>年齢</th>
			<td>
				<select>
					<option>10才未満
					<option>10代
					<option>20代
					<option>30代
					<option>40代
					<option>50代
					<option>60才以上
				</select>
			</td>
		</tr>
		<tr>
			<td><input type="submit" value="次へ"></td>
		</tr>
	</table>
</body>
</html>

するとこんなセンスのない画面ができあがります。

しかし、これでは未完成です。「次へ」ボタンをクリックしても何も起こりません。
今回のWebアプリを完成させるまでに次の2点が足りていません。
①入力した値をデータとして保持する仕組み
②データを次のページに渡す仕組み

①をクリアする、つまりデータを保持するためにはname属性、value属性が必要です。
②をクリアする、つまりデータを渡すためにはformタグが必要です。

name属性とvalue属性

name属性とvalue属性を加えるとinput.jspは次のようになります。画面のレイアウトは、上に貼ったものと完全に同じです。

input.jsp

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
	<h2>入力フォーム</h2>
	<table border="1">
		<tr>
			<th>姓</th>
			<td><input type="text" name="sei"></td>
			<th>名</th>
			<td><input type="text" name="mei"></td>
		</tr>
		<tr>
			<th>性別</th>
			<td>男性：<input type="radio"  name="sex" value="male">
			女性：<input type="radio"  name="sex" value="female"></td>
		</tr>
		<tr>
			<th>年齢</th>
			<td>
				<select name="age">
					<option value="9">10才未満
					<option value="10">10代
					<option value="20">20代
					<option value="30">30代
					<option value="40">40代
					<option value="50">50代
					<option value="60">60才以上
				</select>
			</td>
		</tr>
		<tr>
			<td><input type="submit" value="次へ"></td>
		</tr>
	</table>
</body>
</html>

テキストボックスにname属性、
ラジオボタンにname属性とvalue属性、
プルダウンにname属性とvalue属性を追加しました。
テキストボックスにvalue属性の記載がないのは、実際に入力された値がvalue属性の値として扱われるためです。
name属性の値とvalue属性の値はセットで渡されます。例えばラジオボタンで男性を選択した場合は、(name="sex", value="male")として渡されます。

formタグ

続いてソースコードにformタグを書き加えます。送りたいデータの要素と、データを送るときにユーザがクリックするボタンを囲むようにして、formタグを書きます。

input.jsp

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>input</title>
</head>
<body>
	<h2>入力フォーム</h2>
	<form action="http://localhost:8080/QiitaProject/output.jsp" method="post">
		<table border="1">
			<tr>
				<th>姓</th>
				<td><input type="text" name="sei"></td>
				<th>名</th>
				<td><input type="text" name="mei"></td>
			</tr>
			<tr>
				<th>性別</th>
				<td>男性：<input type="radio"  name="sex" value="male">
				女性：<input type="radio"  name="sex" value="female"></td>
			</tr>
			<tr>
				<th>年齢</th>
				<td>
					<select name="age">
						<option value="9">10才未満
						<option value="10">10代
						<option value="20">20代
						<option value="30">30代
						<option value="40">40代
						<option value="50">50代
						<option value="60">60才以上
					</select>
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="次へ"></td>
			</tr>
		</table>
	</form>
</body>
</html>

本プログラムでは送りたいデータと、送るときにクリックするボタンは全てtable要素に含まれています。ですのでtalble要素を囲むようにしてformタグを書きました。
formタグの属性にaction属性とmethod属性があります。
action属性には、遷移先のURLを、
method属性には、送るときの方式を指定します。

ローカルにサーバを立ち上げているのでURLはlocalhostになります。
action属性には、postを指定しました。他にgetを指定してもデータを送ることができます。しかし個人情報など、秘匿性の高い情報を扱うときはpostを使用するのが一般的です。

実際に以下のようなデータを入力し、「次へ」ボタンをクリックしました。

以上でデータを送ることができました。
次は、送ったデータを取得する方法を説明します。

データを取得し、表示する

データの取得にはrequest領域を使用します。
先ほど入力したデータは全てrequest領域に保管されています。そのため遷移先の画面では、request領域上のデータを取得する処理が必要になります。

output.jsp

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>output</title>
</head>
<body>
	<h2>プロフィール</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("姓：" + sei + "<br>");
		out.println("名：" + mei + "<br>");
		if(sex.equals("male")){
			out.println("性別：男性<br>");
		}else{
			out.println("性別：女性<br>");
		}
		
		if(age.equals("9")){
			out.println("年齢：10才未満<br>");
		}else if(age.equals("60")){
			out.println("年齢：60才以上<br>");
		}else{
			out.println("年齢：" + age + "代<br>");
		}
	%>
</body>
</html>

request領域からデータを取得するためにはgetParameterメソッドを使用します。
getParameterメソッドの引数にはname属性の値を指定します。これにより、引数のname属性値に対応したvalue属性の値を取得できます。
このとき、取得した値は必ずString型になります。ですので、例えば整数値を取得したいときは、String → intへのキャストが必要です。

出力画面は以下のようになります。

おわりに

ここでは、name属性、value属性、formタグの使い方を、簡単なプログラムの作成を通して説明しました。
ポイントは以下2点です。
①name属性、value属性はデータを保持するために必要
②formタグはデータを送るために必要

以上、ありがとうございました。