01/06
KompoZerでフォームを追加する
ログインページ、新しいアカウントの作成、質問やコメントの投稿など、ユーザーが提出した入力を処理する必要のあるWebページを作成することは何度もあります。 ユーザーの入力は収集され、HTMLフォームを使用してWebサーバーに送信されます。 フォームはKompoZerの組み込みツールで簡単に追加できます。 HTML 4.0がサポートするすべてのフォームフィールドタイプは、KompoZerで追加、編集できますが、このチュートリアルでは、テキスト、テキストエリア、送信ボタン、リセットボタンを操作します。
02の06
KompoZerで新しいフォームを作成する
KompoZerには、Webページにフォームを追加するための豊富なフォームツールがあります。 [フォーム]ボタンをクリックするか、ツールバーのドロップダウンメニューをクリックしてフォームツールにアクセスします。 独自のフォーム処理スクリプトを作成しない場合は、この手順のための情報をドキュメントまたはスクリプトを作成したプログラマから入手する必要があります。 mailtoフォームを使用することもできますが、 必ずしも動作するとは限りません 。
- フォームをページに表示する位置にカーソルを置きます。
- ツールバーの[フォーム]ボタンをクリックします。 [フォームのプロパティ]ダイアログボックスが開きます。
- フォームの名前を追加します。 名前は、フォームを識別するために自動的に生成されたHTMLコードで使用され、必須です。 また、フォームを追加する前にページを保存する必要があります。 保存していない新しいページを使って作業している場合、KompoZerは保存するように促します。
- [アクションURL]フィールドにフォームデータを処理するスクリプトにURLを追加します。 フォームハンドラは、通常PHPやそれに類するサーバサイド言語で書かれたスクリプトです。 この情報がなければ、Webページはユーザーが入力したデータで何もできません。 KompoZerは、入力しないと、フォームハンドラのURLを入力するように促します。
- フォームデータをサーバーに送信するために使用される方法を選択します。 2つの選択肢はGETとPOSTです。 スクリプトが必要とする方法を知る必要があります。
- [OK]をクリックすると、フォームがページに追加されます。
03/06
KompoZerを使用してテキストフィールドをフォームに追加する
KompoZerを使用してページにフォームを追加すると、そのフォームは明るい青色の破線でページ上に表示されます。 このエリアにフォームフィールドを追加します。 また、ページの他の部分と同じように、テキストを入力したり画像を追加することもできます。 テキストは、ユーザを誘導するためのフォームフィールドにプロンプトやラベルを追加するのに便利です。
- テキストフィールドをアウトラインフォームエリアに移動する場所を選択します。 ラベルを追加する場合は、まずテキストを入力することができます。
- ツールバーのフォームボタンの横にある下矢印をクリックし、ドロップダウンメニューからフォームフィールドを選択します。
- [フォームフィールドのプロパティ]ウィンドウが開きます。 テキストフィールドを追加するには、フィールドタイプと表示されたドロップダウンメニューからテキストを選択します。
- テキストフィールドに名前を付けます。 名前はHTMLコードのフィールドを識別するために使用され、フォーム処理スクリプトはデータを処理するための名前を必要とします。 このダイアログでは、「その他のプロパティー/少数プロパティー」ボタンを切り替えるか、「詳細編集」ボタンを押すことによって、他の多くのオプション属性を変更できますが、現時点ではフィールド名を入力するだけです。
- [OK]をクリックすると、ページにテキストフィールドが表示されます。
04/06
KompoZerを使用してテキストエリアをフォームに追加する
場合によっては、メッセージや質問/コメントなど、多くのテキストをフォームに入力する必要があります。 この場合、テキストフィールドは適切ではありません。 フォームツールを使用してテキストエリアフォームフィールドを追加できます。
- テキストエリアにしたいフォームアウトライン内にカーソルを置きます。 ラベルを入力する場合は、ラベルテキストを入力してEnterキーを押して新しい行に移動し、フォームフィールドを追加することをお勧めします。ページ上のテキスト領域のサイズによって、ラベルを左または右にします。
- ツールバーの[フォーム]ボタンの横にある下矢印をクリックし、ドロップダウンメニューから[テキストエリア]を選択します。 テキストエリアのプロパティウィンドウが開きます。
- テキストエリアフィールドの名前を入力します。 名前はHTMLコード内のフィールドを識別し、ユーザーが提出した情報を処理するためにフォーム処理スクリプトによって使用されます。
- テキスト領域に表示する行数と列数を入力します。 これらのディメンションは、ページ上のフィールドのサイズと、スクロールする前にフィールドに入力できるテキストの量を決定します。
- このウィンドウの他のコントロールでより高度なオプションを指定できますが、現時点ではフィールド名とディメンションで十分です。
- [OK]をクリックすると、フォームにテキスト領域が表示されます。
05/06
KompoZerを使ってSubmitボタンとResetボタンをフォームに追加する
ユーザーがページ上のフォームに記入したら、情報をサーバーに送信する方法が必要です。 さらに、最初からやり直したい場合や、間違えた場合は、すべてのフォーム値をデフォルトにリセットするコントロールを組み込むと便利です。 特別なフォームコントロールは、それぞれSubmitボタンとResetボタンと呼ばれるこれらの機能を処理します。
- 提出ボタンまたはリセットボタンを希望するアウトラインフォームエリア内にカーソルを置きます。 ほとんどの場合、これらはフォームの残りのフィールドの下に配置されます。
- ツールバーの[フォーム]ボタンの横にある下矢印をクリックし、ドロップダウンメニューから[ボタンの定義]を選択します。 ボタンのプロパティウィンドウが表示されます。
- [タイプ]ドロップダウンメニューからボタンのタイプを選択します。 あなたの選択はSubmit、Reset、Buttonです。 この場合、送信タイプを選択します。
- フォーム要求を処理するためにHTMLとフォーム処理コードで使用されるボタンに名前を付けます。 Web開発者は、通常、このフィールドに「送信」という名前を付けます。
- [値]ボックスに、ボタンに表示されるテキストを入力します。 テキストは短いはずですが、ボタンを押したときに何が起きるかを説明します。 「送信する」、「送信する」、「送信する」などが良い例です。
- OKをクリックすると、ボタンがフォームに表示されます。
[リセット]ボタンは、同じプロセスを使用してフォームに追加できますが、[送信]ではなく[タイプ]フィールドから[リセット]を選択します。
06の06
KompoZerでフォームを編集する
KompoZerでフォームやフォームフィールドを編集するのはとても簡単です。 編集するフィールドをダブルクリックするだけで、必要に応じてフィールドプロパティを変更できる適切なダイアログボックスが表示されます。 上の図は、このチュートリアルで扱っているコンポーネントを使用した簡単なフォームを示しています。