第8章では、1行のテキストの入力欄を使いました。この章では、ラジオボタン・日付・プルダウン・チェックボックス・複数行の入力欄を使って、社員の情報を入力するフォームを作ります。それぞれの部品で、何が送られるかを GET のアドレスバーで確かめます。
この章で学ぶこと
- ラジオボタン（
type="radio"）と、文字を囲む<label> - 日付の入力欄（
type="date"） - プルダウン（
<select>・<option>） - チェックボックス（
type="checkbox"） - 複数行の入力欄（
<textarea>） - 送られる値を決める
value属性と、最初から選んでおくchecked・selected属性
9.1 この章で作るもの
この章では、ch09 フォルダーに、社員の情報を入力する画面 input.html と、送信先の result.html を作ります。入力画面には、次の5つの入力部品を並べます。
図9-1 この章で作る入力画面
| 入力部品 | 使う項目 | 書き方 |
|---|---|---|
| ラジオボタン | 性別 | <input type="radio"> |
| 日付の入力欄 | 生年月日 | <input type="date"> |
| プルダウン | 部署 |
<select>・<option>
|
| チェックボックス | 使える言語 | <input type="checkbox"> |
| 複数行の入力欄 | 自己紹介 | <textarea> |
性別・生年月日・部署は、Spring入門の社員の入力画面と同じ書き方です。チェックボックスと複数行の入力欄は、Spring入門では使いませんが、よく使う部品なので、ここで練習します。
| ファイル | 作業 | 内容 |
|---|---|---|
ch09/result.html |
新規 | フォームの送信先のページ |
ch09/input.html |
新規 | いろいろな入力部品を並べた入力画面 |
9.2 ファイルを作る
-
webappフォルダーを右クリックし、新規 → フォルダー でch09フォルダーを作ります。 -
ch09フォルダーに、テンプレート「新規 HTML ファイル (5)」を使ってresult.htmlを作り、次のように書いて保存します。ch09/result.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>送信結果</title> </head> <body> <h1>送信結果</h1> <p>送信された内容は、アドレスバーで確かめてください。</p> <p><a href="input.html">入力画面へ戻る</a></p> </body> </html> -
ch09フォルダーに、同じ手順でinput.htmlを作り、フォームの枠と送信ボタンを書きます。この章では、送られた値をアドレスバーで確かめるので、method="get"にします。ch09/input.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社員の詳しい入力</title> </head> <body> <h1>社員の詳しい入力</h1> <form action="result.html" method="get"> <table> </table> <button type="submit">送信</button> </form> </body> </html>9.3 からは、
<table>と</table>の間に、入力部品の行を1行ずつ書き足していきます。 -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。
9.3 ラジオボタン
ラジオボタン は、いくつかの選択肢の中から1つだけを選ぶ部品です。性別の「男」「女」のように、どれか1つを選んでほしいときに使います。
-
<table>の下に、性別の行を書き足します。ch09/input.html（table の部分）<table> <tr> <th>性別</th> <td> <label><input type="radio" name="gender" value="1"> 男</label> <label><input type="radio" name="gender" value="2"> 女</label> </td> </tr> </table> -
保存して、Chrome で
http://localhost/html/ch09/input.htmlを開きます。「男」を選んでから「女」を選ぶと、「男」の選択が外れることを確認します。「男」「女」の文字の部分をクリックしても選べることも確認します。
| 書いたもの | 意味 |
|---|---|
type="radio" |
ラジオボタンを作る |
name="gender" |
選択肢のグループの名前。同じ name のラジオボタンの中から、1つだけを選べる
|
value="1" |
選ばれたときに送られる値。「男」を選ぶと gender=1、「女」を選ぶと gender=2 が送られる |
<label> |
ラジオボタンと、その横の文字を囲む。文字をクリックしても、ラジオボタンを選べるようになる |
画面に表示される「男」「女」と、送られる値の 1・2 は別のものです。Spring入門の社員管理アプリでは、データベースに性別を 1（男）・2（女）の番号で入れるので、送る値も番号にしています。
【ご注意】ラジオボタンの name をそろえる
同じグループのラジオボタンには、必ず同じ name を書いてください。name が違うと、別のグループとして扱われ、「男」と「女」の両方を選べてしまいます。
9.4 日付の入力欄
-
性別の行の
</tr>の下に、生年月日の行を書き足します。ch09/input.html（追加する行）<tr> <th>生年月日</th> <td><input type="date" name="birthDate"></td> </tr> -
保存して、Chrome で再読み込みします。入力欄の右のカレンダーのアイコンをクリックすると、カレンダーから日付を選べることを確認します。
type="date" は、日付の入力欄を作ります。Chrome では 年/月/日 の形で表示されますが、送られる値は 2001-06-15 のように、年・月・日を - でつないだ形になります。
9.5 プルダウン
プルダウン は、クリックすると選択肢の一覧が開き、その中から1つを選ぶ部品です。選択肢が多いときに、画面を広く使わずに済みます。
-
生年月日の行の下に、部署の行を書き足します。
ch09/input.html（追加する行）<tr> <th>部署</th> <td> <select name="deptId"> <option value="">選択してください</option> <option value="1">総務部</option> <option value="2">営業部</option> <option value="3">開発部</option> </select> </td> </tr> -
保存して、Chrome で再読み込みします。プルダウンをクリックして、部署を選べることを確認します。
| 書いたもの | 意味 |
|---|---|
<select name="deptId"> |
プルダウンを作る。name は <select> に書く |
<option value="1"> |
選択肢の1つ。開始タグと終了タグの間の文字（総務部）が画面に表示され、選ばれると value の値（1）が送られる |
<option value=""> |
「選択してください」の選択肢。value が空なので、これを選んだまま送ると deptId= のように、値の無い組が送られる |
最初の選択肢は、何も選んでいないときに表示されます。Spring入門の社員の入力画面でも、最初の選択肢を「選択してください」にしています。部署の番号（総務部が 1、営業部が 2、開発部が 3）は、Spring入門で作る部署のデータと同じです。
9.6 チェックボックス
チェックボックス は、いくつかの選択肢の中から、いくつでも選べる部品です。1つも選ばなくてもかまいません。
-
部署の行の下に、使える言語の行を書き足します。
ch09/input.html（追加する行）<tr> <th>使える言語</th> <td> <label><input type="checkbox" name="skill" value="html"> HTML</label> <label><input type="checkbox" name="skill" value="css"> CSS</label> <label><input type="checkbox" name="skill" value="java"> Java</label> </td> </tr> -
保存して、Chrome で再読み込みします。チェックボックスを2つ以上選べることと、もう一度クリックすると選択が外れることを確認します。
書き方はラジオボタンと同じで、type が checkbox になっています。チェックボックスでは、同じ name でも、いくつでも選べます。選んだものの数だけ、skill=html&skill=java のように、同じ名前の組が送られます。
9.7 複数行の入力欄
-
使える言語の行の下に、自己紹介の行を書き足します。
ch09/input.html（追加する行）<tr> <th>自己紹介</th> <td><textarea name="comment"></textarea></td> </tr><textarea>と</textarea>の間には、空白も改行も入れずに続けて書きます。 -
保存して、Chrome で再読み込みします。自己紹介の欄に、Enter キーで改行しながら2行以上入力できることを確認します。
<textarea> は、複数行の文章を入力する欄を作ります。<input> と違って、終了タグの </textarea> を書きます。開始タグと終了タグの間に書いた文字は、最初から入力欄に入った状態で表示されます。
【知識メモ】textarea の中では、改行と空白がそのまま表示される
第3章で、「ソースの改行や、続けて入力した空白は、まとめて空白1つとして表示される」と学びました（第3章「ソースで改行してみる」）。<textarea> の中は、この決まりの例外です。<textarea> と </textarea> の間に書いた改行や空白は、そのまま入力欄に表示されます。間に空白や改行を入れずに続けて書くのは、空白や改行が、入力欄に最初から入ってしまわないようにするためです。
たとえば、<textarea> の中の文字を、ほかのタグと同じように改行してインデントすると、そのインデントの空白や改行も、入力欄の中に入ってしまいます。
図9-2 textarea の中でインデントすると、空白や改行も入力欄に入る
9.8 送信して確かめる
ここまでで、input.html は次のようになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>社員の詳しい入力</title>
</head>
<body>
<h1>社員の詳しい入力</h1>
<form action="result.html" method="get">
<table>
<tr>
<th>性別</th>
<td>
<label><input type="radio" name="gender" value="1"> 男</label>
<label><input type="radio" name="gender" value="2"> 女</label>
</td>
</tr>
<tr>
<th>生年月日</th>
<td><input type="date" name="birthDate"></td>
</tr>
<tr>
<th>部署</th>
<td>
<select name="deptId">
<option value="">選択してください</option>
<option value="1">総務部</option>
<option value="2">営業部</option>
<option value="3">開発部</option>
</select>
</td>
</tr>
<tr>
<th>使える言語</th>
<td>
<label><input type="checkbox" name="skill" value="html"> HTML</label>
<label><input type="checkbox" name="skill" value="css"> CSS</label>
<label><input type="checkbox" name="skill" value="java"> Java</label>
</td>
</tr>
<tr>
<th>自己紹介</th>
<td><textarea name="comment"></textarea></td>
</tr>
</table>
<button type="submit">送信</button>
</form>
</body>
</html>
-
Chrome で再読み込みし、次のように入力します。
項目 入力・選択する内容 性別 女 を選ぶ 生年月日 2001/06/15 を入力する 部署 開発部 を選ぶ 使える言語 HTML と Java を選ぶ 自己紹介 よろしくお願いします。 と入力する 
図9-3 入力したところ -
「送信」をクリックし、
result.htmlのアドレスバーを確認します。
図9-4 送信したときのアドレスバー（赤枠）
アドレスバーの ? の後ろには、次の組が & でつながって表示されます。URL が長いので、最後の comment=… の部分は「…」で省略されて表示されます。アドレスバーをクリックすると、URL の全体を確かめられます。
| 送られた組 | 入力部品 | 送られる値 |
|---|---|---|
gender=2 |
ラジオボタン | 選んだ「女」の value
|
birthDate=2001-06-15 |
日付の入力欄 | 年・月・日を - でつないだ日付 |
deptId=3 |
プルダウン | 選んだ「開発部」の <option> の value
|
skill=html・skill=java
|
チェックボックス | 選んだものの数だけ、同じ名前で送られる |
comment=… |
複数行の入力欄 | 入力した文章 |
ラジオボタンとチェックボックスは、何も選ばずに送ると、その組そのものが送られません。プルダウンは、「選択してください」のまま送ると deptId= のように値の無い組が送られます。Spring入門では、こうした「選んでいない」状態を、入力チェックで見つけてエラーのメッセージを表示します。
9.9 最初から選んでおく
入力画面を開いたときに、最初からある選択肢を選んだ状態にしておくこともできます。社員の情報を変更する画面のように、今のデータを表示しておきたいときに使います。
| 入力部品 | 書き方 | 例 |
|---|---|---|
| テキストの入力欄 |
value 属性に、最初に入れておく文字を書く |
<input type="text" name="name" value="雷禅 海皇"> |
| ラジオボタン・チェックボックス | 選んでおくものに checked を書く |
<input type="radio" name="gender" value="1" checked> |
| プルダウン | 選んでおく <option> に selected を書く |
<option value="2" selected>営業部</option> |
| 複数行の入力欄 | 開始タグと終了タグの間に、最初に入れておく文字を書く | <textarea name="comment">よろしくお願いします。</textarea> |
checked と selected は、="値" を付けずに、属性の名前だけを書きます。書いてあれば「選んである」、書いていなければ「選んでいない」という意味です。
-
試しに、性別の「男」の
<input>にcheckedを、部署の「営業部」の<option>にselectedを書き足して保存します。ch09/input.html（書き足す場所）<label><input type="radio" name="gender" value="1" checked> 男</label> … <option value="2" selected>営業部</option> -
Chrome で
input.htmlを再読み込みし、「男」と「営業部」が最初から選ばれていることを確認します。 -
確認したら、書き足した
checkedとselectedを消して保存します。
【便利な使い方】再読み込みしても選択が変わらないとき
Chrome は、再読み込みのときに、直前まで選んでいた内容を残すことがあります。checked や selected を書いたのに表示が変わらないときは、アドレスバーをクリックして Enter キーを押し、ページを開き直してください。
9.10 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| ラジオボタンで「男」と「女」の両方を選べてしまう | 2つのラジオボタンの name が違います。どちらも name="gender" にしてください。 |
| 「男」「女」の文字をクリックしても選べない |
<label> で、ラジオボタンと文字の両方を囲んでいません。</label> の位置を確かめてください。 |
| プルダウンを選んでも、送られる値が表示された文字にならない | 正しい動きです。送られるのは <option> の value の値（番号）です。 |
| 自己紹介の欄に、最初から空白や空の行が入っている |
<textarea> と </textarea> の間に、空白や改行があります。続けて書いてください。 |
<textarea> から下の部品が、入力欄の中に文字として表示される |
</textarea> を書き忘れています。<textarea> は終了タグが必要です。 |
ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。
9.11 まとめと確認問題
まとめ
- ラジオボタンは
<input type="radio">で作る。同じnameの中から1つだけを選べる。valueが送られる値になる -
<label>でラジオボタンやチェックボックスと文字を囲むと、文字をクリックしても選べる - 日付の入力欄は
<input type="date">。送られる値は2001-06-15の形になる - プルダウンは
<select name="…">の中に<option value="…">を並べて作る。表示される文字と、送られるvalueは別にできる - チェックボックスは
<input type="checkbox">。いくつでも選べ、選んだ数だけ同じ名前の組が送られる - 複数行の入力欄は
<textarea></textarea>。中では改行や空白がそのまま表示されるので、間を空けずに続けて書く - 最初から選んでおくには、
checked（ラジオボタン・チェックボックス）とselected（プルダウン）を書く。テキストの入力欄はvalueに書く
この章で使ったタグと属性は、付録B「タグの早見表」・付録B「属性の早見表」にまとめています。
確認問題
問1 「はい」「いいえ」のどちらか1つを選ぶラジオボタンを、name を answer、値を yes・no にして、<label> を使って書いてください。
解答を見る
<label><input type="radio" name="answer" value="yes"> はい</label><label><input type="radio" name="answer" value="no"> いいえ</label>
問2 部署のプルダウンで「営業部」を選んで GET で送ると、URL には何が付きますか。<select name="deptId"> と <option value="2">営業部</option> を使っているものとします。
解答を見る
deptId=2 が付きます。表示されている「営業部」ではなく、value の値が送られます。
問3 ラジオボタンとチェックボックスの違いを説明してください。
解答を見る
ラジオボタンは、同じ name の中から1つだけを選べます。チェックボックスは、いくつでも選べ、1つも選ばなくてもかまいません。
問4 次の HTML で、入力欄にはどのように表示されますか。<textarea name="comment">よろしく お願いします</textarea>（「 」は、半角スペース2つを表します）
解答を見る
「よろしく お願いします」のように、間に空白が2つ入ったまま表示されます。<textarea> の中では、ソースの空白や改行がまとめられず、そのまま表示されるためです。<p> の中に書いた場合は、空白は1つにまとめられます。
問5 変更の画面で、部署のプルダウンの「開発部」を最初から選んだ状態にするには、どう書きますか。
解答を見る
「開発部」の <option> に selected を書き、<option value="3" selected>開発部</option> とします。