フォームとは
皆さんも普段Webサイトに会員登録したり、SNSに投稿する機会があるでしょう。
お問い合わせページなど、情報の入力や選択を行う機能のことをフォームと言います。
HTML上では、<form>タグから</form>タグで囲んだ範囲が「フォーム」としての機能を持ちます。
フォームは主にプログラム側（サーバー／バックエンド）にデータを渡すために使用されます。
フォーム側（入力側）はHTMLファイルで、渡す側（送信先）はJavaなどのプログラムになるわけです。
フォームとは、必ずJavaなどのプログラムとセットになるということですね。HTML単体では残念ながらフォームデータを取り扱うことができないのです。
これがフォーム関連のタグが難しいと感じる理由の1つかもしれません。
この単元ではフォームに関してHTMLの書き方を学習します。フォームで一般的でかつ実際に使われるもののみ掲載していますので、
こちらで扱わない内容について気になる場合は調べてみましょう。
＊フォームを送信した後の、バック側での処理については「Spring Bootの基本的な処理の流れ」以降で学んでいきます。
formタグについて
フォームを使用する場合には必須のタグです。フォーム全体をこのタグで囲みます。
よく「で、どこに記述すればいいの？」と言われますが、結論を言ってしまうとどこでもいいです。
あくまでも送信ボタンを含み「フォーム全体」をなんとなく囲んでいればOKなので、<form>開始タグを<body>開始タグの直後、</form>閉じタグを</body>閉じタグの直前でもOKです。
例
<body>
<form>
<!-- form内容の記述 -->
</form>
</body><form>～</form>の間にtableタグや、見出しタグや他のタグが入り込んでいても問題ありません。
あくまでもinputタグなどのフォーム関連のタグのみを、フォームの機能として抽出してくれます。
※ただし、formタグの中にformタグを二重に入れることはできません。
<form>タグは実際には必須の属性が2つあります。（method属性、action属性）
基本的な記述例
<form method="post" action="/check">
</form>method属性（必須）
どういった方法でデータを送信するか、データの送信方式を指定します。
詳細はここでは必要ないので割愛しますが、基本的には「post」とします。特にメールフォームでは必ず「post」として下さい。
action属性（必須）
送信先のURLを指定します。送信ボタンを押した際にここで指定したURLにデータの送信を行います。
その他、enctype属性
ファイル添付機能（input type="file"）を使用する場合に「 enctype="multipart/form-data"」が必須になります。
フォーム部品
<input>タグ
上記の入力欄（四角、入力できます）のことをテキストボックスと言います。
皆さんが日頃、登録する際などに目にしている様々な入力項目があるかと思いますが、そのほとんどが<input>タグです。
実際には以下のように記述します。終了タグはありません。
<input type="○○" name="○○" size="○○">type属性（type="○○"） ※必須
これはその名のとおりタイプ（種類）を指定するものでinputタグのみに存在する属性で、記載必須です。（記載しない場合はtype="text"になります）
主に使われるものは以下の種類があります。
type属性の値(一覧)
| type="text" | 一行のテキストボックスを作成する（初期値）出力結果 |
|---|---|
| type="password" | パスワード入力欄を作成する |
| type="checkbox" | チェックボックスを作成する（複数選択可能。アンケートなどで使用する）出力結果 |
| type="radio" | ラジオボタンを作成する（二者択一。性別などに使用）出力結果 |
| type="hidden" | 画面上は表示されない隠しデータを指定する出力結果（何も表示されない） |
| type="file" | サーバーへファイルを送信する出力結果 |
| type="submit" | 送信ボタンを作成する出力結果 |
| type="button" | 汎用ボタンを作成する出力結果 |
上記であげたtype属性の値は一部です。
その他type属性についてはHTML5でかなり追加されましたがブラウザが対応していない可能性もあるため、使用する場合には事前の情報収集や動作チェックが必須です。
たとえば、数字入力専用の入力フィールドやメールアドレス入力用の入力フィールドなどがあります。
詳しく知りたい方は以下のページなどが参考になります。
参考サイト：<input>: 入力欄（フォーム入力）要素
name属性 ※必須
これが非常に大事な要素です。プログラム側に送る際の目印となるものになります。
記述例
<input type="text" name="username" size="30">ブラウザ上での表示
この場合、name属性の値と入力されたデータ（またはvalue属性の値）がセットでプログラム側に送られます。
要するにたとえば、「テスト太郎」と入力したら、name属性「username」と入力値「テスト太郎」がセットになるということです。
「連想配列のキーとデータ」、または「変数名と変数の値」の関係をイメージすると良いでしょう。
逆に言えば、このname属性が無いと「どの」入力データであるのかがプログラム側で判断できない（送信されない）ので、必須になります。
ただし、送信ボタン、リセットボタンなどには不要です。
逆に付けてしまってもいらないデータが送られかねませんので、基本的に付けないようにしましょう。
※チェックボックスのみイレギュラーな記述が必要です。
種類が別物であればnameを別々にすればよいですが、
チェックボックスは複数の内容を選択できることが主流ですので、name="○○[]" のように後ろに[]をつけてあげる必要があります。
これはpetというnameに対して、配列でデータを送りますよ、という目印のために[]を付け加えています。
<input type="checkbox" name="pet[]" value="犬">犬
<input type="checkbox" name="pet[]" value="猫">猫
<input type="checkbox" name="pet[]" value="ハムスター">ハムスターname="○○[]"についての詳細は以下のサイトを参考にしてください。
サーバー側では配列として受け取ります。
※下記のサイトは素のJavaの記述であり、本研修内では直接扱わない内容です。参考までに。
参考サイト：【Java & Tomcat】チェックボックスを使ってデータを取得する（サンプルプログラム付き）
value属性 （入力フィールド以外は必須）
フォーム送信では、value属性の値がname属性の値とセットでプログラム側に送られます。
ちょっとややこしいかもしれませんが、
input type="text"の場合、ユーザーが入力したデータはvalue属性の値（value="○○"の○○部分）に反映されるわけです。
そのためinput type="text"の場合には、value属性の値は空（value=""）、またはvalue属性自体を省略してもOKです。
その他のラジオボタン、チェックボックス、プルダウン、隠し項目（hidden）などの入力できない項目では必須になります。
要するにユーザーがキーボードで文字などを入力する項目は、入力内容が値として扱われますので、value属性については空、または省略OKですが、
それ以外の項目では入力しないので必要になるということですね。
このあたりは実際にフォームを複数回ほど送信してみれば自然に身につきます。
ちなみに使用頻度は低いですが、次のように予めvalue属性の値に文字列をセットしておくと、実行結果はこのようになります。
<input type="text" name="username" value="テスト太郎" size="30">ブラウザ上での表示
これを使う機会としては、既存データの修正・更新の場合などです。
よく「カタカナで入力下さい」のように薄い文字を表示させて、入力時には文字が消えるというようなものがありますが、これについては後述する「placeholder属性」を参照下さい。
size属性
type="text" のみに使用され、これは単純に入力欄のサイズ（横幅）です。これは必須ではありませんが、あまり狭いと入力しづらいですよね。
指定しない場合、ブラウザのデフォルト値が反映されますが、ブラウザにより異なったりもするので指定していたほうが無難でしょう。もちろん幅はCSSでも指定可能です。
<input type="text" size="30">
<input type="text" size="100">その他属性「placeholder」
よく入力欄で「カタカナで入力下さい」のように薄い文字を表示させて、カーソルを合わせると文字が消えるというようなものがありますが、
placeholder属性というものを使います。
placeholder="カタカナで入力下さい" のように指定することで実現します。
（ただしこれはブラウザが対応している場合のみです。現在はほとんどのブラウザが対応しているので気にしなくてOKです。）
<input type="text" name="username" value="" placeholder="カタカナで入力下さい" size="30">ブラウザ上での表示
その他にもtype属性値に紐づく個々の属性も存在しますので、下記サイトで対象の属性を選択して覗いてみましょう！
参考サイト：<input>－HTML5タグリファレンス
textareaタグについて
inputではない入力項目として、テキストエリアと言うものがあります。備考など、長文を記述させたい場合に使用します。
次のように記述すると実際にブラウザ上ではこのような表示になります。
<textarea name="text" cols="50" rows="5"></textarea>ブラウザ上での表示
これはtype="text" と同じようにユーザーがキーボードで文字などを入力できるフィールドです。
違いはtype="text"が1行のみの入力欄であるのに対して複数行の入力欄になります。
※inputタグとは違い、終了タグが必要なことに注意しましょう。
テキストエリアも1フォーム部品ですので、前述したとおり、name属性が必須です。
textareaはちょっと特殊でvalue属性はありません。
<textarea> と </textarea> の間の部分がvalue属性の扱いとなります。
また、独自の属性としてcolsとrowsがあります。
cols = 幅（数値は自由ですが一般的なサイトであれば50～80程度が多いと思います）
rows = 高さ（行数になります。5＝5行ということですね。ただしブラウザによって若干異なることもあり）
です。これの解釈がブラウザによって結構違っていたりします。
厄介なのが幅を多く指定し過ぎるとページからはみ出てまで表示することですね。一度は見たことがあるかもしれません。
特にIEとそれ以外では結構見た目が異なりますのでチェックしたほうがいいでしょう。
そのためCSSで指定したほうが良いと言われてもいます。
selectタグについて
いわゆるプルダウンメニューですね。以下のような記述です。
<select name="purpose">
<option value="">選択してください</option>
<option value="inquiry">ご質問・お問い合わせ</option>
<option value="link">リンクについて</option>
</select>ブラウザ上での表示
name属性については上記の「name属性」を参照下さい。まったく同じです。
value属性に値が入っていることに注目下さい。このような選択する項目の場合、value属性が必須です。
実はこのoptionタグについてはvalue属性は省略できます。省略している人もいるようです。
※省略した場合、<option>○○</option> の○○部分がvalue属性の値として解釈されます。
ただし、これは正規の方法ではありませんので推奨しません。
普通に考えて省略することのメリットはそんなに無いですよね。記述しておきましょう。
基本的には複数の項目から1つを選択させるという点でinput type="radio"（ラジオボタン）と同じです。
セレクトの方がスペース的に小さいため、大量の選択項目がある場合などに主に使われます。（都道府県の選択など）
セレクトとラジオボタンの使い分けはサイトの方針により異なります。
参考サイト：<select>: HTML 選択要素
multiple属性（selectタグ限定）
チェックボックスのように、複数選択が可能なセレクトボックスです。
CtrlやShiftを使用して複数選択できます。
※複数の内容を選択できるので、<input type="checkbox">と同様で name="○○[]" のように後ろに[]をつけてあげる必要があります。
<select multiple="multiple" name="sampleName[]">
<option value="A">選択肢Ａ</option>
<option value="B">選択肢Ｂ</option>
<option value="C">選択肢Ｃ</option>
</select>ブラウザ上での表示
その他：checked属性、 selected属性について
ラジオボタン、チェックボックス、プルダウンメニュー（selectタグ）に関して、予めチェック／または選択済みにしておきたい場合にそれぞれ使用します。
checked="checked"はcheckedだけ記述することも可能
<!-- ラジオボタン -->
<input type="radio" name="○○" value="1" checked="checked">
<!-- チェックボックス -->
<input type="checkbox" name="○○" value="2" checked="checked">
selected="selected"はselectedだけ記述することも可能
※プルダウンの場合でselected="selected"が未設定の場合、一番上のものが選択された状態になります。
<!-- セレクトボックス -->
<select name="purpose">
<option value="" selected="selected">選択してください</option>
<option value="inquiry">ご質問・お問い合わせ</option>
<option value="link">リンクについて</option>
</select>まとめ
・フォーム部品は、<form></form>タグ内に記述する。
・各タグとname属性、value属性の対応をまとめると下表の通りになります。
| name属性 | value属性 | 備考 | |
|---|---|---|---|
| <input type="text"> <input type="password"> |
必須 | 任意 | |
| <input type="checkbox"> | 必須 ※複数を1セットで扱いたいときはname属性を同一にし、name="○○[]"の形にする | 任意 | |
| <input type="radio"> | 必須 ※複数を1セットで扱いたいときはname属性を同一にする（[]がいらないのは、radioは同じname属性の中で1つしか選択できないという仕様のため） | 任意 | |
| <input type="hidden"> | 必須 | 必須 （「隠しデータ=value属性の値」を送信するための部品であるため） | |
| <input type="file"> | 必須 | 任意 | 親(祖先)の<form>タグに「enctype="multipart/form-data"」が必須（ないとファイルが受け渡しされないため） |
| <input type="submit"> <input type="button"> |
不要 | 任意 （ボタンに表示される文字） | |
| <textarea></textarea> | 必須 | 不要（機能しない） ※入力値を入れたいときは開始タグと終了タグの間に記載する | |
| <select> <option></option> </select> |
必須 ※<select>タグに付与する ※複数選択可（multiple）のときはname="○○[]"の形にする | 必須 ※<option>タグに付与する |
form制作の参考サイト
以下のサイトでは、このページの内容に加えてよりフロントエンド寄りの目線で解説されています。
参考サイト：【初心者向け】0からformがわかる｜HTMLでのフォーム作成
練習問題
画像の画面を作成してください。
※見た目はある程度似ていればよく、フォームとして機能できるように各フォーム部品の属性を不足なく記載しましょう。
※formタグで全体を包むことも忘れずに
eclipse内「com.cmps.front」フォルダ内に「sample.html」ファイルを作成
以下のどちらかの方法で実施しましょう
①サクラエディタ等のテキストエディタにて作成
- サクラエディタやメモなどテキストエディタを起動してHTMLファイルを作成します。
- (サクラエディタの場合)「ファイル」→「名前を付けて保存」をクリックし、該当フォルダにファイルを保存してください。文字コードセットは「UTF-8」にします。
サクラエディタ
下記サイトを参考にしてインストールしてください。
サクラエディタの使い方、インストールから基本設定や便利な機能までをご紹介
②eclipse内「com.cmps.front」フォルダ（パッケージ）上で右クリック＞ファイルを作成 より作成
