フォームの詳細

1つ、フォーム

1. formタグは、ユーザー入力用のHTMLフォームを作成するために使用されます

2.フォームには、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなどの入力要素を含めることができます。

3.フォームには、メニュー、テキストエリア、フィールドセット、凡例、およびラベル要素を含めることもできます。

4.フォームは、サーバーにデータを送信するために使用されます。

2、フォーム属性

（A）アクション属性

action属性は、フォームが送信されたときにフォームデータを送信する場所を指定します

プロパティ値：urlリンクアドレス

（2）名前属性

name属性は、フォームの名前を指定します。name属性は、スクリプト内のフォームを参照する方法を提供します。

（3）メソッド属性

method属性は、フォームの送信時に使用されるHTTPメソッド（GETまたはPOST）を指定します

1.いつGETを使用しますか？

フォームの送信がパッシブ（検索エンジンクエリなど）であり、機密情報がない場合、メソッド属性のデフォルト値はGETです。

GETを使用すると、フォームデータがページのアドレスバーに送信されます。

2.いつポストを使用しますか？

アドレスバーに保存できるデータは限られています。より多くのデータを保存したい場合は、postを使用してデータをより安全に保存する必要があります。

フォームはデータを更新しているか、機密情報（パスワードなど）を含んでいます。できれば投稿してください。

ページのアドレスバーに送信されたデータは表示されないため、投稿はより安全です（さらにデータをアップロードしたり、写真をアップロードしたりする場合は、投稿を使用する必要があります）。

（4）凡例要素

要素は要素のラベルを定義します

ラベルは、フォーム内の関連する要素をグループ化でき、関連するフォーム要素の周囲に境界線を描画することもできます。

<form>
 <fieldset>
  <legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
 </fieldset>
</form>

input要素は名前を定義するためにname属性を追加する必要があり、バックグラウンドは通常どおり入力データを受け取ります。

第三に、フォーム記述タグの使用

入力要素の注釈を定義する

<label for="wenzi">文字</label>
<input type="text" id='wenz'>

label要素は、ユーザーに特別な効果を提供しません。ただし、マウスユーザーの使いやすさは向上します。

label要素内のテキストをクリックすると、このコントロールがトリガーされ、コントロールにフォーカスが与えられます。ユーザーがラベルを選択すると、ブラウザーは自動的にラベルに関連するフォームコントロールにフォーカスを移します。

タグのfor属性は、関連する要素のid属性と同じである必要があります。

同じ効果を実現するために、別の記述方法があります。for属性とid属性は必要ありません。

<label>文字 <input type="text">
</label>

4、フォーム制約属性

（1）必要な属性

必須属性はブール属性であり、フォームを送信する前に入力フィールドに入力する必要があることを規定しています。（H5の新しい属性が必要です）

注：必須属性は、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイルの入力タイプに適用できます。

（2）プレースホルダー属性

placeholder 属性は、サンプル値や期待される形式の簡単な説明など、入力フィールドの期待値を説明できる短いプロンプトメッセージ（入力ボックスのプロンプトテキスト、コンテンツは送信されません）を指定します。

ユーザーが値を入力する前に、プレースホルダーによって定義されたプロンプトが入力フィールドに表示されます。

注：プレースホルダー属性は、テキスト、検索、URL、電話、電子メール、およびパスワードの入力タイプに適用できます。

（3）値属性

value 属性は、入力要素の値を設定します。入力タイプが異なれば、value属性の使用法も異なります。

タイプタイプは、ボタン、リセット、および送信です。ボタンに表示されるテキストを定義します;

タイプタイプは、テキスト、パスワード、非表示です。入力フィールドの初期値（デフォルト値）を定義します;

タイプタイプはチェックボックス、ラジオ、画像です。入力に関連付けられた値を定義します;

注：value属性はとに設定する必要があります。

注：value属性を一緒に使用することはできません。

（4）maxlength属性

maxlength 属性は、文字数として計算される入力フィールドの最大長を指定します。

maxlength属性は、（入力長とともに）一緒にまたは一緒に使用されます

（5）サイズ属性

size 属性は、要素の表示幅を文字数で指定します。

サイズはフォームの長さを制限します（推奨されません。CSSを使用してより適切に設定してください）

5.フォームアクセス制限（フォームが無効）

（1）読み取り専用属性

読み取り専用 の入力フィールドがあることを属性規定読み取り専用とあなたが背景に提出することができ、デフォルト値を、設定した値を使用することができます。入力することはできませんが、ユーザーがそれを変更することはできません。

読み取り専用フィールドは変更できませんが、ユーザーはタブキーを使用してフィールドに切り替えることができ、テキストを選択またはコピーすることもできます。

readonly属性は、特定の条件が満たされるまで（たとえば、チェックボックスが選択されるまで）ユーザーが値を変更できないようにします。次に、JavaScriptを使用して読み取り専用値を削除し、入力フィールドを編集可能な状態に切り替える必要があります。

読み取り専用属性は、またはとともに使用できます。

（2）無効な属性

disable 属性は、入力要素を無効にする必要があることを定義します（表示のみで、バックグラウンドへの送信ではありません）

無効にされた入力要素は使用できず、クリックもできません。他のいくつかの条件が満たされるまで（たとえば、チェックボックスが選択されているなど）、disabled属性を設定できます。次に、JavaScriptを使用して無効な値を削除し、入力要素の値を使用可能に切り替える必要があります。

注：無効な属性を一緒に使用してください。

6つの一般的に使用されるフィールド拡張タイプ

値	説明
ボタン	クリック可能なボタンを定義します（ほとんどの場合、JavaScriptを介してスクリプトを起動するために使用されます）。
チェックボックス	チェックボックスを定義します。
ファイル	ファイルアップロード用の入力フィールドと「参照」ボタンを定義します。
隠された	非表示の入力フィールドを定義します。非表示ですが、まだ存在しています。
画像	画像を送信ボタンとして定義します。
パスワード	パスワードフィールドを定義します。このフィールドの文字はマスクされています。
無線	ラジオボタンを定義します。
リセット	リセットボタンを定義します。リセットボタンは、フォーム内のすべてのデータをクリアします。
参加する	送信ボタンを定義します。送信ボタンは、フォームデータをサーバーに送信します。
テキスト	ユーザーがテキストを入力できる単一行の入力フィールドを定義します。デフォルトの幅は20文字です。

H5新しいラベル

値	説明
色	カラーピッカーを定義する
日付	日付管理を定義します（年、月、日を含み、時間を除く）
日付時刻	日付と時刻の制御を定義します（UTCタイムゾーンに基づいて、年、月、日、時、分、秒、秒の端数を含む）
日時-ローカル	日付と時刻の制御を定義します（年、月、日、時、分、秒、秒の一部を含む、タイムゾーンなし）
Eメール	電子メールアドレスのフィールドを定義する
月	月と年のコントロールを定義する（タイムゾーンなし）
数	数値を入力するためのフィールドを定義する
範囲	正確な値が重要ではない数値を入力するためのコントロールを定義します（スライダーコントロールなど）
探す	検索文字列を入力するためのテキストフィールドを定義します
tel	電話番号を入力するためのフィールドを定義する
時間	時間の入力に使用するコントロールを定義します（タイムゾーンなし）
url	URLを入力するためのフィールドを定義します
週間	週と年のコントロールを定義する（タイムゾーンなし）

7つの大量のテキストとリスト

（1）テキストフィールド

textareaタグは、複数行のテキスト入力コントロールを定義します

テキストフィールドには無制限の量のテキストを収容できます。テキストのデフォルトのフォントはモノスペースフォントです（Courier）

テキスト領域のデフォルト値は、textarea タグのペアに配置する必要があります

textareaのサイズは、colsプロパティとrowsプロパティを使用して指定できますが、CSSのheightプロパティとwidthプロパティを使用することをお勧めします。

（2）リストボックス

select 要素は、単一の選択メニューまたは複数の選択メニューを作成できます。

オプションタグは、リストで使用可能なオプション、つまりリストアイテムを定義するために使用されます。

optgroupタグ は、リストアイテムのグループ化を定義します

 1 <select>
 2   <optgroup label="Swedish Cars">
 3     <option value="volvo">Volvo</option>
 4     <option value="saab">Saab</option>
 5   </optgroup>
 6   <optgroup label="German Cars">
 7     <option value="mercedes">Mercedes</option>
 8     <option value="audi">Audi</option>
 9   </optgroup>
10 </select>

（3）複数の属性

複数の属性は複数の選択を定義します。複数の属性を設定するか、複数のオプションを選択できるかどうかを返すことができます。

複数の使用法：

複数の属性を設定する

selectObject.multiple=true|false

複数の属性を返す

selectObject.multiple

8.オプションボックスの標準開封方法

（1）ラジオタイプ

ラジオラジオボタン。ユーザーがラジオボタンをクリックすると、ボタンが選択され、他のすべてのボタンは選択解除されます。

<form> 男性： <input type="radio" checked="checked" name="Sex" value="male" />
<br /> 女性： <input type="radio" name="Sex" value="female" />
</form>

（2）チェックボックスタイプ

<input type="checkbox">チェックボックスが定義されています。ユーザーは、指定された複数のオプションから1つまたは複数のオプションを選択する必要があり、複数のオプションを同時に選択できます。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car </form>

（3）チェックされた属性

チェックされた属性はブール属性です。

チェックされた属性は、ページの読み込み時にどの要素を事前に選択するかを指定します。

チェックされた属性はとに適用されます。

9、ファイルのアップロード

（1）ファイルタイプ

ファイルタイプは、ファイルアップロード用の入力フィールドと「参照」ボタンを定義します

（2）enctype属性

formタグで定義されたenctype属性は、サーバーに送信する前にフォームデータをエンコードする方法を指定します。

デフォルトでは、フォームデータはとしてエンコードされ"application/x-www-form-urlencoded"ます。

つまり、サーバーに送信する前に、すべての文字がエンコードされます（スペースは「+」プラス記号に変換され、特別な記号はASCII HEX値に変換されます）

プロパティ値：

application / x-www-form-urlencoded は、送信する前にすべての文字をエンコードします（デフォルト）

multipart / form-dataは文字をエンコードしません。この値は、ファイルアップロードコントロールを含むフォームを使用する場合に使用する必要があります。

テキスト/プレーン スペースは「+」プラス記号に変換されますが、特殊文字はエンコードされません

<form action="demo-post_enctype.php" method="post" enctype="multipart/form-data"><input type="file" name="fname"><br>
  <input type="submit" value="提交">
</form>

（3）属性を受け入れる

acceptは、アップロードされたファイルのタイプを指定します。たとえば、複数のタイプをコンマで区切ることができる場合は、accept = "image / png、image / jpg"（これによりpngタイプの画像をアップロードできます）

accept属性は、それと組み合わせてのみ使用できます。ファイルのアップロードを通じて送信できるファイルの種類を指定します。

注：この属性の使用は避けてください。ファイルのアップロードはサーバー側で確認する必要があります。

（4）複数の属性

ファイルファイルのアップロードでは、複数の属性を持つ複数のファイルをアップロードできます。

multiple属性は、入力フィールドが複数の値を選択できることを指定します。

この属性を使用すると、フィールドは複数の値を受け入れることができます。

注：複数の属性は、チャンピオンズリーグと次のタイプを使用します：電子メールとファイル

10.フォームでの日付の使用

（1）日付タイプ

date年、月、日を含む日付を取得します。

1. mixとmaxを使用して、次のように開始時間と終了時間を定義します。min=“ 2030-02-02”

2. step属性を使用して、ステップサイズを設定することもできます（数日後にのみ選択できます）

<input type="date" max='2030-02-02' min='2019-01-01' step='5'>

（2）日時タイプ

日付と時刻のコントロールを定義して、年、月、日、時、分、秒、秒の端数などの日付と時刻を取得します。

（3）時間タイプ

時間を取得し、時間の入力に使用するコントロールを定義します（タイムゾーンなし）。

（4）週タイプ

週タイプは年と週番号を取得します

（5）月タイプ

月タイプは年と月を取得します

（6）日時-ローカルタイプ

日時-現地年月日時分秒

11.検索フォームとデータリストデータリスト

（1）検索タイプ

検索タイプは検索ボックスを定義できますが、最上位層にアクション属性を持つフォームを入力するには、input type = searchが必要です。

（2）データリストラベル

ラベルは、要素の可能なオプションのリストを指定します。

入力要素に「自動完了」機能を提供します。ユーザーは、事前定義されたコンテンツを含むドロップダウンリストを表示できます。これらの内容は、ユーザーが入力したデータになります。

データリスト要素にIDを追加します。他の入力要素は、リスト属性を介してデータリストのIDを指し、それによってデータリスト要素をバインドします。

オプションタグの1つのペアはプロンプトテキストです。プロンプトテキストが必要ない場合は、オプションを1つのタグに変えることができます。

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">兼容性不好</option>> <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

12、フォーム履歴データは自動的に自動入力を促します

自動完了属性

type = searchには多くのデフォルトのスタイルと動作があります。ドロップダウンボックスにはデフォルトで履歴検索レコードが表示され、表示効果はブラウザやデバイスによって異なります。

autocomplete 属性は、フォームでautocompleteを有効にするかどうかを指定します。

自動完了により、ブラウザはフィールドへの入力を予測できます。ユーザーがフィールドに入力を開始すると、ブラウザーは前の入力の履歴に基づいてフィールドに入力されたオプションを表示します。

注：Operaを除いて、他の主流のブラウザーはすべてautocomplete属性をサポートしています

注：自動完了の「オン」はフォームに適用され、「オフ」は特定の入力フィールドに適用され、その逆も同様です。