HTML&CSSの初心者向け

HTML&CSS初心者向け(第13回):フォーム(1)

チュートリアルのすべてのビデオ HTML&CSS入?

フォームは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"属性値の組み合わせが割り当てられます。 さらに、各入力フィールドには内部識別子を与える必要があります。 この識別子はドキュメント内で一意である必要があります。 特に、フォームデータの処理に関する場合に重要です。 識別子にはスペースや特殊文字は使用しないでください。

ブラウザで結果を確認すると、次のようになります:

HTML&CSS入門(Part 13):フォーム(1)

全体的にはそれほど目立つものではありません。 ただし、テキストフィールドをクリックすると、すでに入力ができることに気づくでしょう。

HTML&CSS初心者向け(第13回):フォーム(1)

訪問者がフィールドに何を入力すべきかを知るためには、ラベルも必要です。

Vorname: <input type="text" name="vorname" />



ここでもブラウザを確認すると、期待どおりの結果が得られます。

HTML&CSS初心者向け(Part 13):フォーム(1)

属性sizeを使用して入力フィールドの幅を決定できます。

Vorname: <input type="text" name="vorname" size="30" />
<br />
Postleitzahl: <input type="text" name="plz" size="5" />



size属性には、希望するフィールド幅を指定します。

HTML&CSS初心者向け(パート13):フォーム(1)

ここでの5は正確に5文字に対応します。 この文脈では、maxlength属性も興味深いです。 これにより、フィールドに入力できる文字の最大許容数が指定されます。 これも例を挙げると:

Vorname: <input type="text" name="vorname" size="30" maxlength="40" />



maxlengthで指定された値がsizeよりも大きい場合、より長い入力では自動的にフィールド内でスクロールされます。

value属性を使用してフィールドにデフォルトの値をセットできます。

Vorname: <input type="text" name="vorname" value="あなたの名前" />



valueに割り当てられた値は、フィールドの初期値と見なされます。

初心者向けのHTML&CSS(第13部):フォーム(1)



ユーザーはこの初期値を削除できます。

実際には入力フィールドではないにもかかわらず、フィールドの値を削除するのを防ぐことができます。通常、このようなフィールドは出力用に使用されます。例えば、スクリプトで計算された値を表示するのに便利です。たとえば、電卓を想像してください。また、訪問者が変更できないようにテキストをフィールドに手動で事前入力することもできます。(注意: PDFビューではユーロ記号が正しく表示されません。)

<input name="preis" type="text" value="€ 699.-" readonly />



読み取り専用フィールドにするには、readonly属性を追加します。再び結果を見てみましょう。

HTML&CSS初心者向け(Part13):フォーム(1)



固定されたテキストが直接表示されますが、削除することはできません。

パスワードフィールドを定義する

パスワードフィールドはよく知られています。登録する際にはどこでもパスワードを入力する必要があります。(通常は2回入力する必要があります)。

HTML&CSS初心者向け(第13部):フォーム(1)

入力フィールドに入力されたデータは非表示であり、ブラウザによって自動的に星印やドットに置き換えられます。この方法の利点は、パスワード入力を見られてしまうかもしれない人が、パスワードを暗号化できないことです。ただし、パスワードフィールドが自動的に安全であるかは誤解です。実際、通常のHTTPでは、フォームを送信するときにパスワードは平文で送信されます。

パスワードフィールドは次のように定義されます:

<input type="password" name="passwort" />



type属性にpasswordが割り当てられます。再び結果を見てみましょう。

HTML&CSSの初心者向け(Part 13): フォーム(1)



ここに何かを入力すると、ブラウザが直接入力を無効にします。