HTMLフォームのテキスト入力オプション

• かもしれません 7, 2024

「Webサイトフォームの一部」という記事で、フォームデザイナーが使用できる入力オプションについて簡単に説明しました。次に、これらのオプションのいくつかを詳しく見てみましょう。具体的には、訪問者が入力したテキスト情報をキャプチャして保存できる3つのフィールドがあります。

テキストフィールド
テキストフィールドは、最も頻繁に使用されるフォームフィールドの1つです。訪問者の名前などの短いテキストの回答をキャプチャするために使用されます。 "size ="を使用して、テキストフィールドのサイズを変更できます。電話番号や郵便番号フィールドなど、訪問者が入力できる文字数を制限する「maxlength =」。また、「value =」で初期値を設定することもできます。

次のようにコーディングされたテキストフィールド：



...あなたのサイトでは次のようになります。



テキストエリア
テキスト領域はテキストフィールドよりも使用頻度が低くなります。入力のより大きなブロックをキャプチャするために使用されるため、たとえば、コメントフィールドとしてフォームに追加できます。テキストフィールドと同様に、フィールドのサイズを指定できます。 「rows =」はテキスト領域の幅を設定し、「cols =」は高さを設定します。テキストエリアにはワードラップオプションもあります。 「wrap = off」に設定すると、入力したテキストは1つの長い行として扱われます。 「wrap = virtual」は、テキストがフォーム内で折り返されているように見えますが、データ自体は改行なしでサーバーに送信され、「wrap = physical」は、フォームに実際の改行を追加し、休憩が含まれています。

次のようにコード化されたテキスト領域：

このボックスにテキストを入力して実験することができます。

...次のようになります。

-TEXTAREA- rows = "6" cols = "40" wrap = "virtual">このボックスにテキストを入力して実験することができます。-TEXTAREA->

パスワードフィールド

パスワードフィールドはテキストフィールドに似ていますが、訪問者がフィールドに入力するものはすべて隠されています。訪問者に見えるのはドットの文字列だけです。これは訪問者にとって非常に安心できます。なぜなら、情報を入力する際に​​たまたま歩いている人は誰でも一目でユーザーのパスワードを拾うことができないからです。パスワードフィールドに入力されたデータは実際には暗号化されないことに注意してください。ユーザーの情報にセキュリティを追加する場合は、通常はセキュリティで保護されたサイトを設定する必要があります。

パスワードフィールドの属性は、テキストフィールドの属性と同じです。

次のようにコード化されたパスワードフィールド：



...次のようになります。

動画の説明: 【HTML入門】#16.フォーム関連の要素 (かもしれません 2024).