ここでは、IT系企業の新人エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
目次
1. なぜ、新人エンジニア研修でフォーム部品を学ぶのか、その理由
前回は、「テーブルで表現力アップ」する方法を学びました。
今回は、ユーザーから情報を得る方法を学びましょう。
フォーム部品はシステムを利用するユーザーとみなさんが作成するWebアプリケーションシステムとの接点です。
そのため、当社の新人エンジニア研修でもフォームの知識は重要です。
2. フォームを扱う
ここで少し実験をしてみましょう。
例えば、以下のフォームにあなたのフルネームを入れてsearchボタンを押してみましょう。
＜アウトプット＞
＜ソースコード＞
グーグル検索のページのアドレスバーを見ると「https://www.google.co.jp/search？」
の後ろに「q=”あなたの名前”」となっていたのではないでしょうか？
このｑ＝に続く文字列はクエリ文字列と呼ばれサーバーに送られてプログラムで利用される変数のようなものです。
Google検索の場合のクエリ文字列は検索に使用するキーワードになります。
このｑは上のフォームの中では、
name="q"
のように定義されています。
また、飛び先としては、
action="https://www.google.co.jp/search"
ということでGoogleが指定されています。
このようにしてプログラムにパラメータを渡すことができるのです。
また、その時のメソッドとしては、“get”と“post”があります。
この二つの違いは大切なので詳しくはWebアプリケーションでお伝えします。
今回は、
method="get"
とあるのでgetですね。
このように人間がプログラムにデータを渡すために使われるのがフォームです。
ですから技術者にとってはとても大切な技術になります。
ここからフォームの基本を学びましょう。
2.1 フォームの基本
次のようなフォームを作ってみましょう。
＜アウトプット＞
(注： 送信してみてください)
＜ソースコード＞
formタグで囲まれた部分がaction属性に指定された送り先（上記の場合はhttps://saycon.co.jp/html/thanks.html）に送られます。
うっかり、formタグで囲い忘れるとそのデータは無視され、送信されませんので注意しましょう。
このフォームデータの送り先を指定しているのがaction属性でした。
今回は、thanks.htmlに送られています。
ただ、送られたデータを受け取ることは、htmlファイルにはできません。
別途、データを受け取るプログラムが必要になりますので詳しくはWebアプリケーションのところでお話します。
method属性は"get"もしくは"post"を指定します。
何も書かないとデフォルトでは"get"になります。
getとpostの違いは下図9.1のとおりです。
例えばGoogleやAmazonの検索結果などはgetメソッドが使われます。
なぜなら、検索結果をお気に入りに登録したり友人とシェアできると便利だからです。
また、検索結果はキャッシュの対象になり、次回以降、高速に結果表示されます。
一方、ログインページや申し込みページなどではpostメソッドが使われます。
その理由は、個人情報などを入力するのでキャッシュ対象になったり入力データがアクセスログに残ったりしてほしくないからです。
また、間違えてブラウザの再読み込みのボタンをクリックした時に再びサーバーのプログラムが実行されてしまい、二重登録や二重注文として実行されてしまうことを避けるためです。
3. テキストフィールド（一行テキスト）
＜アウトプット＞
＜ソースコード（抜粋）＞
<input type="text" name="namae">
テキストフィールドを作るにはinputタグを使い、type属性で“text”を指定します。
また、name属性を付けることでテキストフィールドに入力されたデータに名前をつけることができます。(今回は名前の入力欄なので"namae"としています)
データの送り先でこの"namae"を指定してテキストフィールドに入力された文字列を受け取ることができます。
研修の最後で作成するWebアプリケーションで最も多用するのがこのテキストフィールドでしょう。
全ての入力フォームをテキストフィールドで作成いただいてもこの新人研修では大丈夫です。
注意点としてはテキストフィールドに入力されたデータの型は全て文字列型だという点です。
数値も文字列として扱われますので、もしも、プログラムの側で数値として扱いたい場合は変換が必要になります。
余談ですが、皆さんがフォームを入力していて以前の入力内容が自動的に出てきたことはありませんか？
たとえば、名前の欄には名前の候補が出てくるというというような。
この機能をオートコンプリートといいますが、ブラウザは主としてこのname属性の一致で候補を出しているようです。
便利な半面、セキュリティには気をつけないといけない機能です。
3.1 name以外の任意の属性
当社の新人研修の最終課題でよく使われるname以外の属性をご紹介します。
なお、これらの属性はつけてもつけなくても大丈夫です。
①required属性
入力必須項目につけます。
②placeholder属性
placeholder属性は、入力内容のサンプルを表示します。
③maxlength・minlength属性
maxlength・minlength属性はそれぞれ最大の入力文字数、最小の入力文字数を指定します。
maxlenghtはフォーム自体に入力制限がかかり文字数以上は入力できなくなります。
minlenghtは送信ボタンを押した時にエラーが表示されます。（ツールチップでお知らせが出るブラウザもあります）
なお、ここではパスワードの入力フィールドを使っていますので参考にしてください。
④value属性
value属性をつけることで最初から入力されている文字列（初期値）を設定することができます。
type属性が“text”の場合はvalue属性を省略することが一般的です。
その場合は入力されたデータがvalueとして送られます。
詳しくは、JavaWebアプリケーション研修でお話しします。
⑤readonly属性
readonly属性はユーザーに内容を変更されたくない時に使用します。
見た目上は通常のフォームと変わりありませんが変更を加えることができません。
表示しているデータを送信したいけど変更されたくないときに有効です。
⑥disabled属性
readonly属性とよく似ていますが、ユーザーに変更できないことを示したフォームになります。
4. テキストエリア（複数行テキスト）
＜アウトプット＞
＜ソースコード（抜粋）＞
<textarea rows="5" cols="30"></textarea>
先ほどのテキストフィールドとは違い、複数行書く事ができるフォームをテキストエリアといいます。
テキストエリアに書かれた文字列がvalueとして送信されます。
“rows”で表示行数を、“cols”で一行当たりの最大文字数（列数）を指定することができます。
それぞれ、rows（行）,columns（列）の略です。
情報処理の世界ではよくcolumnという言葉が列という意味でつかわれますが、語源には柱という意味があります。
ちなみに、文章のコラムの語源も同じで、新聞などの縦の囲み記事のことを指したのがその語源です。
なお、閉じタグが必要である点、input type="textarea"のように指定するのではない点は間違いやすいので気を付けてください。
5. 送信ボタン
＜アウトプット＞
＜ソースコード(抜粋)
<button type="submit">送信</button>
送信ボタンを作るには、buttonタグを使いtype属性で"submit"を指定します。
今回は"送信"としました。
6. 隠しフィールドを送る
以下の送信ボタンを押してみてください。
ここには、冒頭でお話したグーグルにクエリ文字列を送ったのと同じ技術が使われています。
ただし、そのクエリ文字列は隠されていました。
ソースコードを見てみましょう。
＜ソースコード＞
input type="hidden"
となっていますね。
inputタグのhidden属性を使うことでユーザーに見せることなくサーバーにクエリ文字列を送ることができます。
隠しフィールドと呼びます。
この技術はHTMLを学んでいる段階では役に立ちませんが、Webアプリケーションを作るようになると活躍しますので覚えておいてください。
今回は「フォームのテキストフィールド、テキストエリア、送信ボタン、クリアボタン、hidden属性」について学びました。
「新人エンジニア向けHTML講座」は、これにて一旦最終回とさせていただきます。
最後までお読みいただきありがとうございました。
これからの学びは広大なインターネット空間でどうぞ。
<まとめ：隣の人に正しく説明できたらチェックを付けましょう>
□formタグで囲まれた部分がフォームとなり、action属性に指定された送り先に送られる
□formタグのmethod属性には"get"と"post"がある
□テキストフィールドを作るにはinputタグを使い、type属性で“text”を指定する
□テキストフィールドにname属性をつけることでデータの送り先でこの名前を使ってテキストフィールドに入力された文字列を受け取ることができる
□送信ボタンを作るには、buttonタグを使いtype属性で"submit"を指定する
□inputタグのhidden属性を使うことでユーザーに見せることなくサーバーにクエリ文字列を送ることができる