初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。今週のおさらいバックナンバーはこちらから
第１号 第２号 第３号 第４号 第５号 第６号 第７号 第８号 第９号 第10号
第11号 第12号 第13号 第14号 第15号 第16号 第17号 第18号 目次
今週＜第19号＞マガジンのおさらい
毎週金曜日配信 What's New 2002/9/20 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 今週の課題■ フォームの作成 フォームには実に様々な形態があります。訪問者からの意見や質問などをオンラ イン上で利用したり、買い物カゴを使ったり、スクリプトを実行させるためのボ タンだったりと非常に利用範囲が広いのが特徴です。 そういった中から今回はメールフォームを中心に詳しく解説いたします。 フォーム内で表示される入力フィールドや各種のボタン、メニューなどを通常 コントロール、あるいは構成部品と呼ばれています。当講座ではコントロールと いう言葉で総称します。
フォームの作成に必要な要素と属性を解説します。この表にあるもので最低限のフォームが作成できます。それぞれの意味と機能を覚えてください。
| 要素名 | 属性 | 機能 |
|---|---|---|
| form | action | データを処理するプログラムのURLを指定する |
| enctype | 送信する際のデータのMIMEタイプを指定する | |
| method | データの送信方法の指定
| |
| name | スクリプトなどから参照することができるように設定する 古いブラウザの互換性のために残されている。正しくは id属性を使用する | |
| input | type | input要素の形式を指定する
|
| name | コントロールに名前を付け、データと共に送信する | |
| value | type属性によって働きが変わる
| |
| size | コントロールの幅の設定 type属性が「text」あるいは「password」のときには文字数 それ以外の値の場合はピクセルで設定する | |
| tabindex | タブキーを押してコントロールを移動させる場合、その順番を設定 | |
| accesskey | 任意の１文字をコントロールにこの属性でショートカットキーを割り当てる 利用方法はブラウザやOSによって異なるが、Windowsであれば「altキー」Macintoshであれば「controlキー」などを一緒に押して利用する。非視覚系ブラウザへの配慮 | |
| maxlengh | type属性が「text」または「password」の場合、入力可能な最大文字数を設定 | |
| checked | type属性が「checkbox」「radio」の場合に、そのボタンが選択されている状態にする | |
| disabled | コントロールに対して選択や変更などの操作ができないようにする場合に設定 | |
| readonly | コントロールに対して選択はできるが、変更できないようにする場合に設定 | |
| accept | type属性が「file」の場合に、サーバのプログラムがデータとして処理可能なMIMEタイプを指定 | |
| select | name | メニューに名前を設定。この名前とデータが組みになって送信される |
| size | リストボックスとして表示させる場合の表示行数を設定 この属性が設定された場合にはリストボックスとして表示される | |
| multiple | メニューからの選択が複数選択できる | |
| disabled | メニューに対して選択や変更ができないように設定 | |
| option | value | この選択肢が選択されたときに、サーバに送信される値を指定 |
| selected | 選択肢をあらかじめ選択された状態で表示させる | |
| textarea | name | 入力フィールドに名前を付け、データと共に送信する |
| cols | 入力フィールドの表示幅を設定 ただし、文字数が制限されるわけではない | |
| rows | 入力フィールドの行数を設定 ただし、文字数が制限されるわけではない |
この表にある要素と属性を利用してフォームを作ります。
フォームのサンプル
詳しいHTML文は今週号のメールマガジンを参照してください。
fieldset要素及び、legend要素を使って、コントロールをグループ化します。フォーム入力の際、ユーザに見やすい環境を提供します。
要素と機能| 要素名 | 属性 | 機能 |
|---|---|---|
| fieldset | なし | この要素で囲まれたコントロールをまとめて枠線を表示します。 |
| legend | なし | fieldset要素で示された枠線にキャプションを表示します。 |
| optgroup | label | グループ化する項目のキャプションの役目をします。 |
下記サンプルを参照してください。HTML文もあわせて表示しています。
そのためには CGI を利用して送信してもらう方法があります。しかしながら初心者が簡単に手を出せるわけではありません。
CGI を利用するには条件があります。あなたがホームページを公開するサーバ、つまり契約しているプロバイダが CGI の利用を許可しているかどうかを知る必要があります。
現在、ほとんどのプロバイダでは独自の CGI プログラムを無料で提供しています。多くは、掲示板利用、アンケート（メール）フォーム、アクセスカウンターなどがあり、皆さんの中でも利用している方がいると思います。
ただし、自前のプログラムの設置を許可しているプロバイダは少ないと思います。その大きな理由として、 CGI プログラムにはある種の危険が伴います。プログラムにバグがある場合、その内容によってはサーバを停止させたり、最悪の場合クラッシュさせてしまいます。
また CGI にはセキュリティホールがあり、その点での心配もあります。 CGI プログラムはサーバで実行しますので、アクセスが集中するとサーバに負荷がかかります。プロバイダのサーバには、ご自分以外にもたくさんのWebサイトが置かれおり、サーバに問題が発生すると多くの人たちに多大な迷惑をかけることになります。そのような理由で、個人が自分で作ったプログラムを利用できないことが多いのです。
CGI プログラムを自分で作るのには大変な労力がかかります。最初は、プロバイダが提供しているプログラムを利用したり、あるいはWeb上にあるたくさんの CGI 関連ページで提供されている無償のプログラムを、自分なりに改造して学ぶことをお奨めします。
CGI に関する詳しい解説はこちらまで。