1. なぜ、新人エンジニア研修でフォーム部品を学ぶのか、その理由
前回は、「画像とテーブルで表現力アップ」する方法を学びました。
今回は、ユーザーが入力したデータをWebアプリケーションで処理する方法を学びます。フォーム部品はユーザーとみなさんが作成するWebアプリケーションシステムとの接点です。そのため、当社の新人エンジニア研修でもフォームの知識は重要です。
2. フォームを扱う
ここで少し実験をしてみましょう。
例えば、以下のフォームのsearchボタンをクリックしてみましょう。
＜アウトプット＞
＜ソースコード＞
<form action="https://www.google.co.jp/search" method="get">
<label>
名前：
<input type="text" name="q" value="">
</label>
<div><button type="submit">search</button></div>
</form>グーグル検索のページのアドレスバーを見ると「https://www.google.co.jp/search？」
の後ろに「q=”<あなたの名前>”」となっていたのではないでしょうか？
このｑは検索キーワード、＝に続く文字列はクエリ文字列と呼ばれます。クエリ文字列は、サーバーに送信される key=value 形式のデータで、プログラム側で処理されます。Google検索では、クエリ文字列が検索キーワードとして利用されます。
このｑは上のフォームの中では、
name="q"
のように定義されています。
また、飛び先としては、
action="https://www.google.co.jp/search"
ということでGoogleが絶対URLで指定されています。
このようにしてプログラムにパラメータを渡すことができるのです。また、その時のメソッドとしては、“get”と“post”があります。この二つの違いは大切なので詳しくはWebアプリケーションでお伝えしますが、ここでも簡単に触れると。
getは、その名の通りリソースの取得をリクエストするメソッドです。「○○モン、ゲットだぜ」のgetです。
postは、郵便ポストが郵便物を送る時に使われることからも分かるように、リソースにデータを送信するためのメソッドです。
例えば、ログインフォームでは POST を使用し、ユーザー名やパスワードの情報をサーバーに送ります。
今回は、
method="get"
とあるのでgetですね。GET は、サーバーからデータを取得するためのHTTPメソッドです。例えば、Google検索では、検索キーワードをURLに含めてリクエストを送るために GET を使用します。
フォームは、ユーザーが入力したデータをサーバーに送信するための仕組みです。例えば、検索ボックス、ログイン画面、問い合わせフォームなど、さまざまな用途で利用されます。ですから技術者にとってはとても大切な技術になります。ここからフォームの基本を学びましょう。
2.1 フォームの基本
次のようなフォームを作ってみましょう。
＜アウトプット＞
(注： 送信してみてください)
＜ソースコード＞
<html>
<head>
<meta charset="UTF-8">
<title>form2.html</title>
</head>
<body>
<form action="https://saycon.co.jp/html/thanks.html" method="post">
<p>名前：<input name="namae" type="text"></p>
<p>備考：<textarea></textarea></p>
<p><button type="submit">送信</button></p>
</form>
</body>
</html>formタグで囲まれた部分のデータがaction属性に指定された送り先（上記の場合はhttps://saycon.co.jp/html/thanks.html）に送られます。
うっかり、formタグで囲い忘れるとそのデータは無視され、送信されませんので注意しましょう。
このフォームデータの送り先を指定しているのがaction属性でした。今回は、thanks.htmlに送られています。
ただ、送られたデータを受け取ることは、htmlファイルにはできません。別途、データを受け取るプログラムが必要になりますので詳しくはWebアプリケーションのところでお話します。
method属性は"get"もしくは"post"を指定します。
何も書かないとデフォルトでは"get"になります。getとpostの違いは下図のとおりです。
例えばGoogleやAmazonの検索結果などはgetメソッドが使われます。なぜなら、検索結果をお気に入りに登録したり友人とシェアできると便利だからです。また、検索結果はキャッシュの対象になり、次回以降、高速に結果表示されます。
一方、ログインページや申し込みページなどではpostメソッドが使われます。その理由は、個人情報などを入力するのでキャッシュ対象になったり入力データがアクセスログに残ったりしてほしくないからです。また、間違えてブラウザの再読み込みのボタンをクリックした時に再びサーバーのプログラムが実行されてしまい、二重登録や二重注文として実行されてしまうことを避けるためです。
以下にgetとpostの違いをまとめます。
| 比較項目 | GET | POST |
|---|---|---|
| パラメータの送信場所 | URL | リクエストボディ |
| 送信後のURLの例 | http://localhost:8080/login1 id=imai&pass=p | http://localhost:8080/login1 |
| セキュリティ | 低（見えるためIDやパスワード格納するには向かない） | 高（見えない） |
| ブックマーク可能性 | ○ | × |
| キャッシュ対象 | ○ | × |
getは中身の見えてしまうハガキ、
postは中身の見えない封筒のイメージです。
なお、getやpostはhttpメソッドと呼ばれるメソッドの一部です。この研修では上記の2つのみ使用します。
3. テキストフィールド（一行テキスト）
＜アウトプット＞
＜ソースコード（抜粋の上再掲）＞
<input type="text" name="namae" value="value属性">テキストフィールドを作るにはinputタグを使い、type属性で“text”を指定します。また、name属性を付けることでテキストフィールドに入力されたデータに名前をつけることができます。(今回は名前の入力欄なので"namae"としています)データの送り先でこの"namae"を指定してテキストフィールドに入力された文字列を受け取ることができます。
研修の最後で作成するWebアプリケーションで最も多用するのがこのテキストフィールドでしょう。全ての入力フォームをテキストフィールドで作成いただいてもこの新人研修では大丈夫です。
注意点としてはテキストフィールドに入力されたデータの型は全て文字列型だという点です。数値も文字列として扱われますので、もしも、プログラムの側で数値として扱いたい場合は変換が必要になります。
- 入力された文字列を整数として扱うのは何クラスのどんなメソッドを使うのでしたか？（例えば、"10"という文字列を10という整数として解釈するメソッド）
| あなたの答え： |
余談ですが、皆さんがフォームを入力していて以前の入力内容が自動的に出てきたことはありませんか？たとえば、名前の欄には名前の候補が出てくるというというような。この機能をオートコンプリートといいますが、ブラウザは主としてこのname属性の一致で候補を出しているようです。便利な半面、セキュリティには気をつけないといけない機能です。
3.1 name以外の任意の属性
当社の新人研修の最終課題でよく使われる属性をご紹介します。
①value属性
value属性は、主にフォーム入力要素で使用され、あらかじめ入力欄に表示したい初期値や、送信時にサーバーへ渡す値を指定するために使います。
たとえば、テキストボックスに最初から「バリュー属性のデータです」と表示したい場合、次のようにvalue属性にその文字列を指定します。
<input type="text" value="バリュー属性のデータです">
type="text"の場合、value属性で設定した値は初期値になります。ただし、ユーザーが文字列を入力すればその値で上書きされ、送信されるのはユーザーが入力した内容です。
逆に、valueを省略すれば空欄からの入力となり、入力された値がそのまま送信されます。
一方、あとで見るラジオボタンやチェックボックスでは、value属性は「選択されたときに送信される値」として使われます。
たとえば性別の入力フォームで「男性」「女性」などの選択肢を用意する場合、それぞれの<input>要素にvalueを設定しておくことで、サーバー側で「どちらが選ばれたか」を正確に判断できます。
このような使い方は、あとで学ぶWebアプリケーション開発でも頻繁に登場します。後にサーバーサイド処理やデータベースとの連携を学ぶ際にも、value属性の役割を正しく理解しておくことは非常に重要です。
②required属性
入力必須項目につけます。
<input type="text" required>③placeholder属性
placeholder属性は、入力内容のサンプルを表示します。
<input type="text" placeholder="お名前を入れてください">④maxlength・minlength属性
maxlength・minlength属性はそれぞれ最大の入力文字数、最小の入力文字数を指定します。
maxlengthはフォーム自体に入力制限がかかり文字数以上は入力できなくなります。
minlenghtは送信ボタンを押した時にエラーが表示されます。（ツールチップでお知らせが出るブラウザもあります）
なお、ここではパスワードの入力フィールドを使っていますので参考にしてください。
<form action="#">
<input type="password" maxlength="10"><br>
<input type="password" minlength="5"><br>
<input type="password" minlength="5" maxlength="10"><br>
<button type="submit">送信</button>
</form>ちなみに、上記の例で
<form action="#">
の「#」は現在と同じページを再起的に呼び出すときの書き方です。また、送信先のプログラムの名前が決まっていないときにもこのように書くことがあります。
⑤readonly属性
readonly属性はユーザーに内容を変更されたくない時に使用します。
見た目は通常のフォームと同じですが、入力を編集できません。
表示しているデータを送信したいけど変更されたくないときに有効です。
<input type="text" readonly value="読み取り専用です"><br>⑥disabled属性
readonly属性とよく似ていますが、ユーザーに変更できないことを示したフォームになります。
<input type="text" disabled value="読み取り専用です"><br>4. テキストエリア（複数行テキスト）
＜アウトプット＞
＜ソースコード（抜粋）＞
<textarea rows="5" cols="30"></textarea>先ほどのテキストフィールドとは違い、複数行書く事ができるフォームをテキストエリアといいます。テキストエリアに書かれた文字列がvalueとして送信されます。
rows で表示する行数、cols で入力欄の横幅を指定します。なお、cols は最大文字数ではなく、ブラウザ上での見た目の幅を決めるための目安です。それぞれ、【rows】（行）,【columns】（列）の略です。
情報処理の世界ではよくcolumnという言葉が列という意味でつかわれますが、語源には柱という意味があります。ちなみに、文章のコラムの語源も同じで、新聞などの縦の囲み記事のことを指したのがその起源です。
なお、①閉じタグが必要である、②input type="textarea"のように指定するのではない、という２点は間違いやすいので気を付けてください。
5. 送信ボタン
＜アウトプット＞
＜ソースコード(抜粋して再掲)＞
<button type="submit">送信</button>送信ボタンを作るには、buttonタグを使いtype属性で"submit"を指定します。フォーム送信に関わるボタンはフォームタグの中に書く必要があります。
英語の【submit】には「提出」という意味があります。例えば、【submit a report】でレポートを提出するという意味です。
今回は"送信"としました。
6. 隠しフィールドを送る
以下の送信ボタンを押してみてください。
ここには、冒頭でお話したグーグルにクエリ文字列を送ったのと同じ技術が使われています。
ただし、そのクエリ文字列は隠されています。
ソースコードを見てみましょう。
＜ソースコード＞
<form action="https://www.google.co.jp/search" method="get">
<p><input type="hidden" name="q" value="セイ・コンサルティング・グループ"></p>
<p><button type="submit">送信</button></p>
</form>input type="hidden"
となっていますね。inputタグのhidden属性を使うことでユーザーに見せることなくサーバーにクエリ文字列（この場合はvalue属性で指定した「セイ・コンサルティング・グループ」という文字列）を送ることができます。隠しフィールドと呼びます。
この技術はHTMLを学んでいる段階では役に立ちませんが、Webアプリケーションを作るようになると活躍しますので覚えておいてください。
7. 用途に合わせた入力部品
セレクトボックス
セレクトボックスは複数の選択肢から一つを選択する時に使われるフォーム部品です。すべての選択肢は表示しませんので、他のフォーム部品と比較してスペースを取りません。
＜アウトプット＞
＜ソースコード＞
<select name="menu">
<option value="1">ひつまぶし</option>
<option value="2">手羽先</option>
<option value="3">カレーうどん</option>
<option value="4">味噌煮込みうどん</option>
<option value="5">きしめん</option>
</select>セレクトボックスを作るにはselectタグを使い、その中に選択肢の内容をoptionタグに入れます。
name="menu"：送信されるデータの名前（キー）です。 つまり選ばれた値は、menu=●の形で送られます。
ユーザーに表示されるのは「ひつまぶし」ですが、実際に送信されるのは value="1" です。これは「選択肢をデータベースのIDで管理したい」場面などでよく使います。
セレクトボックスは何かを選ぶことを強制します。なにも選ばないという値を取ることができません。そこで良くとられるのが以下のように「▼選択してください」という選択肢を用意するという対応です。
＜アウトプット＞
＜ソースコード＞
<select>
<option selected>▼選択してください</option>
<option>ひつまぶし</option>
<option>手羽先</option>
<option>カレーうどん</option>
<option>味噌煮込みうどん</option>
<option>きしめん</option>
</select><select>タグにname="menu"とrequired属性を指定することで、選択された値が「menu」という名前で送信され、未選択のまま送信しようとするとブラウザが警告を出して送信を防ぎます。
最初に表示される「▼選択してください」はvalue=""かつdisabled属性が付いているため、実際には選択できず、案内用の項目として機能します。
また、各<option>にはvalue属性が省略されており、表示されているテキスト（料理名）がそのまま送信される値になります。
ラジオボタン
ラジオボタンも複数の選択肢から一つを選択する時に使うフォーム部品です。ただし、セレクトボックスとは異なりすべての選択肢がユーザーに見えています。どれか一つしかスイッチを押せない昔のカーラジオのイメージです。
＜アウトプット＞
男 女
＜ソースコード＞
<input type="radio" name="gender1" value="male">男
<input type="radio" name="gender1" value="female">女ラジオボタンを作るにはinputタグのtype属性には"radio"を指定します。
ここでは「男」と「女」の2つの選択肢があり、どちらか一方を選ぶことができます。
両方のラジオボタンには同じname="gender"が指定されているので、1つだけ選べるようになっています。もしも、異なるnameを設定してしまうと複数同時に選べてしまうため、ラジオボタンではnameを統一することが非常に重要です。
また、ラジオボタンとそのラベル（「男」「女」）はそれぞれ<label>タグで囲まれているので、ラベルの文字部分をクリックするだけでも該当のラジオボタンが選択されるようになっています。
＜アウトプット＞
男 女
＜ソースコード＞
<input type="radio" name="gender">男
<input type="radio" name="gender" checked="checked">女デフォルト値を設定するにはchecked属性を"checked"にします。ちなみに、ラジオボタンは一度選ぶと選択肢を外すことができなくなります。そこは、前のセレクトボックスと同じで、次のチェックボックスと違うところです。よって、「回答しない」という選択肢を用意したほうが良いこともあります。
なお、以下のように選択肢が長文の場合はピンポイントにボタン部分を選択することが難しくなります。
＜選択しにくいラジオボタン＞
長い長い選択肢１ 長い長い選択肢２＜ソースコード＞
<input name="q1" type="radio">長い長い選択肢１
<input name="q1" type="radio">長い長い選択肢２そんな場合に便利なのがlabelタグです。上記「長い長い選択肢１」のような選択肢の文をラベルといいます。以下のようにlabelタグのfor属性とinputタグのid属性を一致させることより、ラベル部分もクリックできるようになります。したがってこのlabelタグを必ず付けるようにしてください。
＜選択しやすいラジオボタン＞
＜ソースコード＞
<label for="r1"><input id="r1" name="q1" type="radio">長い長い選択肢１</label>
<label for="r2"><input id="r2" name="q1" type="radio">長い長い選択肢２</label>なお、ラジオボタンは、回答者には選択肢の各項目が想像できない場合に使用します。すべての選択肢を示して、その中からじっくりと選んで欲しい時です。
一方､ラジオボタンの欠点はスペースを取ることです。スペースを節約したい場合には、前述のセレクトボックスを使います。セレクトボックスは、選択肢の内容を見なくても想像がつくような設問に使用するのが原則です。例えば都道府県名などがセレクトボックスの項目として最適です。
チェックボックス
チェックボックスは複数の選択肢を選択できるようにする時に使われるフォーム部品です。先のラジオボタンが１つしか選べなかったのと好対照です。
チェックボックスを作るにはinputタグのtype属性に"checkbox"を指定します。 セレクトボックスとは違い、すべての選択肢が表示されます。
＜アウトプット＞
＜ソースコード＞
<fieldset>
<legend>お土産を選んでください（複数選択可）</legend>
<label for="c1">
<input type="checkbox" name="miyage" value="1" id="c1">ういろう
</label><br>
<label for="c2">
<input type="checkbox" name="miyage" value="2" id="c2">うなぎパイ
</label><br>
<label for="c3">
<input type="checkbox" name="miyage" value="3" id="c3">名古屋嬢
</label><br>
</fieldset>
<fieldset>タグは、関連するフォーム要素をひとまとまりとして視覚的・論理的にグループ化するために使われます。
その見出しとして使われるのが<legend>タグで、ここでは「お土産を選んでください（複数選択可）」と表示され、グループの内容を説明しています。
各チェックボックスには<input type="checkbox">を使用し、それぞれにname="miyage"を指定しています。こうすることで、フォーム送信時に複数の選択肢が同じキー（miyage）で送られ、サーバー側では配列として処理されます。
また、id属性とfor属性を連携させた<label>タグにより、ラベル部分（例：「ういろう」）をクリックしてもチェックボックスを操作でき、ユーザーの操作性とアクセシビリティが向上しています。
なお、デフォルト値を設定するにはラジオボタンと同じようにchecked属性に"checked"を指定します。
8. その他の入力部品
さらに様々なフォーム部品を見てみましょう。きっとあなたもどこかの機会で目にしたことがあるはずです。
なお、これらのタグはHTML５から追加されたタグなので一部のブラウザでは表示されないことがあります。
パスワード入力フォーム
入力した文字が「・」になり見えなくなります。
＜アウトプット＞
＜ソースコード＞
<input type="password" name="example">ファイルの送信欄
＜アウトプット＞
＜ソースコード＞
<input name="example" type="file">カレンダー入力
＜アウトプット＞
カレンダーから日付を選ぶことも直接入力することもできます。
＜ソースコード＞
<input name="example" type="date">メールアドレスの入力欄
送信ボタンを押すときにメールアドレスに@が含まれていないと注意メッセージが表示され、送信できなくなります。
＜アウトプット＞
＜ソースコード＞
<input type="email" name="example">色の入力欄
＜アウトプット＞
＜ソースコード＞
<input name="example" type="color" >検索テキストの入力欄
何か文字列を入力すると入力欄の右側に「×」が表示されます。「×」を押すと入力した文字列を一度に消去できます。
＜アウトプット＞
＜ソースコード＞
<input type="search" name="example">プレースホルダで入力補助
＜アウトプット＞
＜ソースコード＞
<input type="text" placeholder="入力してください" name="example" >ただし、プレースホルダーの文字列をユーザーが入力済みの文字列と間違えることがあります。
とするよりも、
とした方が間違いは少なくなります。
入力必須項目
inputタグにrequired属性を加えることで入力必須項目にできます。入力せずに「送信」ボタンを押すとメッセージを表示します。
＜アウトプット＞
＜ソースコード＞
<form action="#">
<input type="text" name="namae" required>
<button type="submit">送信</button>
</form>入力補完
入力補完は一行テキストとセレクトボックスを合わせたようなフォーム部品です。選択肢を示しながら、ユーザーに自由な文字列を入力してもらうことも可能です。
入力補完を行うには、以下の３ステップが必要です。
- inputタグのautocomplete属性を"on"にします
- inputタグのlist属性とdatalistタグのid属性を同じものにします
- datalistタグ内のoptionタグのvalue属性に設定された属性値が選択肢になります
＜アウトプット＞
＜ソースコード＞
<label for="area">希望のエリア:</label>
<input type="text" id="area" name="area" autocomplete="on" list="nagoya">
<datalist id="nagoya">
<option value="栄">
<option value="名駅">
<option value="今池">
</datalist>今回は「フォーム部品でユーザーに入力してもらう」方法について学びました。
次は、「Chrome DevToolsでサイトの見た目を変更する」です。