HTML フォーム_PowerNode Java アカデミー

1. フォーム

1. フォームの役割

HTML フォームは、さまざまな種類のユーザー入力を受け取り、ユーザーがフォームを送信したときにデータをサーバーに送信するために使用され、それによってユーザーと Web サーバー間の対話を実現します。

2. フォームの使い方

3. フォーム定義（<form></form>タグ）

HTML フォームは、フォーム要素を含む領域です。フォームは <form> タグを使用して作成されます。フォームには、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなどの入力要素を含めることができます。フォームには、メニュー、テキストエリア、フィールドセット、凡例、ラベル要素も含めることができます。 <form> 要素はブロックレベル要素であり、その前後に改行が発生することに注意してください。

     <フォームアクション="login.do" メソッド="post">
     <!--フォーム要素はここに記述します-->
     </フォーム>

4. フォームのプロパティ

action: フォームが送信されたときにフォームデータを送信する場所を指定します。アクション値は、まず URL (絶対 URL/相対 URL) で、通常はサーバー側のプログラムを指します。プログラムはフォームによって送信されたデータ (つまり、フォーム要素の値) を受け取り、それに応じて処理します。たとえば、<form action="http://www.XXX.com/login.do"> の場合、ユーザーがこのフォームを送信すると、サーバーは URL "http://www.XXX.com/" で "login.do" という名前の一般的な処理プログラムを実行します。次に、mailto プロトコルの URL アドレスを使用して、フォームの内容を電子メールとして送信します。これは比較的まれな状況であり、訪問者が自分のコンピューターに電子メール送信プログラムをインストールし、正しく設定している必要があるためです。 3 番目は空の値です。アクションが空であるか、書き込まれていない場合は、現在のページに送信することを意味します。

method: この属性は、ブラウザがフォーム内のデータをサーバーハンドラーに送信する方法を定義します。メソッドの値に関しては、最もよく使用されるのは get と post です。まず、get メソッドを使用してフォームデータを送信する場合、Web ブラウザーは、各フォームフィールド要素とそのデータを URL パラメーター形式で <form> タグの action 属性で指定された URL アドレスに添付し、Web サーバーに送信します。URL の長さ制限により、get メソッドを使用して送信されるデータ量は通常 1 KB 未満に制限されます。次に、ブラウザは post メソッドを使用して、フォームデータを HTTP リクエスト本文の一部としてサーバーに送信します。一般的に、post メソッドを使用して送信されるデータの量は、get メソッドを使用して送信されるデータ量よりも大きくなります。HTML 標準によると、フォームを処理するサーバープログラムがサーバーに保存されているデータを変更しない場合は、get メソッドを使用する必要があります (クエリなど)。フォーム処理の結果、サーバーに保存されているデータに変更が生じる場合は、post メソッドを使用する必要があります (追加、削除、変更操作など)。 3 番目は、その他のメソッド (Head、PUT、DELETE、TRACE、OPTIONS など) です。実際、元の HTTP 標準ではさまざまな操作に対応するメソッドが指定されていましたが、後にその多くが遵守されなくなり、ほとんどの場合、get または post を使用するだけで十分でした。

target: この属性は、action 属性で指定された URL によって返された結果を表示する場所を指定します。値は_blank（新しいウィンドウで開く）、_self（同じフレームで開く、デフォルト）、_parent（親フレームで開く）、_top（ウィンドウ全体で開く）、framename（指定したフレームで開く）です。

title: ウェブサイト訪問者がフォーム上の任意の場所にマウスを置いたときにブラウザが小さなフロートとともに表示するテキストを設定します。

enctype: フォームデータをサーバーに送信する前にどのようにエンコードするかを指定します。値: デフォルト値は「application/x-www-form-urlencoded」です。すべての文字はサーバーに送信される前にエンコードされます (スペースは「+」プラス記号に変換され、特殊記号は ASCII HEX 値に変換されます)。「multipart/form-data」: 文字はエンコードされません。ファイルアップロードコントロールを含むフォームを使用する場合は、この値が必要です。

name: フォームの名前。 name 属性と id 属性の違いに注意してください。name 属性はサーバーと通信するときに使用される名前であり、id 属性はブラウザーで使用される名前です。この属性は主に CSS と JavaScript で使用され、クライアントプログラミングを容易にします。

2. フォーム要素

1. 1行テキストボックス <input type="text"/> (input type属性のデフォルト値は「text」)

<input type = "text" name = "名前"/>

単一行テキストボックスの主なプロパティは次のとおりです。

size: テキストボックスの幅を文字数で指定します。ほとんどのブラウザでは、テキストボックスのデフォルトの幅は 20 文字です。
value: テキストボックスの既定値を指定します。これは、ブラウザーがフォームを初めて表示したとき、またはユーザーが <input type="reset"/> ボタンをクリックしたときにテキストボックスに表示される値です。
maxlength: ユーザー入力の最大文字長を指定します。
readonly: 読み取り専用属性。readonly 属性が設定されている場合、テキストボックスはフォーカスを取得できますが、ユーザーはテキストボックス内の値を変更できません。
disabled: 無効。テキストボックスが無効になっている場合、フォーカスを取得できません。もちろん、ユーザーはテキストボックスの値を変更できません。また、フォームが送信されても、ブラウザはテキストボックスの値をサーバーに送信しません。

2. パスワードボックス <input type="password"/>

<input type="パスワード" name="名前"/>

3. ラジオボタン <input type="radio"/>

使い方：同じ名前のラジオボタンをグループにして、ラジオボタンごとに異なる値を設定します。こうすることで、個別に判断しなくても、指定した名前の値を取ることで誰が選択されているかが分かります。ラジオボタンの要素値は、value 属性によって明示的に設定されます。フォームが送信されると、選択された項目の値と名前がパッケージ化され、値が明示的に設定されずに送信されます。

    <input type="radio" name="gender" value="男性"/> 
    <input type="radio" name="性別" value="女性"/>

4. チェックボックス <input type="checkbox"/>

チェックボタングループ、つまり同じ名前のチェックボタンのグループを使用します。チェックボタンフォーム要素の要素値は、value 属性によって明示的に設定されます。式が送信されると、選択されたすべての項目の値と名前がパッケージ化され、値を明示的に設定せずに送信されます。チェックボックスのチェック済み属性は、チェックボックスが選択されているかどうかを示します。<input type="checkbox" selected /> または <input type="checkbox" selected="checked" /> (推奨) チェック済みや読み取り専用などのオプション値を持つ属性では、属性値を省略できます。

     <input type="checkbox" name="language" value="Java"/> 
     <input type="checkbox" name="language" value="C"/>
     <input type="checkbox" name="language" value="C#"/>

5. 隠しフィールド <input type="hidden"/>

隠しフィールドは、ユーザーに表示する必要がない情報をサーバーに送信するためによく使用されます。

<input type="hidden" name="隠しフィールド"/>

6. ファイルのアップロード <input type="file"/>

ファイルを使用する場合、フォームの enctype は multipart/form-data に設定され、method 属性は POST にする必要があります。

<input name="アップロードされたファイル" id="アップロードされたファイル" type="ファイル" size="60" accept="text/*"/>

7. ドロップダウンボックスの<select>タグ

<select> タグはリストボックスを作成し、<option> タグはリスト項目を作成します。<select> はネストされた <option> と一緒に使用され、一連のオプションから選択する方法を提供します。

オプションを選択済みに設定します: <option selected>Beijing</option> または <option selected="selected">Beijing</option> (推奨方法) を選択して、この項目を選択済み項目として設定します。「未選択」を実現するにはどうすればよいでしょうか? <option value="-1">--未選択--<option> を追加し、プログラムで選択された値を決定します。-1 の場合は、選択されていないとみなされます。

グループ化オプションを選択します。optgroup を使用してデータをグループ化できます。グループ自体は選択されません。これはドロップダウンリストとリストボックスの両方に適用されます。

<select> タグと multiple 属性を組み合わせると、複数選択が可能になります (選択するには CTRL キーを押します)

    <select name="country" size="10">
          <optgroup label="アフリカ">
              <option value="gam">ガンビア</option>
              <option value="mad">マダガスカル</option>
              <option value="nam">ナミビア</option>
          </optgroup>
          <optgroup label="ヨーロッパ">
              <option value="fra">フランス</option>
              <option value="rus">ロシア</option>
             <option value="uk">イギリス</option>
         </optgroup>
         <optgroup label="北米">
             <option value="can">カナダ</option>
             <option value="mex">メキシコ</option>
             <option value="usa">米国</option>
         </optgroup>
     </選択>

8. 複数行テキスト <textarea></textarea>

複数行テキスト <textarea> は、複数行のテキストを入力できるテキストボックスを作成します。<textarea> には value 属性がありません。<textarea>text</textarea>、cols="50"、rows="15" 属性は行と列の数を示します。指定されていない場合、ブラウザーはデフォルトの表示を使用します。

    <テキストエリア名="テキストエリアコンテンツ" 行数="20" 列数="50" >
             複数行テキスト ボックスの初期表示内容</textarea>

9. <label></label> タグ

<input type="text"> の前に通常のテキストを書いて装飾することもできますが、装飾されたテキストをクリックしても入力にフォーカスが当たらなくなります。ただし、label を使用できます。for 属性は、装飾するコントロールの ID を指定します。<label for="txt1">content</label>;" と入力し、alt+u を押します (理解するため)。accesskey="u" は、label の別の属性です。注: 装飾するコントロールには一意の ID を設定してください。<label></label> タグは、<input type="radio"/> と <input type="checkbox"/> の 2 つのタグに非常に便利だと思います。

   <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男性</lable>
   <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女性</label>
   <input type="radio" name="sex" id="secret" value="2" /><label for="secret">機密</label>

10. <fieldset></fieldset> タグ

fieldset タグはコントロールを領域に分割し、見た目をすっきりさせます。

 <フィールドセット>
    <legend>趣味</legend>
     <input type="checkbox" value="バスケットボール" />
     <input type="checkbox" value="登山" />
     <input type="checkbox" value="読む" />
 </フィールドセット>

11. 送信ボタン <input type="submit"/>

ユーザーが <inputt type="submit"/> の送信ボタンをクリックすると、フォームデータは <form> タグの action 属性で指定されたサーバーハンドラーに送信されます。中国語版 IE のデフォルトのボタンテキストは「クエリの送信」です。value 属性を設定すると、ボタンの表示テキストを変更できます。

<input type="submit" value="送信"/>

12. リセットボタン <input type="reset"/>

ユーザーが <input type="reset"/> ボタンをクリックすると、フォーム内の値が初期値にリセットされます。ユーザーがフォームを送信しても、リセットボタンの名前と値はサーバーに送信されません。

<input type="reset" value="リセットボタン"/>

13. 通常ボタン <input type="button"/>

通常のボタンは通常、クリックするとスクリプトコードを実行するために使用されます。

<input type="button" value="通常のボタン"/>

14. 画像ボタン <input type="image"/>

画像ボタンの src 属性は画像ソースファイルを指定し、value 属性はありません。画像ボタンは <input type="submit"/> を置き換えることができ、CSS を介して直接 <input type="submit"/> ボタンの外観を画像に設定することもできます。

  <input type="image" src="bg.jpg" />

3. フォームの例

この例は、テーブルレイアウトを使用してフォームで実装された単純な登録ページです。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN" "http://wwwworg/TR/html4/loosedtd">
   <html>
   <ヘッド>
       <title>登録ページ</title>
       <スタイル タイプ="text/css">
         テーブル
        {
             幅: 450ピクセル;
             境界線: 1px 実線の赤;
              背景色: #FFCB29;
              境界線の折りたたみ: 折りたたみ;
          }
          td
         {
             幅: 200;
             高さ: 40px;
             境界線: 1px 黒一色;
          }
          スパン
          {
              背景色: 赤;
          }
      </スタイル>
  </head>
  <body style="background-color: blue; background-image: url(/image/bearjpg); background-repeat: repeat;">
      <フォーム名="登録フォーム" id="フォーム1" アクション="" メソッド="投稿">
      <テーブルの位置合わせ="center" セル間隔="0" セルパディング="0">
          <tr>
              <td>
                  ユーザー名:
              </td>
              <td>
                  <入力タイプ="テキスト" />
              </td>
          </tr>
          <tr>
              <td>
                  パスワード：
              </td>
              <td>
                  <input type="パスワード" />
              </td>
          </tr>
          <tr>
              <td>
                  パスワードを認証する：
              </td>
              <td>
                  <input type="パスワード" />
              </td>
          </tr>
          <tr>
              <td>
                  都市を選択してください:
              </td>
              <td>
                  <選択>
                      <optgroup label="中国">
                          <option>甘粛省</option>
                          <option>河南省</option>
                          <option>上海</option>
                      </optgroup>
                      <optgroup label="アメリカ">
                          <option>カリフォルニア</option>
                          <option>シカゴ</option>
                          <option>ニューヨーク</option>
                      </optgroup>
                  </選択>
              </td>
          </tr>
          <tr>
             <td>
                 性別を選択してください:
            </td>
            <td>
                 <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男性</lable>
                     <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女性</label>
                     <input type="radio" name="sex" id="secret" value="2" /><label for="secret">機密</label>
              </td>
          </tr>
          <tr>
              <td>
                  職業を選択してください:
              </td>
              <td>
                  <input type="radio" id="student" name="職業" /><label for="student">学生</label>
                  <input type="radio" id="teacher" name="職業" /><label for="teacher">教師</label>
                  <input type="radio" id="others" name="職業" /><label for="others">その他</label>
              </td>
          </tr>
          <tr>
              <td>
                  趣味を選択してください:
              </td>
              <td>
                  <フィールドセット>
                      <legend>あなたの趣味</legend>
                      <input type="checkbox" name="趣味" id="basketboll" checked="checked" /><label for="basketboll">バスケットボールをする</label>
                      <input type="checkbox" name="hobby" id="run" /><label for="run">ランニング</label>
                     <input type="checkbox" name="hobby" id="read" /><label for="read">読む</label>
                     <input type="checkbox" name="趣味" id="サーフィン" /><label for="サーフィン">サーフィン</label>
                 </フィールドセット>
             </td>
         </tr>
         <tr>
             <td>
                 述べる：
             </td>
             <td>
                 <textarea cols="30">ここにメモの内容があります</textarea>
             </td>
         </tr>
         <tr>
             <td>
                 &nbsp;
             </td>
             <td>
                 <input type="submit" value="送信" />
                 <input type="reset" value="リセット" />
             </td>
         </tr>
     </テーブル>
     </フォーム>
 </本文>
 </html>

<<: docker runの--rmオプションの使用方法

>>: Vueは動的ルーティングの詳細を実装します