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