HTML フォームはユーザーと対話するための強力なツールですが、歴史的および技術的な理由により、HTML フォームを最大限に活用する方法は必ずしも明らかではありません。この章では、構造からスタイル、データ処理からカスタム ウィジェットに至るまで、HTML フォームのあらゆる側面を取り上げます。
フォーム: さまざまな種類のユーザー入力データを収集し、それをサーバーに送信して、ユーザーとサーバー間のデータ対話を実現します。
form タグ form は、フォーム内にある限り、データを収集する範囲を宣言します。
ページ内には複数のフォーム タグを含めることができますが、それらは並列関係にのみ存在でき、ネストすることはできません。ユーザーがサーバーにデータを送信する場合、一度に 1 つのフォームでのみデータを送信できます。複数のフォームを送信する場合は、js で非同期対話を使用する必要があります。
<form> 要素
HTML フォームはユーザー入力を収集するために使用されます。
要素定義 HTML フォーム:
<フォーム>.formelements.</form>
1. HTML フォームにはフォーム要素が含まれます。
フォーム要素は、チェック ボックス、ラジオ ボタン、送信ボタンなど、さまざまな種類の入力要素を指します。
(1) <input>要素
<input> 要素は最も重要なフォーム要素です。 <input> 要素には、type 属性に応じて多くの形式があります。この章で使用されるタイプは次のとおりです。
(2) 文字入力
<input type=text> は、テキスト入力用の 1 行の入力フィールドを定義します。
<!DOCTYPEhtml><html><body><form>姓:<br><inputtype=textname=firstname><br>名:<br><inputtype=textname=lastname></form><p>お願いしますフォーム自体は非表示であることに注意してください。 </p><p>テキスト フィールドのデフォルトの幅は 20 文字であることにも注意してください。 </p></body></html>
提示された結果は次のとおりです。
(3)ラジオボタン入力
<input type=radio> はラジオ ボタンを定義します。ラジオ ボタンを使用すると、ユーザーは限られた数のオプションから 1 つを選択できます。
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>男性<br><inputtype=radioname=sexvalue=2>女性</form></body></html>
提示された結果は次のとおりです。
(4) 送信ボタン
<input type=submit> は、フォーム ハンドラーにフォームを送信するために使用されるボタンを定義します。フォーム ハンドラーは通常、入力データを処理するスクリプトを含むサーバー ページです。フォーム ハンドラーは、フォームの action 属性で指定されます。
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>姓:<br><inputtype=textname=firstnamevalue=李><br>名前:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>[送信] をクリックすると、フォーム データは後続の処理のために、demo_form.ashx という名前のページに送信されます。 </p></body></html>
提示された結果は次のとおりです。
2. フォーム属性:
(1) アクション属性
action 属性は、フォームの送信時に実行されるアクションを定義します。フォームをサーバーに送信する通常の方法は、送信ボタンを使用することです。通常、フォームは Web サーバー上の Web ページに送信されます。上の例では、送信されたフォームを処理するサーバー スクリプトが指定されています。
<formaction=action.php>
action 属性を省略した場合、action は現在のページに設定されます。
(2)メソッド属性
Method 属性は、フォームの送信時に使用される HTTP メソッド (GET または POST) を指定します。
<formaction=action.phpmethod=GET>
または：
<formaction=action.phpmethod=POST>
GET をいつ使用するか?
フォームの送信が受動的（検索エンジンのクエリなど）であり、機密情報がない場合は、GET（デフォルトのメソッド）を使用できます。 GET を使用すると、フォーム データがページのアドレス バーに表示されます。
action_page.php?firstname=ハン&lastname=メイメイ
注: GET は、少量のデータを送信するのに最適です。ブラウザには容量制限 (255 文字) が設定されます。
POSTをいつ使用するか?
フォームがデータを更新している場合、または機密情報 (パスワードなど) が含まれている場合は、POST: を使用する必要があります。ページのアドレス バーに送信されたデータは表示されないため、POST の方が安全です。
(3) 名前属性
正しく送信するには、各入力フィールドに name 属性が設定されている必要があります。この例では、姓の入力フィールドのみを送信します。
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>姓:<br><inputtype=textvalue=李><br>名:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>[送信] をクリックすると、フォーム データが [demo_form.ashx] という名前のページに送信されます。 </p><p>この入力要素には name 属性がないため、姓は送信されません。 </p></body></html>
提示された結果は次のとおりです。
3. フォームコントロール
フォームデータを <fieldset> と結合します。
<fieldset> 要素は、関連するデータをフォームに結合します。 <legend> 要素は、<fieldset> 要素のタイトルを定義します。
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>個人情報:</legend>姓:<br><inputtype=textname=firstnamevalue=Mickey><br > 名前:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
フォームは、さまざまなコントロールに入力する必要があるユーザー データを収集するために使用されます。 HTML コントロールもタグを通じて実装されますが、いくつかの特別な外観を示し、いくつかのインタラクティブな機能を備えています。
HTML フォームには、次の表に示すコントロールを含めることができます。