eclipseで動的プロジェクトを作成し
servletとhtmlファイル,jspファイルを連動させることを
勉強しているのですが
htmlタグをすぐに忘れてしまいがちなので
健忘録としてここでまとめておきたいと思います。
テキスト情報を入力送信
テキストを入力して送信するような場合には
inputタグを使用します。
（nameの値はservlet側でrequestスコープからgetParameterするときに使用します。）
formExample1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Questionnaire form</h1>
<form action="SampleServlet01" method="post">
氏名<input type="text" name="name"><br>
年齢<input type="text" name="age"><br>
<button type="submit">送信</button>
</form>
</body>
</html>
オプションボタン
いくつかの値のなかから選択するような次イメージのようなフォームでは
オプションボタンを使用できます。
size="n"により表示する選択肢を変えることができます。
デフォルトは1です。
formExample2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>計算機</h1>
<form action="SampleServlet02" method="get">
<input type="text" name="value01">
<select name="operator">
<option value="tasu">＋</option>
<option value="hiku">－</option>
<option value="kake">×</option>
<option value="wari">÷</option>
</select>
<input type="text" name="value02">
<button type="submit">計算</button>
</form>
</body>
</html>
ラジオボタン・チェックボックス・パスワード・テキストボックス
ラジオボタン
radio.html
<input type ="radio" name="gender" value ="man">男性<br>
<input type ="radio" name="gender" value ="woman" checked="checked">女性<br>
<input type ="radio" name="gender" value ="other">その他<br>
```password.html
PCパスワード<input type ="password" name="password"><br>
<!-- text＝passwordにすると入力値が非表示になる -->
checkbox.html
<input type="checkbox" name = "class" value ="english">英文科
<input type="checkbox" name = "class" value ="money">経済学科
<input type="checkbox" name = "class" value ="it">情報科
textarea.html
感想
<textarea name="feedback" rows="3" cols="50"></textarea>
リセット
リセットボタンを設置するには下記コードで実現できます。
<button type="reset">取消</button>
テーブル型フォーム
tableタグを使用するとフォームが整います。
tableformExample.html
<!DOCTYPE html>
<head>
<title>index</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<!-- スタイルシートを実装できる -->
</head>
<body>
hello tomcat!<br>
<form action="SampleServlet" method="get">
<table>
<tr>
<td>名前</td>
<td><input type ="text" name="name"></td>
</tr>
<tr>
<td>学籍番号</td>
<td><input type ="text" name="id"></td>
</tr>
<tr>
<td>パスワード</td>
<td><input type ="password" name="password"></td>
<!-- text＝passwordにすると入力値が非表示になる -->
</tr>
<tr>
<td>性別</td>
<td>
<input type ="radio" name="gender" value ="man">男性<br>
<input type ="radio" name="gender" value ="woman" checked="checked">女性<br>
<input type ="radio" name="gender" value ="other">その他<br>
</td>
</tr>
<tr>
<td>
<select name="lunch">
<option>ラーメン</option>
<option>寿司</option>
<option>ウナギ</option>
</select>
</td>
</tr>
<tr>
<td>
今欲しいもの<br>
<input type="checkbox" name = "wanted" value ="time">時間
<input type="checkbox" name = "wanted" value ="money">お金
<input type="checkbox" name = "wanted" value ="other">その他
</td>
</tr>
<tr>
<td colspan="2">
<textarea name="feedback" rows="3" cols="50">
</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="送信">
<button type="reset"> 取消</button>
</td>
</tr>
</table>
</form>
</body>
</html>
JSPにhtmlのタグを使用しフォームを作成します。
フォームはformタグをつかいます。
formタグのなかのmethodはメソッドの指定をします
methodにgetとすればdoGetメソッド、postとするとdoPostメソッドを指定したことになります。
actionはサーブレットパスの指定をします。
web.xmlにSampleServletするか
サーブレットクラスのアノテーションの指定を(@SampleServlet)とします。