テストデータ入力画面をJSPで作成する方法
はじめに
今回は、テストデータを手軽に入力できる画面をJSPで作成していきます。特に、データ入力フォームをテーブル形式で整然と配置する方法について解説します。テーブル形式は、各フィールドを見やすく並べるのに適しており、ユーザーにとっても入力しやすい画面を提供できます。
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>
<h2>テストデータ入力画面</h2>
<form action="SubmitDataServlet" method="post">
<table border="1">
<tr>
<td><label for="name">名前:</label></td>
<td><input type="text" id="name" name="name" required></td>
</tr>
<tr>
<td><label for="email">メールアドレス:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td><label for="age">年齢:</label></td>
<td><input type="number" id="age" name="age" min="1" max="120" required></td>
</tr>
<tr>
<td><label for="comment">コメント:</label></td>
<td><textarea id="comment" name="comment" rows="4" cols="50"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="登録">
</td>
</tr>
</table>
</form>
</body>
</html>
コードの解説
- テーブルレイアウト: 各入力フィールドは、テーブルの1行に配置されています。左側のセルにラベルを、右側のセルに入力フィールドを配置することで、整然としたレイアウトを実現しています。
-
<td colspan="2">: 「登録」ボタンはテーブルの中央に配置されるよう、セルを2つ分結合して配置しています。
まとめ
テーブル形式でのデータ入力画面は、ユーザーにとって視覚的にわかりやすく、入力がしやすいレイアウトです。フォーム作成時には、デザインの一部としてテーブルを活用することで、ユーザビリティの向上が期待できます。