フォームはform
要素で定義されます。 form
内にあるすべての要素は、それに関連付けられたフォームに属します。
<form> … </form>
イントロダクションの<form>
ではaction
属性が期待されます。これにより、フォームデータの処理方法が指定されます。通常、これはPHPアプリケーションです。
<form method="post" action="form.php"> … </form>
指定したファイルが実際に見つかることに注意してください。 つまり、適切なパスを設定する必要があります。
スクリプトの代わりに電子メールアドレスを指定することもできます。
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
このケースでは、フォームデータがメールで送信されます。 しかし、これはエレガントではありませんが、通常はスクリプト方法に戻ることがほとんどです。 しかし、スクリプトが手元にない場合は、フォーム送信をメールで行うこともできます。
form要素のもう1つの重要な属性はmethod
です。 これにより、フォーム内容のHTTP送信方法を設定します。 2つの異なるバリエーションが利用できます。
• post
= ここでフォームデータは2つのステップで指定されたアドレスに送信されます。 最初にブラウザが指定したアドレスに接続します。 これが成功すると、フォームデータがスクリプトに渡されます。
• get
= この方法では、フォームデータはaction
属性に割り当てられたURLの末尾に追加されます。 フォームデータはその他にも、ブラウザのアドレスバーに表示されます。
どちらの方法がフォームデータ送信に適しているかは疑問です。 基本的にはどちらも使えます。 ただし、大きなデータ量やサーバーへのファイルのアップロードがある場合は、通常post
を選択する必要があります。
簡単なフォームフィールド
これまでは、フォームの外側の構造のみが定義されました。 ブラウザでは、フォーム自体はまだ表示されていません。
<form method="post" action="form.php"> … </form>
これからは、フォームに内容/生活を与える作業に移ります。
おそらく最も必要なフィールドタイプは1行テキスト入力フィールドです。 これは、例えば名前、苗字、メールアドレスを入力するために使用されます。 1行のテキスト入力フィールドは次のように定義されます:
<input type="text" name="vorname" />
input
要素にtype="text"
属性値の組み合わせが割り当てられます。 さらに、各入力フィールドには内部識別子を与える必要があります。 この識別子はドキュメント内で一意である必要があります。 特に、フォームデータの処理に関する場合に重要です。 識別子にはスペースや特殊文字は使用しないでください。
ブラウザで結果を確認すると、次のようになります:
全体的にはそれほど目立つものではありません。 ただし、テキストフィールドをクリックすると、すでに入力ができることに気づくでしょう。
訪問者がフィールドに何を入力すべきかを知るためには、ラベルも必要です。
Vorname: <input type="text" name="vorname" />
ここでもブラウザを確認すると、期待どおりの結果が得られます。
属性size
を使用して入力フィールドの幅を決定できます。
Vorname: <input type="text" name="vorname" size="30" /> <br /> Postleitzahl: <input type="text" name="plz" size="5" />
size
属性には、希望するフィールド幅を指定します。
ここでの5
は正確に5文字に対応します。 この文脈では、maxlength
属性も興味深いです。 これにより、フィールドに入力できる文字の最大許容数が指定されます。 これも例を挙げると:
Vorname: <input type="text" name="vorname" size="30" maxlength="40" />
maxlength
で指定された値がsize
よりも大きい場合、より長い入力では自動的にフィールド内でスクロールされます。value
属性を使用してフィールドにデフォルトの値をセットできます。
Vorname: <input type="text" name="vorname" value="あなたの名前" />
value
に割り当てられた値は、フィールドの初期値と見なされます。
ユーザーはこの初期値を削除できます。
実際には入力フィールドではないにもかかわらず、フィールドの値を削除するのを防ぐことができます。通常、このようなフィールドは出力用に使用されます。例えば、スクリプトで計算された値を表示するのに便利です。たとえば、電卓を想像してください。また、訪問者が変更できないようにテキストをフィールドに手動で事前入力することもできます。(注意: PDFビューではユーロ記号が正しく表示されません。)
<input name="preis" type="text" value="€ 699.-" readonly />
読み取り専用フィールドにするには、readonly
属性を追加します。再び結果を見てみましょう。
固定されたテキストが直接表示されますが、削除することはできません。
パスワードフィールドを定義する
パスワードフィールドはよく知られています。登録する際にはどこでもパスワードを入力する必要があります。(通常は2回入力する必要があります)。
入力フィールドに入力されたデータは非表示であり、ブラウザによって自動的に星印やドットに置き換えられます。この方法の利点は、パスワード入力を見られてしまうかもしれない人が、パスワードを暗号化できないことです。ただし、パスワードフィールドが自動的に安全であるかは誤解です。実際、通常のHTTPでは、フォームを送信するときにパスワードは平文で送信されます。
パスワードフィールドは次のように定義されます:
<input type="password" name="passwort" />
type
属性にpassword
が割り当てられます。再び結果を見てみましょう。
ここに何かを入力すると、ブラウザが直接入力を無効にします。