ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

前回は、「テーブルで表現力アップ」する方法を学びました。
 
今回は、ユーザーから情報を得る方法を学びましょう。
 

フォームを扱う

フォーム

次のようなフォームを作ってみましょう。

<アウトプット>

名前:

備考:

(注: 送信してみてください)

<ソースコード>

<form>で囲まれた部分が送り先に送られます。

うっかり、<form>で囲い忘れるとそのデータは無視されてしまいますので、注意しましょう。

このフォームデータの送り先を指定しているのがaction属性です。

今回は、thanks.htmlを表示しています。

ただ、送られたデータを受け取ることは、htmlファイルにはできません。

別途、データを受け取るプログラムが必要になります。

 

method属性は”post”もしくは”get”を指定します。

何も書かないとデフォルトでは”get”になります。

例えばGoogleやAmazonの検索結果などはgetメソッドが使われます。

なぜなら、検索結果をお気に入りに登録したり友人とシェアできると便利だからです。

また、検索結果はキャッシュの対象になり、次回以降、高速に結果表示されます。

一方、ログインページや申し込みページなどではpostメソッドが使われます。

その理由は、個人情報などを入力することが多いのでキャッシュ対象になったり入力データがアクセスログに残ったりしてほしくないからです。

また、間違えてブラウザの再読み込みのボタンをクリックした時に再びサーバーのプログラムが実行されてしまい

二重登録や二重注文として実行されてしまうことを避けるためです。

テキストフィールド(一行テキスト)

<アウトプット>

 
 <ソースコード>

<input>を使い、type属性で“text”を指定します。

name属性を付けることでデータの送り先でこの”namae”を変数として受け取ることができます。

ここでは名前なので単純に日本語で”namae”としています。

type属性が“text”の場合はvalue属性を省略することが一般的です。その場合は入力されたデータがvalueとして送られます。

(ラジオボタン、チェックボックス、プルダウンでは必須ですのでお忘れなく)

また、value属性をつけることで最初から入力されている文字列(初期値)を設定することもできます。  

詳しくは、JavaEE研修でお話しします。

テキストエリア(複数行テキスト)

<アウトプット>
<ソースコード>

先ほどのテキストフィールドとは違い、

複数行書く事ができるフォームをテキストエリアといいます。

テキストエリアに書かれた文字列がvalueとして送信されます。

“rows”で表示行数を、“cols”で一行当たりの最大文字数(列数)を指定することができます。

それぞれ、rows(行),columns(列)の略です。

なお、閉じタグが必要である点、input typeで指定するのではない点は間違いやすいので気を付けてください。

 

送信ボタン

<アウトプット>

 
<ソースコード>

 

送信ボタンを作るには、

type属性で”submit”を指定します。

ボタン上のテキストはvalue属性で指定できます。

また、このvalue属性の値を送ってservletで受け取ることもできます。

 

今回は”送信”としました。

クリアボタン

<アウトプット>

 
<ソースコード>

 

クリアボタンを作るには、

type属性で”reset” を指定します。

ボタン上のテキストはvalue属性で指定できるのは送信ボタンと同じです。

 

今回は「フォームのテキストフィールド、テキストエリア、送信ボタン、クリアボタン」について学びました。

次回は、「フォーム部品で入力しやすく」する方法について学んでいきましょう。

 

 

新人エンジニア向けHTML講座の一覧に戻る