JSPのフォームを作るさいのHTMLのタグ


eclipseで動的プロジェクトを作成し
servletとhtmlファイル,jspファイルを連動させることを
勉強しているのですが

htmlタグをすぐに忘れてしまいがちなので
健忘録としてここでまとめておきたいと思います。


#テキスト情報を入力送信

テキストを入力して送信するような場合には
inputタグを使用します。
（nameの値はservlet側でrequestスコープからgetParameterするときに使用します。）

![form_name_age.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694948/7ab4e5b9-3851-91a6-b23d-bd8c25f81d6f.png)



```java: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です。

![option.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694948/87135c3f-2c43-ef62-a392-284ddab03e24.png)




```java: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_checkbox_password_textbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694948/ad804410-612b-77b3-6215-721fd76d2e4a.png)

##ラジオボタン


```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に<servlet-url>SampleServlet</servlet-url>するか
サーブレットクラスのアノテーションの指定を(@SampleServlet)とします。