演習 1: HTML フォームによるデータの収集

この演習では、Trip Edit ページを開発します。このページにより、新規の旅行の追加および既存の旅行の編集に使用するデータ入力フォームが提供されます。入力されたデータを、Compass Travel のビジネスルールと照合します。旅行情報の取得に必要なフィールドは、レッスン 6: アプリケーションのメインページの作成で旅行情報を表示するために使用した「Trip Detail」ページのフィールドと同じです。次の図は、Trip Edit ページを示しています。


この図は、Trip Edit のデータ収集ページを示しています。

このページは、ユーザーが旅行メンテナンスアプリケーションのメインページ (tripdetail.cfm) にある [Add] または [Edit] ボタンをクリックしたときに表示されます。

Trip Edit のデータ収集フォームを作成するには :

  1. 空白ファイルを作成します。
  2. 空白ファイルに次のコードを入力するか、コピー & ペーストします。 
    <html>
<head><title>Compass Travel Trip Maintenance</title></head>
<body>
	<form action="tripeditaction.cfm" method="post">
		<!--- フィールド : 旅行メンテナンスイメージ --->
	<IMG src="images/tripmaintenance.gif">
	<P>
	<table>
	    <!--- フィールド : tripName --->
	    <TR>
		    <TD valign="top"> Trip Name </TD>
		    <TD><INPUT type="text" name="tripName" size="50"></TD>
		</TR>
			<!--- フィールド : eventType --->
		<tr>
			<td valign="top">Type of Event</td>
			<td><select size="1" name="eventType">
				<option value="1" selected>Surfing</option>
				<option value="2">Mountain Climbing</option>
				<option value="3">Mountain Biking</option>
				</select>
			</td>
		</tr>
	    <!--- フィールド : tripDescription --->
	    <TR>
		    <TD valign="top"> Trip Description </TD>
		    </TD>
				<textarea cols="50" rows="5" name="tripDescription"></textarea>
			</TD>
		</TR>
	    <!--- フィールド : tripLocation --->
	    <TR>
		    <TD valign="top">Trip Location</TD>
		    <TD><INPUT name="tripLocation" size=50></TD>
		</TR>
	    <!--- フィールド : departureDate --->
	    <TR>
		    <TD valign="top"> Departure Date</TD>
		    <TD><INPUT name="departureDate" size=10></TD>
		</TR>
	    <!--- フィールド : returnDate --->
	    <TR>
		    <TD valign="top"> Return Date</TD>
		    <TD><INPUT name="returnDate" size=10></TD>
		</TR>
	    <!--- フィールド : numberPeople --->
	    <TR>
		    <TD valign="top">Number of People</TD>
		    <TD><INPUT size=6 name="numberPeople"></TD>
		</TR>
	    <!--- フィールド : Price --->
	    <TR>
		    <TD valign="top">Price</TD>
		    <TD><INPUT size=10 name="price"></TD>
		</TR>
	    <!--- フィールド : baseCost --->
	    <TR>
		    <TD valign="top"> Base Cost </TD>
		    <TD><INPUT size=10 name="baseCost"></TD>
		</TR>
	    <!--- フィールド : depositRequired --->
	    <TR>
		    <TD valign="top"> Deposit Required </TD>
		    <TD><input type="checkbox" name="depositRequired" value="Yes"></TD>
		</TR>
	    <!--- フィールド : tripLeader --->
	    <TR>
		    <TD valign="top">Trip Leader</TD>
		    <TD><INPUT maxLength=50 size=50 name="tripLeader"></TD>
		</TR>
	    <!--- フィールド : photo --->
	    <TR>
		    <TD valign="top">Photo File Name</TD>
		    <TD><INPUT maxLength=50 size=50 name="photo"></TD>
		</TR>
	</table>
	<p>	
	<input type="submit" value="Save">
	<input type="submit" value="Cancel" name="btnCancel">
	</p>
	</form>
</body>
</html>
  3. my_app ディレクトリに、"tripedit.cfm" という名前を付けてファイルを保存します。

コードの確認

次の表に、Trip Edit ページの HTML タグをいくつか示し、その使用法について説明します。HTML の詳細については、HTML 入門書を参照してください。

タグ 説明

Form

form タグを使用して、データ入力フォームを作成します。form タグには 2 つのタグ属性があります。次に例を示します。

<form action="tripeditaction.cfm" Method= "Post">

ここで、 action 属性は、フォームの内容が送信されるときに Web サーバーが表示する ColdFusion ファイルの名前を指定します。method 属性は、データが Web サーバーに返される方法を指定します。Post method 属性を使用して、すべての ColdFusion フォームを送信します。

Table

テーブルタグ table、テーブル行タグ tr、およびテーブルデータタグ td を使用して、データ入力フォームの形式を設定し、そのコントロールを適切に表示することができます。

フォームコントロール

フォームには、ユーザーの入力を収集して送信するコントロールが必要です。フォームコントロールには、さまざまな種類があります。このレッスンでは、次のコントロールを使用します。

  • <input> 旅行名や旅行代金などの、テキスト応答を受け入れます。
  • <input type=checkbox> " Deposit Required?" のような、yes/no で答えることができる質問をします。
  • <select>、<option> イベントタイプ (Mountain Biking、Surfing など) のように選択可能なリストをユーザーに提供します。
  • <textarea> 旅行の説明など、ユーザーが入力した、複数行に渡る情報を収集します。
  • <input type=submit> 収集した情報をサーバーに送信します。

Trip Edit ページをテストするには :

  1. ブラウザで "tripedit.cfm" ページを表示します。
  2. [Trip Name] フィールドに旅行名を入力します。
  3. [Save] をクリックします。

    エラーが発生します。

エディタでフォームのソース (tripedit.cfm) を表示すると、<form> タグに action 属性が設定されていることを確認できます。この属性は、"tripedit.cfm" ページが送信したフォームの値を受け取るページを示します。まだ "tripeditaction.cfm" ページを作成していないので、ColdFusion MX はエラーを送信します。

この時点では、このフォームはデータベースに情報を保存せず、Compass Travel のビジネスルールを適用していません。次の演習で、アクションページを作成して、ビジネスルールを適用します。

ColdFusion MX 7 | ColdFusion MX 6.1 | ColdFusion MX* | ColdFusion 5* | フォーラム* | デベロッパーセンター | サポート情報 | バグ報告

バージョン7

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/coldfusion/7_jp/htmldocs/bus_rul2.htm