ホームページ >ウェブフロントエンド >htmlチュートリアル >初心者向け HTML フォーム インタラクション tag_html/css_WEB-ITnose
初心者向け HTML フォーム インタラクション tag_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:08872ブラウズ
form タグは、Web サイト内でのユーザーとのインタラクションを主に担当します。インタラクションがなければ、Web サイトは単なる表示となり、活気がなくなります。 form>Form タグはブラウザ (つまりユーザー) によって入力されたデータをサーバーに送信できるため、サーバー プログラムはフォームから渡されたデータを処理し、ユーザーとの対話を完了できます。常に魂です。HTML インタラクションは他の開発されたインタラクションと同じで、一般に get メソッドまたは post メソッドを使用します (get リクエストは完全な文字列 URL を直接使用してデータをリクエストおよびアップロードします。利点は便利で高速であることです。post リクエストは接続ヘッダーとリクエスト パラメーター (bodyString) に分かれているため、スプライシングが必要です。詳細については、
バックエンド開発者が考慮する必要がある問題です。
ff9c23ada1bcecdd1a0fb5d5a0f18437 の構文。 tag コードを直接使う 説明してください
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>表单标签</title> 6 </head> 7 <body> 8 <form method="post" action = "data.php"> 9 <label for="username">用户名:</label>10 <input type="text" name="username" id="username" value="" /><br />11 <label for="pass">密码:</label>12 <input type="password" name="pass" id="pass" value="" /> <br />13 <input type="submit" value="确定" name="submit" />14 <input type="reset" value="重置" name="reset" />15 </form> 16 </body>17 </html>
method属性は、以前詳しく紹介したバックグラウンドとのやり取り（get、post）の具体的な方法を指します
action属性は、それを指します。
上記には他のものも含まれていますが、それらを取り出して個別に記述します。 .
d5fd7aea971a85678ba271703566ebfd入力タグ
d5fd7aea971a85678ba271703566ebfd入力 私の個人的な理解では、ラベルは人間とコンピューターの対話が次に始まることを意味します。これには、最も重要なパラメーターである type が含まれます。たとえば、「テキスト」は入力を意味し、「ボタン」はボタン操作を意味し、「パスワード」はパスワード入力ボックスを意味します。非常に快適ですが、2、3 回書くと理解しやすくなります。名前はテキスト ボックスに名前が付けられており、バックグラウンド プログラムである ASP や PHP を使用しやすくなります。 . 値は、通常はプロンプトとして使用されるテキスト入力ボックスのデフォルト値を設定します (前提として、テキスト入力ボックスは、タイプが異なると、値が異なる役割を果たします)。
d5fd7aea971a85678ba271703566ebfd いくつかのタイプのタグ属性
テキスト、パスワードについては上で説明しましたが、その他について話しましょう
送信、データ送信ボタン、ユーザーがフォーム情報をサーバーに送信する必要がある場合、それを使用する必要があります この時点で送信ボタンに移動します。 , value属性は送信ボタンに表示されるテキストになります
リセット、リセットボタン、これのvalue属性は上記と同じですが、フォームの情報を初期状態にリセットする機能です,
Radio,ラジオボタンは、通常クリックすると選択状態になります。チェックボックスは、通常使用する小さな四角形になります。ただし、パラメーターが radio/checkbox の場合、value 属性はサーバーに送信された特定の値 (0 や 1 など) を指します。これらは false と true を表し、checked は選択された状態を指します。項目の属性値が「チェックされている」場合、それはデフォルトで選択されていることを意味します。ステータスを宣言するため、このタグ内の 5a07473c87748fb1bf73f23d45547ab8 タグは、53ef528b06ec79ef05684370cfbe8ed2 タグと 5a07473c87748fb1bf73f23d45547ab8 タグに結合されます。 list タグ。さまざまな 5a07473c87748fb1bf73f23d45547ab8 タグがさまざまな選択状況に対応します。「multiple」に設定すると、ドロップダウン リストは複数の選択をサポートします。 , Ctrl + クリック (Mac Command + click)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>下拉列表框</title> 6 </head> 7 <body> 8 <form action="data.php" method="post" > 9 <label>开发语言:</label>10 <select>11 <option value="Objective-C">Objective-C</option>12 <option value="Swift">Swift</option>13 <option value="Java">Java</option>14 <option value="C++">C++</option>15 </select>16 </form>17 </body>18 </html>
コード効果
このとき、値が「selected」の場合は、3188f3ebdb28bfc357d641f28c0494a8 オプションがデフォルトで選択されます
4750256ae76b6b9d804861d8f69e79d3テキストエリアラベル
英語で 4750256ae76b6b9d804861d8f69e79d3 ラベルの一般的な意味を確認できます。つまり、テキスト入力ボックスのすべての機能が使用できます。領域内には rows (行数)、cols (列数) の 2 つのパラメータがあり、設定後はテキスト領域のサイズに直接影響します。CSS を学習している場合は、幅を変更することができます。
; 2e1cf0710519d5598b1f0f14c36ba674 テキスト ラベル
; 2e1cf0710519d5598b1f0f14c36ba674 これは、ユーザーに何の効果も与えません。マウスのクリック範囲の選択を容易にするため、つまり、ラベルの後に追加します。それに関連付けられたラベルをクリックすると、対応するラベルをクリックしたような効果を得ることができます。ただし、ラベルの for 属性を設定する必要があります。これは、対応する入力ボックス ID と同じである必要があります。
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>form中的lable标签</title></head><body>你对什么语言感兴趣:<form> <label for="Objective-C">Objective-C</label> <input type="checkbox" name="OC" id="Objective-C"/> <br /> <label for="Swift">Swift</label> <input type="checkbox" name="SW" id="Swift" /> <br /> <label for="Java">Java</label> <input type="checkbox" name="JV" id="Java"></form></body></html>
这个代码实现的功能即是点击文字, 复选框即关联点击效果.