目次
HTMLは基本的にはテキスト表示のために開発されたものです。ところが相手先に連絡をとる必要もあり、HTMLにはメール送信機能が付加されています。メール以外にもCGIといわれるプログラムを介して入力したデータなどを利用してデータベースを操作することも可能です。ここでは、画面入力を可能とするコンテンツと、送信動作を定義するフォームについて説明します。
画面から入力され相手側に送信される事項はフォームの内側に記述します。記述できるものはラジオボタン、チェックボックス、インプットボックス、テキストボックス、ボタンなどです。具体的な内容は次のフォームの定義で確認してください。
フォームの中には、次に示すような送信機能をもつ 内容（コンテンツ）を記述することができます。
|
実際にデータ入力を行い、どのような動作をするか確認しなさい。フォーム領域（例では、空色で定義された部分）の入力内容をすべて取り消すにはリセットボタンを押します。なお、このフォームは送信に必要な定義がしてありませんので送信は行われません。 |
|
フォーム・タグは |
|
<form> |
|
フォームで送信を行うには、ACTIONとMETHODのアトリビュートを指定します。この2つのアトリビュートの定義を省略すると、送信動作をしません。上の例では<form>とだけ定義しているので、動作しないのです。 次にアトリビュートの一覧を示します。なお、enctypeは、mailto:定義時に使用します。省略時はtext/plainが指定されたと見なします。 |
|
アトリビュート
|
意味
|
値
|
その他
|
| method="" | 送信形式の指定 | post | 一般的な送信指定 |
| get | ほとんど使用しない（255文字まで） | ||
| action="" | 送信先の指定 | mailto: | メールアドレスを指定する |
| 実行するCGIを指定 | プログラムを実行する | ||
| enctype="" | メールの形式指定 | text/plain | メール本文で送信すると指定 |
| multipart/form-data | 添付形式で送信すると指定 |
| 実際にメールを送るときのformの定義は次のようにします |
| <FORM ACTION="mailto:あなたのメールアドレス" METHOD="post"> |
| メールアドレスの記述は十分に注意して書き間違えないようにしてください。間違ったアドレスを記入すると、メールの送信者にも受信者にも多大な迷惑をかけます。＊ METHOD の指定を忘れると送信は実行されず、メーラーが起動します。 |
| CGIを起動するときのformの定義は次のようにします |
| <FORM ACTION="http://XXX.ac.jp/XXX.cgi" METHOD="post"> |
|
ＣＧＩを起動するときはACTION＝で起動するプログラム名を指定しますが、ＣＧＩに関する詳細は別のセクションで行います。 |
| 上の例を注意してみると、ＩＮＰＵＴ，ＴＥＸＴＡＲＥＡ、ＳＥＬＥＣＴの３種類のコンテンツがあるだけですが、画面上では９種類のパターンとなります。それぞれのタグの詳細な説明を行います。 |
インプットタグは、Ｔｙｐｅアトリビュートの指定で、さまざまな形式のものに変化します。基本的には７種類になります。
|
ＴＹＰＥの値
|
動作（意味）
|
NS
|
IE
|
| text | １行フィールドを作る |
○
|
○
|
| password | パスワードフィールドを作る |
○
|
○
|
| hidden | 隠しフィールドを作る |
○
|
○
|
| checkbox | チェックボックスを作る |
○
|
○
|
| radio | ラジオボタンを作る |
○
|
○
|
| submit | 実行ボタンを作る |
○
|
○
|
| reset | リセットボタンを作る |
○
|
○
|
| button | ボタンを作る |
○
|
○
|
| image | イメージボタンを作る |
×
|
○
|
| file | ファイル送信ボックスを作る |
×
|
○
|
| １行フィールドの表示例を右に示す。１行フィールドの記述例を下に示す | |
| <input type="text" name="識別名" value="初期値" size="文字数" maxlength="最大文字数"> | |
| アトリビュート |
説 明
|
| name | データを受け取った側でどのフィールドに記入されたデータであるかを識別するものです。多くのフィールドを使用したとき、受信したプログラムや、メールで、どのフィールドに記述されたデータかがわからなくなることを防ぐものです |
| value | １行フィールドにあらかじめ表示する文字列を指定する |
| size | １行フィールドを画面に表示するときの、長さを文字数で指定する |
| maxlength | １行フィールドに入力できる最大文字数を指定する |
| 【例題】 次の一行フィールドを作成しなさい |
|
識別名を”ＡＸＺ”、フィールドの長さを１０文字、最大可能入力文字数を１０文字、初期値をＡＢＣとするフィールドで、ブラウザに表示する文字は”資産名称を入力しなさい”であるもの |
|
パスワードフィールドは、パスワードを入力するために必要なものです。このフィールドの定義は一行フィールドと同じです。パスワードフィールドは入力した文字列を表示せず、文字数に相当するアスタリスクを表示します |
|
| パスワードフィールドの表示例を右に示す | |
| <input type="password" name="識別名" value="初期値" size="文字数" maxlength="最大文字数"> | |
| アトリビュート |
説 明
|
| name | データを受け取った側でどのフィールドに記入されたデータであるかを識別するものです。多くのフィールドを使用したとき、受信したプログラムや、メールで、どのフィールドに記述されたデータかがわからなくなることを防ぐものです |
| value | パスワードフィールドにあらかじめ表示する文字列を指定する |
| size | パスワードフィールドを画面に表示するときの、長さを文字数で指定する |
| maxlength | パスワードフィールドに入力できる最大文字数を指定する |
| 【例題】 次のパスワードフィールドを作成しなさい |
|
識別名を”ＰＡＳＳ”とするパスワードフィールドで、ブラウザに表示する文字は”あなたのパスワード”であるもの |
| 隠しフィールドは、ブラウザ利用者には必要ないものの、データ処理上必要な情報を送信するために、その情報を定義するものです。CGIを使用するとき、重要な役割を果たします。 |
|
<input type="hidden" name="送信されたときの識別名" value="初期値を使用するときの文字列"> |
| プログラムによるコントロールをしないときは、valueに必ず値を入れておく必要があります。なぜなら、このフィールドは隠れており、入力できないからです。この値はＪＡＶＡのようなプログラムで指定することもできます。 |
| 【例題】 次の隠しフィールドを作成しなさい |
|
識別名”ＨＩＤ”、値が”２０００”というもの |
以上の3つが文字列データ入力用のものとなります。
次のグループはチェックをすることによりデータを選択したことを指定するものです。
これにはチェックボックスとラジオボタンがあります。
| チェックボックスは、項目を選択するときに使用します。一つのform内に複数のチェックボックスを配置したとき、各項目を複数選択することができます。 | |
| チェックボックスの表示例を右に示す | |
| <input type="checkbox" name="識別名" value="チェックされたときに送信される値"> | |
| チェックをしなければ、ＶＡＬＵＥの値は送信されません。また、あらかじめチェックした状態にするには、inputタグ内にcheckedと記入しておきます。<input ・・・・・ checked> | |
| 【例題】 |
|
男 女 というチェックボックスを作成しなさい。ただし前者の識別名はＭＡＮ、値もＭＡＮとし、後者の識別名はＦＲＡ、値もＦＲＡとしなさい。 |
| ラジオボタンは、複数項目からひとつを選択するときに使用します。一つのform内に複数のラジオボタンを配置したとき、同一の識別名のものをひとつのグループとし、その中でひとつを選択することができます。 | |
| ラジオボタンの表示例を右に示す | TOYOTANISSAN |
| <input type="radio" name="識別名" value="チェックされたときに送信される値"> | |
| チェックをしなければ、ＶＡＬＵＥの値は送信されません。また、あらかじめチェックした状態にするには、inputタグ内にcheckedと記入しておきます。<input ・・・・・ checked> | |
| 【例題】 |
|
男 女 というラジオボタンを作成しなさい。ただし前者の識別名はSEIBETU、値はＭＡＮとし、後者の識別名はSEIBETU、値はＦＲＡとしなさい。 |
ボタンの定義
| 実行ボタンは、formで入力された情報を送信します。送信先はformのactionアトリビュートで指定したところになります。ボタンの表面に表示する文字はvalueで指定します。 | ||
| 実行ボタンの例を右に２つ示す |
|
|
| <input type="submit" name="Submit3" value="送信"> | ||
| 【例題】 |
|
見出しが”計算実行”、識別名が”ＣＡＬＣ”という実行ボタンを作成しなさい。 |
| リセットボタンは、フォーム内のすべてのフィールドなどの値を初期値に戻します。ボタンの表面に表示する文字はvalueで指定します。 | |
| リセットボタンの例を右に示す |
|
| <input type="reset" name="Submit22" value="リセット"> | |
| 汎用ボタンは、別の画面を起動したり、javascriptを実行したりするのに使用します。汎用ボタンの表面に表示する文字はvalueで指定します。 Formで１行フィールドに入力し、ENTER キーを押すとほかの入力が終了しなくても、送信が実行されます。これを防ぐ目的でスクリプトと組み合わせて「実行ボタン」に代えて使用することもできます。 |
|
| ボタンの例を右に示す |
|
| <input type="button" name="kidou" value="起 動" onclick="submit();"> | |
| 【例題】 |
|
見出しが”クリア”、識別名が”ＲＥＳＥＴ”というリセットボタンを作成しなさい。 |
【総合問題】
自分のメールアドレスへ次の項目を送信するフォームを作りなさい。
入力者の名前
入力者のメールアドレス
好きな音楽
性別
| １行フィールドでは、長い文字列を扱えません。TEXTAREAタグは、レポートや長文のテキストを記述したり、表示するために使用します。右の例では、行数を５、１行の文字数を４０と指定しています。 | |
| <textarea name="textarea" rows="行数" cols="一行の文字数"></textarea> | |
| <input>は終tagがないが、<textarea>は、終tag</textarea>が必要である。複数行フィールドにあらかじめ文字を表示したいときは、「その文字」を終tagの前に記述すればよい。 | |
| アトリビュート |
説 明
|
| name | データを受け取った側でどのフィールドに記入されたデータであるかを識別するものです。多くのフィールドを使用したとき、受信したプログラムや、メールで、どのフィールドに記述されたデータかがわからなくなることを防ぐものです |
| rows | テキストエリアとして表示する行数を指定する。実際の入力は指定行数を超えて入力できます。実際の行数が指定行数を超過すると、スクロールバーが使用できるようになります。 |
| cols | テキストエリアとして表示する１行の文字数を指定する。この文字数を超えるとき、自動的に次の行に続く。 |
| 【例題】 |
|
識別名”ＲＥＰＯＲＴ”、文字数５０、行数８のテキストエリアを作成しなさい。 |
| 【例題】 |
|
識別名”ＲＥＰＯＲＴ”、文字数５０、行数４のテキストエリアを作成しなさい。ただし、フィールドにあなたの名前を表示すること。 |
| 複数の値から特定の値を選択するためのリストボックスを作成します。行数の指定により、表示形式が右のように異なります。また、行数=4の例では、複数行を選択できるように設定しています。[Ctrl]キーと[Alt]キーを同時に押しながら、マウスで行を選択すれば、複数行を選ぶことができます。選択したものをはずすときも、同じ操作をします。 |
|
||||
| <select name="select2" size="フィールドタイプの行数" multiple>選択項目</select> | |||||
| アトリビュート |
説 明
|
| name | データを受け取った側でどのフィールドに記入されたデータであるかを識別するものです。多くのフィールドを使用したとき、受信したプログラムや、メールで、どのフィールドに記述されたデータかがわからなくなることを防ぐものです |
| size | 選択フィールドとして表示する行数を指定します。 |
| multiple | 複数選択を可能にします。 |
| 選択する項目は<option>で指定します。 |
| <option selected value="送信する文字">選択項目</option> 表示する項目数分繰り返して記述する |
| アトリビュート |
説 明
|
| selected | 選択項目をあらかじめ選択しておくときに指定します。 |
| value | 送信時には選択項目の文字列が送られますが、選択項目以外の文字を送信したいときに指定します。 |
実際のOPTIONの記述は、次のようになります。
<option>選択する項目</option>
<option>選択する項目</option>
<option>選択する項目</option>
のように記述します。
| 【例題】 <select name="rensyu" size="4" multiple>と指定しているとき |
|
１．選択する項目として、"TOYOTA","NISSAN","HONDA"と３つを指定したとき、表示結果はどのようになるか。 |
| 【例題】 <select name="rensyu" size="1" >と指定しているとき |
|
１．選択する項目として、"TOYOTA","NISSAN","HONDA"と３つを指定したとき、表示結果はどのようになるか。 |
| 【練習】 |
|
あなたの好きなチームはという文字を表示して、巨人、阪神、中日、横浜、広島、ヤクルトから選択させるフォームを作成しなさい。 |
| 【問題】 自分のメールアドレスへ次の項目を送信するフォームを作りなさい。 |
|
入力者の名前（一行フィールド） 入力者のメールアドレス（パスワードフィールド） 好きな野球チーム（リストから選択する） その理由（テキストエリアを使用） 性別（ラジオボックスを使用） 送信ボタンとリセットボタンを配置すること |
| 【問題】 自分のメールアドレスへ次の項目を送信するフォームを作りなさい。 |
|
入力者の名前（一行フィールド） 入力者のメールアドレス（パスワードフィールド） 好きな野球チーム（リストから選択する） その理由（テキストエリアを使用） 性別（ラジオボックスを使用） 送信ボタンとリセットボタンを配置すること |