初心者のためのホームページ作り 第19号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  目次

プレーンテキスト版バックナンバー

今週<第19号>マガジンのおさらい

                   毎週金曜日配信 What's New 2002/9/20
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■ フォームの作成

フォームには実に様々な形態があります。訪問者からの意見や質問などをオンラ
イン上で利用したり、買い物カゴを使ったり、スクリプトを実行させるためのボ
タンだったりと非常に利用範囲が広いのが特徴です。
 そういった中から今回はメールフォームを中心に詳しく解説いたします。

 フォーム内で表示される入力フィールドや各種のボタン、メニューなどを通常
コントロール、あるいは構成部品と呼ばれています。当講座ではコントロールと
いう言葉で総称します。
コントロールというのは、 とか、 とか、 とか  などの入力フィールドを指します。フォームはこれらのコントロールを使って入力の領域(入力欄)を設定します。
フォーム作成の要素と属性の説明

フォームの作成に必要な要素と属性を解説します。この表にあるもので最低限のフォームが作成できます。それぞれの意味と機能を覚えてください。

要素名属性 機能
formaction データを処理するプログラムのURLを指定する
enctype送信する際のデータのMIMEタイプを指定する
methodデータの送信方法の指定
  • get URLとフォームのデータをセットで送信(デフォルト)
  • post フォームデータのみ送信
nameスクリプトなどから参照することができるように設定する
古いブラウザの互換性のために残されている。正しくは id属性を使用する
inputtype input要素の形式を指定する
  • text 1行のテキスト入力フィールド(デフォルト)
  • password パスワード入力用。「*」あるいは「・」で表示される
  • radio ラ時をボタンの指定(1つしか選択できない)
  • checkbox チェックボックスの指定(複数選択が可能)
  • submit 送信ボタン
  • reset リセット(取消)ボタン(すべてのコントロールを初期状態に戻す)
  • button 汎用ボタン
  • image src属性により指定された画像をボタンとして使用する場合
  • file 送信するファイルの選択
  • hidden 表示させずにサーバーに送信するデータ
nameコントロールに名前を付け、データと共に送信する
valuetype属性によって働きが変わる
  • type属性が「text」の場合は入力フィールドに初期値として表示する
  • type属性が「file」の場合は、選択するファイル名を指定する
  • type属性が「submit」「reset」「button」の場合は ボタンのラベルとして表示させる文字を設定
  • type属性が「checkbox」「radio」の場合は選択された値がサーバーに送信される
sizeコントロールの幅の設定
type属性が「text」あるいは「password」のときには文字数
それ以外の値の場合はピクセルで設定する
tabindexタブキーを押してコントロールを移動させる場合、その順番を設定
accesskey任意の1文字をコントロールにこの属性でショートカットキーを割り当てる
利用方法はブラウザやOSによって異なるが、Windowsであれば「altキー」Macintoshであれば「controlキー」などを一緒に押して利用する。非視覚系ブラウザへの配慮
maxlengh type属性が「text」または「password」の場合、入力可能な最大文字数を設定
checked type属性が「checkbox」「radio」の場合に、そのボタンが選択されている状態にする
disabled コントロールに対して選択や変更などの操作ができないようにする場合に設定
readonly コントロールに対して選択はできるが、変更できないようにする場合に設定
accept type属性が「file」の場合に、サーバのプログラムがデータとして処理可能なMIMEタイプを指定
selectname メニューに名前を設定。この名前とデータが組みになって送信される
sizeリストボックスとして表示させる場合の表示行数を設定
この属性が設定された場合にはリストボックスとして表示される
multiple メニューからの選択が複数選択できる
disabledメニューに対して選択や変更ができないように設定
optionvalue この選択肢が選択されたときに、サーバに送信される値を指定
selected選択肢をあらかじめ選択された状態で表示させる
textareaname 入力フィールドに名前を付け、データと共に送信する
cols入力フィールドの表示幅を設定
ただし、文字数が制限されるわけではない
rows入力フィールドの行数を設定
ただし、文字数が制限されるわけではない

この表にある要素と属性を利用してフォームを作ります。
フォームのサンプル  詳しいHTML文は今週号のメールマガジンを参照してください。

入力フィールドのグループ化

fieldset要素及び、legend要素を使って、コントロールをグループ化します。フォーム入力の際、ユーザに見やすい環境を提供します。

要素と機能
要素名属性 機能
fieldsetなし この要素で囲まれたコントロールをまとめて枠線を表示します。
legendなし fieldset要素で示された枠線にキャプションを表示します。
optgrouplabel グループ化する項目のキャプションの役目をします。

下記サンプルを参照してください。HTML文もあわせて表示しています。

グループ化したフォームのサンプルとHTML

CGIの活用
上記HTMLのフォームメールを使って、ユーザから「問い合わせ」や「質問、意見」を送信したとしても、ユーザの環境によってはデータが送信されない場合があります。現在のところ Microsoft Internet Explorer でしか正しく送信できません。

そのためには CGI を利用して送信してもらう方法があります。しかしながら初心者が簡単に手を出せるわけではありません。

CGI を利用するには条件があります。あなたがホームページを公開するサーバ、つまり契約しているプロバイダが CGI の利用を許可しているかどうかを知る必要があります。

現在、ほとんどのプロバイダでは独自の CGI プログラムを無料で提供しています。多くは、掲示板利用、アンケート(メール)フォーム、アクセスカウンターなどがあり、皆さんの中でも利用している方がいると思います。

ただし、自前のプログラムの設置を許可しているプロバイダは少ないと思います。その大きな理由として、 CGI プログラムにはある種の危険が伴います。プログラムにバグがある場合、その内容によってはサーバを停止させたり、最悪の場合クラッシュさせてしまいます。

また CGI にはセキュリティホールがあり、その点での心配もあります。 CGI プログラムはサーバで実行しますので、アクセスが集中するとサーバに負荷がかかります。プロバイダのサーバには、ご自分以外にもたくさんのWebサイトが置かれおり、サーバに問題が発生すると多くの人たちに多大な迷惑をかけることになります。そのような理由で、個人が自分で作ったプログラムを利用できないことが多いのです。

CGI プログラムを自分で作るのには大変な労力がかかります。最初は、プロバイダが提供しているプログラムを利用したり、あるいはWeb上にあるたくさんの CGI 関連ページで提供されている無償のプログラムを、自分なりに改造して学ぶことをお奨めします。

CGI に関する詳しい解説はこちらまで。

CGI関連ページ

次週のお知らせ
次週の課題は、オブジェクトの扱いについて説明します。なお、使用するオブジェクトには FLASHを予定しており、教材として配布いたします。この教材の中には画像やスクリプトも含まれており、順次講座で使用することを予定しています。教材の内容については下記のページで詳しい説明があります。

 教材のダウンロード



Copyright(C) 2002-2003 banban@scollabo.com