1. なぜ、新人エンジニア研修でフォーム部品を学ぶのか、その理由
前回は、「画像とテーブルで表現力アップ」する方法を学びました。
今回は、ユーザーが入力したデータをWebアプリケーションで処理する方法を学びます。フォーム部品はユーザーとみなさんが作成する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=”あなたの名前”」となっていたのではないでしょうか？
このｑは検索キーワード、＝に続く文字列はクエリ文字列と呼ばれます。クエリ文字列は、サーバーに送信される 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 | URL 例：http://localhost:8080/login1 id=imai&pass=p | × ユーザーから見えるのでIDやパスワード格納するには向かない | ○ リンクを使って他のユーザーと情報共有できる |
| post | メッセージのボディ部 例：http://localhost:8080/login1 | ○ ユーザーから見えないのでIDやパスワードを格納できる | × リンクを使って他のユーザーと情報共有できない |
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属性はそれぞれ最大の入力文字数、最小の入力文字数を指定します。
maxlengthはフォーム自体に入力制限がかかり文字数以上は入力できなくなります。
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 で入力欄の横幅を指定します。なお、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属性」について学びました。
なお、ここでお話ししきれない数多くのフォームがあります。以下の補講（リンク）も参考にしてみてください。
補講.その他のフォーム部品
今回は「フォーム部品でユーザーに入力してもらう」方法について学びました。
次回は「BootStrapで今風のデザインを実現する」方法について学びます。