1. なぜ、新人エンジニア研修でフォーム部品を学ぶのか、その理由
前回は、「画像とテーブルで表現力アップ」する方法を学びました。
今回は、ユーザーから情報を得る方法を学びましょう。フォーム部品はシステムを利用するユーザーとみなさんが作成するWebアプリケーションシステムとの接点です。そのため、当社の新人エンジニア研修でもフォームの知識は重要です。
2. フォームを扱う
ここで少し実験をしてみましょう。
例えば、以下のフォームにあなたのフルネームを入れてsearchボタンを押してみましょう。
＜アウトプット＞
＜ソースコード＞
<html>
<head>
<meta charset="UTF-8">
<title>form1.html</title>
</head>
<body>
<form action="https://www.google.co.jp/search" method="get">
名前：<input name="q" type="text">
<p><button type="submit">search</button></p>
</form>
</body>
</html>グーグル検索のページのアドレスバーを見ると「https://www.google.co.jp/search？」
の後ろに「q=”あなたの名前”」となっていたのではないでしょうか？
このｑ＝に続く文字列はクエリ文字列と呼ばれサーバーに送られてプログラムで利用される変数のようなものです。Google検索の場合のクエリ文字列は検索に使用するキーワードになります。
このｑは上のフォームの中では、
name="q"
のように定義されています。
また、飛び先としては、
action="https://www.google.co.jp/search"
ということでGoogleが絶対URLで指定されています。
このようにしてプログラムにパラメータを渡すことができるのです。また、その時のメソッドとしては、“get”と“post”があります。この二つの違いは大切なので詳しくはWebアプリケーションでお伝えしますが、ここでも簡単に触れると。
getは、その名の通りリソースの取得をリクエストするメソッドです。「○○モン、ゲットだぜ」のgetです。
postは、郵便ポストが郵便物を送る時に使われることからも分かるように、リソースにデータを送信するためのメソッドです。
今回は、
method="get"
とあるのでgetですね。
このように人間がプログラムにデータを渡すために使われるのがフォームです。ですから技術者にとってはとても大切な技術になります。ここからフォームの基本を学びましょう。
調べてみましょう
このようにaction属性で指定できるのは自サイトに限りません。このことは便利な半面、セキュリティ上問題になることもあります。
CSRF【cross-site request forgeries】は上記の仕組みを悪用した攻撃手法です。その仕組と防御方法を調べてみましょう。
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の違いは下図1のとおりです。
例えばGoogleやAmazonの検索結果などはgetメソッドが使われます。なぜなら、検索結果をお気に入りに登録したり友人とシェアできると便利だからです。また、検索結果はキャッシュの対象になり、次回以降、高速に結果表示されます。
一方、ログインページや申し込みページなどではpostメソッドが使われます。その理由は、個人情報などを入力するのでキャッシュ対象になったり入力データがアクセスログに残ったりしてほしくないからです。また、間違えてブラウザの再読み込みのボタンをクリックした時に再びサーバーのプログラムが実行されてしまい、二重登録や二重注文として実行されてしまうことを避けるためです。
なお、getやpostはhttpメソッドと呼ばれるメソッドの一部です。この研修では上記の2つのみ使用します。
3. テキストフィールド（一行テキスト）
＜アウトプット＞
＜ソースコード（抜粋の上再掲）＞
<input type="text" name="namae">テキストフィールドを作るにはinputタグを使い、type属性で“text”を指定します。また、name属性を付けることでテキストフィールドに入力されたデータに名前をつけることができます。(今回は名前の入力欄なので"namae"としています)データの送り先でこの"namae"を指定してテキストフィールドに入力された文字列を受け取ることができます。
研修の最後で作成するWebアプリケーションで最も多用するのがこのテキストフィールドでしょう。全ての入力フォームをテキストフィールドで作成いただいてもこの新人研修では大丈夫です。
注意点としてはテキストフィールドに入力されたデータの型は全て文字列型だという点です。数値も文字列として扱われますので、もしも、プログラムの側で数値として扱いたい場合は変換が必要になります。
- 入力された文字列を整数として扱うのは何クラスのどんなメソッドを使うのでしたか？（例えば、"10"という文字列を10という整数として解釈するメソッド）
| あなたの答え： |
余談ですが、皆さんがフォームを入力していて以前の入力内容が自動的に出てきたことはありませんか？たとえば、名前の欄には名前の候補が出てくるというというような。この機能をオートコンプリートといいますが、ブラウザは主としてこのname属性の一致で候補を出しているようです。便利な半面、セキュリティには気をつけないといけない機能です。
3.1 name以外の任意の属性
当社の新人研修の最終課題でよく使われるname以外の属性をご紹介します。なお、新人研修の中でこれらの属性はつけてもつけなくても大丈夫です。
①required属性
入力必須項目につけます。
<input type="text" required>②placeholder属性
placeholder属性は、入力内容のサンプルを表示します。
<input type="text" placeholder="お名前を入れてください">③maxlength・minlength属性
maxlength・minlength属性はそれぞれ最大の入力文字数、最小の入力文字数を指定します。
maxlenghtはフォーム自体に入力制限がかかり文字数以上は入力できなくなります。
minlenghtは送信ボタンを押した時にエラーが表示されます。（ツールチップでお知らせが出るブラウザもあります）
なお、ここではパスワードの入力フィールドを使っていますので参考にしてください。
<head>
<meta charset="UTF-8">
<title>form5.html</title>
</head>
<body>
<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>
</body>
</html>④value属性
value属性をつけることで最初から入力されている文字列（初期値）を設定することができます。
type属性が“text”の場合はvalue属性を省略することが一般的です。その場合は入力されたデータがvalueとして送られます。詳しくは、JavaWebアプリケーション研修でお話しします。
<input type="text" value="バリュー属性のデータです"><br>⑤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”で一行当たりの最大文字数（列数）を指定することができます。それぞれ、【rows】（行）,【columns】（列）の略です。情報処理の世界ではよくcolumnという言葉が列という意味でつかわれますが、語源には柱という意味があります。ちなみに、文章のコラムの語源も同じで、新聞などの縦の囲み記事のことを指したのがその起源です。
なお、閉じタグが必要である点、input type="textarea"のように指定するのではない点は間違いやすいので気を付けてください。
5. 送信ボタン
＜アウトプット＞
＜ソースコード(抜粋して再掲)＞
<button type="submit">送信</button>送信ボタンを作るには、buttonタグを使いtype属性で"submit"を指定します。英語の【submit】には「提出」という意味があります。例えば、【submit a report】でレポートを提出するという意味です。
今回は"送信"としました。
6. 隠しフィールドを送る
以下の送信ボタンを押してみてください。
ここには、冒頭でお話したグーグルにクエリ文字列を送ったのと同じ技術が使われています。
ただし、そのクエリ文字列は隠されていました。
ソースコードを見てみましょう。
＜ソースコード＞
<html>
<head>
<meta charset="UTF-8">
<title>form9.html</title>
</head>
<body>
<form action="https://www.google.co.jp/search" method="get">
<p><input name="q" type="hidden" value="Java"></p>
<p><button type="submit">送信</button></p>
</form>
</body>
</html>input type="hidden"
となっていますね。inputタグのhidden属性を使うことでユーザーに見せることなくサーバーにクエリ文字列を送ることができます。隠しフィールドと呼びます。
この技術はHTMLを学んでいる段階では役に立ちませんが、Webアプリケーションを作るようになると活躍しますので覚えておいてください。
今回は「フォームのテキストフィールド、テキストエリア、送信ボタン、クリアボタン、hidden属性」について学びました。
なお、ここでお話ししきれない数多くのフォームがあります。以下の補講（リンク）も参考にしてみてください。
補講.その他のフォーム部品
<まとめ：隣の人に正しく説明できたらチェックを付けましょう>
□ formタグで囲まれた部分がフォームとなり、action属性に指定された送り先に送られる
□ formタグのmethod属性には"get"と"post"がある
□ テキストフィールドを作るにはinputタグを使い、type属性で“text”を指定する
□ テキストフィールドにname属性をつけることでデータの送り先でこの名前を使ってテキストフィールドに入力された文字列を受け取ることができる
□ 送信ボタンを作るには、buttonタグを使いtype属性で"submit"を指定する
□ inputタグのhidden属性を使うことでユーザーに見せることなくサーバーにクエリ文字列を送ることができる
今回は「フォーム部品でユーザーに入力してもらう」方法について学びました。
次回は「BootStrapで今風のデザインを実現する」方法について学びます。