HTMLメモ(7) form_html/css_WEB-ITnose

Form タグ:

form タグは最も一般的に使用されるタグであり、サーバー側との対話に使用されます。

: 入力タグ; ユーザー入力情報を受け入れます

type 属性は、input タグのタイプを指定します

テキスト ボックスのテキスト: 入力されたテキスト情報がボックスに直接表示されます。 パスワードボックスのパスワード：入力した文字がドットまたは型番で表示されます。 ラジオ ボタンのラジオ: 性別の選択など。 チェックボックス checkbox: 例: 関心のある選択。 隠しフィールドが非表示: ページには表示されませんが、送信時に他のコンテンツと一緒に送信されます。 送信ボタン submit: フォーム内のコンテンツを送信するために使用されます。 リセットボタン リセット：フォーム入力内容を初期値に設定 ボタンボタン：イベントをカスタマイズできます。 ファイルアップロードファイル: 後で展開されたコンテンツにより、テキストボックスとボタンが自動的に生成されます。 イメージ イメージ 送信ボタンを置き換えることができます

: ユーザーにコンテンツの選択を提供するラベルを選択します。例: ユーザーの所在地の都道府県。 size 属性は、表示される項目の数です。

: サブ項目ラベル。選択された属性には属性値がなく、サブ項目の 1 つに追加され、そのサブ項目がデフォルトで選択されたオプションになります。

: 個人情報の説明などの複数行のテキスト ボックス。

: 各要素のショートカット キーを定義するために使用されます。

for 属性: ショートカット キーが機能するフォーム要素を指定します。適用する form 要素の id 値と同じである必要があります。

accesskey 属性: ショートカット キーを指定します。このショートカット キーは、alt キーと組み合わせて使用​​する必要があります。

例:

                  <p class="sycode">                      1      <     tr     >           2            <     td     ><     label      accesskey     ="u"      for     ="userid"     >     用户名     </     td     >           3            <     td     ><     input      type     ="text"      name     ="user"      id     ="userid"     /></     td     >           4            </     tr     >                  </p>

フォーム送信:

まずフォームフォームにaction属性値を定義し、フォームデータの送信先(サーバー)を指定します。 Method 属性値を指定して送信方法を指定します。定義されていない場合、メソッドの値はデフォルトで get になります。

最も一般的に使用される 2 つの送信方法、get と post の違い:

Get submit はアドレス バーにデータを表示しますが、これは機密情報にとって安全ではありません。投稿内容はアドレスバーに表示されません。 アドレス バーに保存されるデータには制限があるため、get メソッドには送信されるデータの量に制限があります。 Post は大量のデータを送信できます。 送信されたデータは、さまざまな方法でカプセル化されます。 get: 送信されたデータは、メッセージ ヘッダーの前とリクエスト行にカプセル化されます。 post: 送信されたデータをメッセージ ヘッダーの後のデータ本体にカプセル化します。 注: コーディングが便利なため、通常、フォームは post を使用して送信されます。 Tomcat サーバーの場合、デフォルトのデコード方式は ISO8859-1 であるため、中国語の文字は文字化けして表示されます。 post によって送信された場合、request.setCharcterEncoding("GBK"); を使用して文字化けの問題を解決できます。このメソッドは get によって送信された場合にのみ有効です。文字化けの問題があるため、最初に ISO8859-1 エンコードを実行してから、GBK デコードを実行する必要があります。この方法はpostでの文字化けにも適していますが、面倒なのでフォーム送信はpostで行うことをおすすめします。

例:

                  <p class="sycode">                       1      <     fieldset     >            2            <     legend     >     注册区域     </     legend     >            3            <     form      action     ="http://127.0.0.1:8888"      method     ="post"     >            4            <     table      border     ="5"      width     ="75%"      cellpadding     ="10"      cellspacing     ="0"      bordercolor     ="#3399FF"     >            5            <     tr     >            6            <     td      colspan     ="2"      align     ="center"     ><     b     >     信息注册页面     </     b     ></     td     >            7            </     tr     >            8             9            <     tr     >           10            <     td     ><     label      accesskey     ="u"      for     ="userid"     >     用户名     </     td     >           11            <     td     ><     input      type     ="text"      name     ="user"      id     ="userid"     /></     td     >           12            </     tr     >           13            <     tr     >           14            <     td     >     密码     </     td     >           15            <     td     ><     input      type     ="password"      name     ="passwd"     /></     td     >           16            </     tr     >           17            <     tr     >           18            <     td     >     确定密码     </     td     >           19            <     td     ><     input      type     ="password"      name     ="passwd_conform"     /></     td     >           20            </     tr     >           21            <     tr     >           22            <     td     >     性别     </     td     >           23            <     td     >           24            <     input      type     ="radio"      name     ="sex"      value     ="man"     />     男      25            <     input      type     ="radio"      name     ="sex"      value     ="woman"           />     女      26            </     td     >           27            </     tr     >           28            <     tr     >           29            <     td     >     技术     </     td     >           30            <     td     >           31            <     input      type     ="checkbox"      name     ="tech"      value     ="java"           />     Java      32            <     input      type     ="checkbox"      name     ="tech"      value     ="jsp"           />     Jsp      33            <     input      type     ="checkbox"      name     ="tech"      value     ="servlet"           />     Servlet      34            </     td     >           35            </     tr     >           36            <     tr     >           37            <     td     >     国家     </     td     >           38            <     td     >           39            <     select      name     ="country"     >           40            <     option     >     --选择国家--     </     option     >           41            <     option      value     ="cn"     >     中国     </     option     >           42            <     option      value     ="en"     >     英国     </     option     >           43            <     option      value     ="usa"     >     美国     </     option     >           44            </     select     >           45            </     td     >           46            </     tr     >           47            <     tr     >           48            <     td      colspan     ="2"      align     ="center"     >           49            <     input      type     ="submit"      value     ="submit"     />           50            <     input      type     ="reset"      value     ="reset"     />           51            </     td     >           52            </     tr     >           53            54            </     table     >           55            </     form     >           56           </     fieldset     >                        </p>

セキュリティの問題:

暴力的な送信、暴力的な登録

                  <p class="sycode">                      1      <     a      href     =”http://注册地址?name=value&id=value......”     >     暴力开始     </     a     >                  </p>

ハイパーリンクはデフォルトで送信メソッドを取得します

クライアントは最初にデータの有効性検証を実行し、サーバーはクライアントによって送信されたデータを検証しますもう一度確認してください