ASP の Request オブジェクトを使用すると、HTML フォームから取得したデータの収集および処理を行う強力なスクリプトを簡単に作成できます。ここでは、基本的なフォーム処理スクリプトの作成方法に加え、Web サーバーとユーザーのブラウザの両方でフォーム情報を確認するための便利なテクニックについて学びます。
Web ベースの情報を収集するための最も一般的な方法である HTML フォームは、Web ページ上にユーザー インターフェイスの要素を表示する特別な HTML タグを組み合わせたものです。ユーザーが Web ページと対話して Web サーバーに情報を送信できるようにする要素には、テキスト ボックス、ボタン、チェック ボックスなどがあります。
たとえば、次の HTML のタグでは、ユーザーが姓名と年齢を入力できるフォームを生成します。 このフォームには、情報を Web サーバーに送信するためのボタンが含まれています。また、追加情報を Web サーバーに渡すための隠し入力タグ (Web ブラウザには表示されないコントロール) も含まれています。
<FORM METHOD="Get" ACTION="Profile.asp"> <INPUT TYPE="Text" NAME="FirstName"> <INPUT TYPE="Text" NAME="LastName"> <INPUT TYPE="Text" NAME="Age"> <INPUT TYPE="Hidden" NAME="UserStatus" VALUE="New"> <INPUT TYPE="Submit" VALUE="Enter"> </FORM>
ここで扱う範囲に HTML フォーム タグ セットの詳しい説明は含まれていませんが、便利で魅力的な HTML フォームの作成方法を学習するときに使用できる情報ソースは数多くあります。たとえば、どのようにほかの Web サイトの HTML フォームが作成されているかを調べる場合は、使用している Web ブラウザのソース表示機能を使用します。また、ほかのインターネット テクノロジにおける HTML フォームの革新的な使用方法については、MSDN Online を参照してください。
HTML フォームを作成した後は、ユーザーからの入力を処理する必要があります。入力の処理とは、入力された情報を .asp ファイルへ送信し、解析と操作を行うことです。上記の例の HTML コードでは、<FORM> タグの ACTION 属性が Profile.asp というファイルを参照することに注意してください。ユーザーが HTML に情報を入力すると、ブラウザは POST メソッドを使用し、その情報をサーバーにある .asp ファイル、この例では Profile.asp へ送信します。.asp ファイルには、情報を処理し、ほかのスクリプト、COM コンポーネント、またはデータベースなどのリソースと対話するスクリプトを含めることができます。
ASP を使用して HTML フォームの情報を収集するには、次の 3 つの基本的方法があります。
最初の 2 つの方法は、ほかの Web サーバー プログラムと対話するフォームの場合と動作のしくみは同じです。 ただし、ASP を使用する場合は、フォーム情報の収集と処理を行う作業がかなり簡素化されています。3 つ目の方法は特に便利であるため、後の「フォームの入力内容を確認する」で実際に例を示します。
ASP の Request オブジェクトは、URL 要求として一緒に送信されるフォーム情報の取得作業を容易にする 2 つのコレクションを提供しています。
QueryString コレクションは、要求の URL の疑問符 (?) に続く文字列の形で Web サーバーに渡されたフォームの値を取得します。フォームの値を URL に追加するには、HTTP GET メソッドを使用する方法と、URL にフォームの値を手動で追加する方法があります。
たとえば、前のフォームの例で GET メソッド (METHOD="GET") を使用したとします。ユーザーが「Clair」、「Hector」、「30」と入力すると、次の URL 要求がサーバーに送信されます。
http://Reskit/Workshop1/Painting/Profile.asp?FirstName=Clair&LastName=Hector&Age=30&UserStatus=New
Profile.asp には、次のようなフォーム処理スクリプトを記述できます。
Hello <%= Request.QueryString("FirstName") %> <%= Request.QueryString("LastName") %>.
You are <%= Request.QueryString("Age") %> years old!
<%
If Request.QueryString("UserStatus") = "New" Then
Response.Write "This is your first visit to this Web site!"
End if
%>
この場合、Web サーバーは、ユーザーの Web ブラウザに次のテキストを返します。
Hello Clair Hector. You are 30 years old! This is your first visit to this Web site!
QueryString コレクションには、GET メソッドを使用し、URL 要求に含まれる複数の値のうちの 1 つにアクセスするときに使用できる省略可能なパラメータもあります。また、Count プロパティを使用して、特定の種類の値が出現する回数を数えることもできます。
たとえば、複数の項目を持つリスト ボックスを含むフォームでは、次のような要求が作成される場合があります。
http://Reskit/OrganicFoods/list.asp?Food=Apples&Food=Olives&Food=Bread
この場合、次のコマンドを使用すると、複数の値を数えることができます。
Request.QueryString("Food").Count
List.asp に次のスクリプトを記述しておくと、複数の値の種類を表示できます。
<%
lngTotal = Request.QueryString("Food").Count
For i = 1 To lngTotal
Response.Write Request.QueryString("Food")(i) & "<BR>"
Next
%>
このスクリプトの出力結果は、次のようになります。
Apples Olives Bread
次のスクリプトを使用すると、すべての値の一覧をカンマで区切られた文字列として表示することもできます。
<% Response.Write Request.QueryString("Food") %>
この出力結果は、次の文字列になります。
Apples, Olives, Bread
HTTP GET メソッドを使用して長い複雑なフォームの値を Web サーバーに送信すると、情報が失われる危険性があります。Web サーバーの中には URL クエリ文字列のサイズを制限しているサーバーがあるため、GET メソッドで渡された長いフォームの値が切り捨てられる可能性があります。フォームから大量の情報を Web サーバーに送信する場合は、HTTP POST メソッドを使用する必要があります。POST メソッドは、フォームのデータを HTTP の要求本体の中で送信するので、サーバーに送信できる文字数にほとんど制限はありません。POST メソッドで送信された値は、ASP の Request オブジェクトの Form コレクションを使用して取得できます。
Form コレクションは、QueryString コレクションと同じような方法で値を格納します。たとえば、非常に項目数の多い名前のリストをユーザーがフォームで入力したとすると、これらの名前は次のスクリプトを使用して取得できます。
<%
lngTotal = Request.Form("Food").Count
For i = 1 To lngTotal
Response.Write Request.Form("Food")(i) & "<BR>"
Next
%>
優れた設計の Web フォームには、ユーザーが入力した情報をサーバーに送信する前に、入力された情報の妥当性を検査するクライアント スクリプトが含まれていることがよくあります。"入力検査スクリプト" を用意すれば、ユーザーが有効な数値を入力したかどうか、またはテキスト ボックスが空白のままかどうかということをチェックできます。Web サイトに、投資額に対する利益率をユーザーが計算できるフォームが含まれている場合を考えてみます。無効かもしれない情報がサーバーに送信される前に、実際にユーザーが適切なフォーム フィールドに数値情報やテキスト情報を入力したかどうかを確認することができます。
一般に、できるだけフォームの入力検査スクリプトはクライアント側で行うことをお勧めします。クライアント側で入力検査スクリプトを行うと、ユーザーに直ちに入力エラーが知らされるだけではなく、応答時間が速くなり、サーバーの負荷が軽減して、他のアプリケーションに帯域幅が解放されるようになります。
次のクライアント側スクリプトでは、情報をサーバーに送信する前に、ユーザー入力を確認しています (この場合は、ユーザーが入力したアカウント番号が実際に数字であるかどうかをスクリプトが判断します)。
<SCRIPT LANGUAGE="JScript">
function CheckNumber()
{
if (isNumeric(document.UserForm.AcctNo.value))
return true
else
{
alert("Please enter a valid account number.")
return false
}
}
//Function for determining if form value is a number.
//Note: The JScript isNaN method is a more elegant way to determine whether
//a value is not a number. However, some older browsers do not support this method.
function isNumeric(str)
{
for (var i=0; i < str.length; i++)
{
var ch = str.substring(i, i+1)
if( ch < "0" || ch>"9" || str.length == null)
{
return false
}
}
return true
}
</SCRIPT>
<FORM METHOD="Get" ACTION="balance.asp" NAME="UserForm" ONSUBMIT="return CheckNumber()">
<INPUT TYPE="Text" NAME="AcctNo">
<INPUT TYPE="Submit" VALUE="Submit">
</FORM>
ただし、フォームの入力検査スクリプトがデータベースへのアクセスを必要とする場合は、サーバー側でのフォームの入力検査スクリプトを検討する必要があります。サーバー側で入力検査スクリプトを実行する場合に特に有益な方法は、情報をフォーム自体にポストするフォームを作成することです。この場合、実際には .asp ファイルにユーザー入力を取得する HTML フォームが含まれます。(ASP を使用してクライアント側スクリプトおよび HTML と対話できることを思い出してください。詳細については、「クライアント側のスクリプトと対話する」を参照してください)。ユーザーの入力が同じファイルに返されてから、その情報の妥当性が検査され、入力が無効である場合には、ユーザーにエラーが通知されます。
この方法を使用してユーザー入力の処理および入力検査スクリプトを行うと、Web ベースのフォームの有用性と応答を著しく向上させることができます。たとえば、無効な情報が入力されたフォーム フィールドの近くにエラー情報を表示すると、ユーザーがエラー原因を簡単に発見することができます(通常、Web ベースのフォームは、エラー情報を含んでいる別の Web ページへ要求を転送します。エラー情報を直ちに理解できないユーザーは、不満を感じる可能性があります。)
たとえば、次のスクリプトは、ユーザーが入力したアカウント番号をそのファイル自体 (Verify.asp) にポストし、データベースに照会するユーザー定義関数を呼び出して、ユーザーが有効なアカウント番号を入力したかどうかを判断します。
<%
strAcct = Request.Form("Account")
If Not AccountValid(strAcct) Then
ErrMsg = "<FONT COLOR=Red>Sorry, you may have entered an invalid account number.</FONT>"
Else
Process the user input
.
.
.
Server.Transfer("Complete.asp")
End If
Function AccountValid(strAcct)
A database connectivity script or component method call goes here.
End Function
%>
<FORM METHOD="Post" ACTION="Verify.asp">
Account Number: <INPUT TYPE="Text" NAME="Account"> <%= ErrMsg %> <BR>
<INPUT TYPE="Submit">
</FORM>
この例のスクリプトは、Verify.asp という名前のファイル、つまり HTML フォームを含んでいるファイルと同じファイルにあります。 フォームでは、ACTION 属性に Verify.asp を指定して、情報をそれ自体にポストしています。
重要 JScript を使ってサーバー側で妥当性を検査をしている場合、Request コレクションをローカル変数に設定している場合は、Request コレクションの項目 (QueryString または Form のいずれか) の後ろに必ず空のかっこ "()" を付けてください。かっこを付けない場合、コレクションは文字列ではなくオブジェクトを返します。次のスクリプトは、JScript で変数を正しく設定する方法を示しています。
<%
var Name = Request.Form("Name")();
var Password = Request.Form("Password")();
if(Name > "")
{
if(Name == Password)
Response.Write("Your name and password are the same.")
else
Response.Write("Your name and password are different.");
}
%>
カンマで区切られたり、インデックス付けされている複数の値がコレクションに含まれる場合には、VBScript は同じ動作を実行します。つまり、VBScript および JScript のいずれでも、Request コレクションの項目の後ろに空のかっこ "()" を付けるだけではなく、求める値のインデックスを指定する必要があります。たとえば、次の JScript のスクリプト行では、フォームの要素に対する複数の値の、最初の値のみを返します。
var Name = Request.Form("Name")(1);