ここでは、IT系企業の新入エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
新人エンジニアが最初に知っておきたいHTMLの学び方
なぜ、新人エンジニア研修でフォーム部品を学ぶのか、その理由。
前回は、「テーブルで表現力アップ」する方法を学びました。
今回は、ユーザーから情報を得る方法を学びましょう。
フォーム部品はシステムを利用するユーザーとみなさんが作成するWebアプリケーションシステムとの接点です。
そのため、当社の新人エンジニア研修でもフォームの知識は重要です。
フォームを扱う
ここで少し実験をしてみましょう。
例えば、以下のフォームにあなたのフルネームを入れてsearchボタンを押してみましょう。
＜アウトプット＞
＜ソースコード＞
<form method="get" action="https://www.google.co.jp/search">
<p>名前：<input type="text" name="q"></p>
<input type="submit" value="search">
</form>グーグル検索のページのアドレスバーを見ると「https://www.google.co.jp/search？」
の後ろに「q=”あなたの名前”」となっていたのではないでしょうか？
このｑ＝に続く文字列はクエリ文字列と呼ばれ、検索に使用するキーワードです。
このｑは上のフォームの中では、
name="q"
のように定義されています。
また、飛び先としては、
action="https://www.google.co.jp/search"
ということでGoogleが指定されています。
このようにしてプログラムにパラメータを渡すことができるのです。
また、その時のメソッドとしては、“get”と“post”があります。
この二つの違いは大切なのでWebアプリケーションでお伝えします。
今回は、
method="get"
とあるのでgetですね。
このように人間がプログラムにデータを渡すために使われるのがフォームです。
ですから技術者にとってはとても大切な技術になります。
では、ここからフォームの基本を学びましょう。
フォーム
次のようなフォームを作ってみましょう。
＜アウトプット＞
(注： 送信してみてください)
＜ソースコード＞
<form action="https://saycon.co.jp/html/thanks.html" method="post">
<p>名前：<input type="text" name="namae"></p>
<p>備考：<textarea></textarea></p>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form><form>で囲まれた部分が送り先に送られます。
うっかり、<form>で囲い忘れるとそのデータは無視されてしまいますので、注意しましょう。
このフォームデータの送り先を指定しているのがaction属性です。
今回は、thanks.htmlを表示しています。
ただ、送られたデータを受け取ることは、htmlファイルにはできません。
別途、データを受け取るプログラムが必要になります。
method属性は"post"もしくは"get"を指定します。
何も書かないとデフォルトでは"get"になります。
例えばGoogleやAmazonの検索結果などはgetメソッドが使われます。
なぜなら、検索結果をお気に入りに登録したり友人とシェアできると便利だからです。
また、検索結果はキャッシュの対象になり、次回以降、高速に結果表示されます。
一方、ログインページや申し込みページなどではpostメソッドが使われます。
その理由は、個人情報などを入力することが多いのでキャッシュ対象になったり入力データがアクセスログに残ったりしてほしくないからです。
また、間違えてブラウザの再読み込みのボタンをクリックした時に再びサーバーのプログラムが実行されてしまい、二重登録や二重注文として実行されてしまうことを避けるためです。
テキストフィールド（一行テキスト）
＜アウトプット＞
＜ソースコード＞
<input type="text" name="namae">
<input>を使い、type属性で“text”を指定します。
name属性を付けることでデータの送り先でこの"namae"を変数としてテキストフィールドに入力された文字列を受け取ることができます。
ここでは名前なので単純に日本語で"namae"としています。
type属性が“text”の場合はvalue属性を省略することが一般的です。その場合は入力されたデータがvalueとして送られます。
（次回お話するラジオボタン、チェックボックス、プルダウンではvalue属性を設定することが一般的です）
また、value属性をつけることで最初から入力されている文字列（初期値）を設定することもできます。
詳しくは、JavaWebアプリケーション研修でお話しします。
テキストエリア（複数行テキスト）
＜アウトプット＞
＜ソースコード＞
<textarea rows="5" cols="30"></textarea>
先ほどのテキストフィールドとは違い、
複数行書く事ができるフォームをテキストエリアといいます。
テキストエリアに書かれた文字列がvalueとして送信されます。
“rows”で表示行数を、“cols”で一行当たりの最大文字数（列数）を指定することができます。
それぞれ、rows（行）,columns（列）の略です。
情報処理の世界ではよくcolumnという言葉が列という意味でつかわれますが、語源には柱という意味があります。
なお、閉じタグが必要である点、input type="textarea"のように指定するのではない点は間違いやすいので気を付けてください。
送信ボタン
＜アウトプット＞
＜ソースコード＞
<input type="submit" value="送信">
送信ボタンを作るには、
type属性で"submit"を指定します。
ボタン上のテキストはvalue属性で指定できます。
また、このvalue属性の値を送ってservletで受け取ることもできます。
今回は"送信"としました。
クリアボタン
＜アウトプット＞
＜ソースコード＞
<input type="reset" value="リセット">
クリアボタンを作るには、
type属性で"reset" を指定します。
ボタン上のテキストはvalue属性で指定できるのは送信ボタンと同じです。
ただし、クリアボタンが本当に必要な場面は多くありません。
例えば、複雑な検索条件を設定する画面があったときに、一度すべての条件をクリアしたい場合などが該当します。
最後に、1つ実験をしてみましょう。
以下のボタンを押してみてください。(そのあとブラウザバックで戻ってきて下さい)
ここには、冒頭でお話したグーグルにクエリ文字列を送ったのと同じ技術が使われています。
ただし、そのクエリ文字列は隠されています。
ソースコードを見てみましょう。
＜ソースコード＞
<form method="get" action="https://www.google.co.jp/search">
<input type="hidden" name="q" value="Java">
<input type="submit" value="ボタン">
</form>input type="hidden"
となっていますね。
このhidden属性を使うことでユーザーに見せることなくサーバーにクエリ文字列を送ることができます。
この技術はHTMLを学んでいる段階では役に立ちませんが、Webアプリケーションを作るようになると活躍しますので覚えておいてください。
今回は「フォームのテキストフィールド、テキストエリア、送信ボタン、クリアボタン、hidden属性」について学びました。
次回は、「フォーム部品で入力しやすく」する方法について学んでいきましょう。