HTML フォームについて Form_html/css_WEB-ITnose

フォーム (フォーム) は、主にユーザーが入力した情報を収集および送信するために使用され、ページと WEB サーバー間のやり取りにおいて最も重要な情報源です。

フォーム(Form)を使いこなすには以下のポイントがあります:

フォームの重要な属性

フォームの共通コントロール

フォームの送信方法

​​

§ フォームの重要な属性

アクション { URL}: フォームの送信時にデータを送信する場所を指定します。

enctype : フォーム データを送信する前にエンコードする方法を指定します。 （値は以下の通り）

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

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

method: フォームを送信する方法を指定します。

get: from フォームに入力された値が、アクションで指定された URL に追加され、URL リンクとして渡されます。 (アドレスバーにフォーム送信情報が表示されます)

投稿: フォームから入力された値が HTML ヘッダーに追加されます。 (フォーム送信情報はアドレスバーには表示されません)

§ フォーム共通コントロール

2e1cf0710519d5598b1f0f14c36ba674 タグ:

2e1cf0710519d5598b1f0f14c36ba674 タグは入力要素のラベルを定義します。 、およびその属性は、関連する要素の id 属性と同じである必要があります。バインド後、テキストをクリックすると、マウスはバインドされたフォーム コントロールにフォーカスします。

推奨: 各フォーム要素のテキスト説明には 2e1cf0710519d5598b1f0f14c36ba674 タグを使用してください。 (2e1cf0710519d5598b1f0f14c36ba6748c1ecd4bb896b2264e0711597d40766c2 つのラベル間のコンテンツは、バインドされたフォーム コントロールのテキスト説明です)

注: 各フォーム要素には、name 属性と id 属性を割り当てる必要があります。 (name 属性と id 属性は、可能な限り同じ値または関連する値を使用する必要があります。) name 属性: データをサーバーに送信するために使用されます。 id 属性: クライアント上で対応する操作を実行するために使用されます。 : ラベルのバインディング、CSS セレクターの使用など。

テキスト入力ボックス:

1)、input type="text" 単一行テキスト ボックス

<label for= "Account">账号：</label><input type="text" name="Account" id="Account" value="账户" maxlength="20">

2)、textarea 複数行テキスト ボックス

<label for="comment">评论：</label><textarea name="comment" id="comment" cols="30" rows="15" maxlength="100"></textarea>

説明: maxlength は最大長を指定します。テキストエリアのサイズ 文字数; に文字が入力されている場合は、改行も 1 文字としてカウントされます。 <p> </p> <p class="sycode"> </p> <p>パスワード入力ボックス: </p> <p> </p> パスワードフィールドを定義します。 (文字は隠れます) <p> <strong> <pre class="precsshui"><label for= "Password">密码：</label><input type="password" name="password" id="password" value="密码"></pre> </strong> </p> <p> </p> <p class="sycode">ラジオボタン: </p> <p> </p>ラジオボタンを設定し、選択されたラジオボタンの値を取得します<p> <strong> <pre class="precsshui"><form name="MyForm" action="URL" method="post">　　<p>性别：　　　<input type="radio" name="sex" id="male" value="male"><label for="male">male</label>　　　<input type="radio" name="sex" id="female" value="female"><label for="female">female</label>　　</p>　　<input type="button" value="获取选中项" onclick="getValue();" /></form><br /><br />//获取选中的单选值<script language="javascript">function getValue(){ //获取表单的所有提交信息（根据表单的name属性） var myform = document.forms["MyForm"]; //sex是单选按钮的name属性值 var radioChoices = myform.sex; //遍历整个单选项表 for(i=0;i<radioChoices.length;i++) if(radioChoices[i].checked) break; //发现了被选中项,退出 alert("选中的选项是："+radioChoices[i].value);}</script></pre> </strong> </p>注: <p> </p>1)、クライアント側で、 Javascript がフォームおよびフォーム要素を操作する場合、id 属性よりも name 属性がよく使用されます。一部の特定のフォーム要素 (ラジオ ボタンなど) では、name 属性を使用して要素値を取得する方が簡単であり、サーバーにデータを送信するのも簡単だからです。 <p class="sycode"> </p>2) 同じグループのラジオ ボタンの name 属性値が同じであることを確認します。 <p> </p> <p> </p> <p>チェックボックス: </p> <p> </p>チェックボックスの「全選択」、「全選択解除」、「反転選択」機能と選択されたチェックボックスの値を取得する機能<p> <strong> <pre class="precsshui"><form name="MyForm" action="URL" method="post">　　<input type="checkbox" name="hoboy" id="music"><label for="music">music</label>　　<input type="checkbox" name="hoboy" id="swim"><label for="swim">swim</label>　　<input type="checkbox" name="hoboy" id="dance"><label for="dance">dance</label>　　<input type="button" value="全选" onclick="selectBoxs(1);" />　　<input type="button" value="全不选" onclick="selectBoxs(0);" />　　<input type="button" value="反选" onclick="selectBoxs(-1);" />　　<input type="submit" value="提交" onclick="submit();" /></form><script language="javascript">//全选，全部选，反选function selectBoxs(value){ var myform = document.forms["MyForm"]; //hoboy 为所有复选框的name属性值 var CheckboxChoices = myform.hoboy; for(var i=0;i<CheckboxChoices.length;i++) //遍历每一个选项 if(value < 0)//反选 CheckboxChoices[i].checked = !CheckboxChoices[i].checked; else //value为1是则全选,为0时则全不选 CheckboxChoices[i].checked = value;}function getSelect(){ var myform = document.forms["MyForm"]; var CheckboxChoices = myform.hoboy;　　//创建数组放checkbox选中的值 var arrayCheckbox = new Array(); for(var i=0;i<CheckboxChoices.length;i++){ 　　if(CheckboxChoices[i].checked) 　　　　arrayCheckbox.push(CheckboxChoices[i].value); } alert(arrayCheckbox);}</script></pre> </strong> </p>注:同じグループのチェックボックス ボタンには、同じ name 属性値が設定されます。 <p> </p> <p class="sycode"> </p> <p>ドロップダウン ボックス: </p> <p> </p>ドロップダウン ボックスの重要な属性: <p> <strong>multiple 属性: ドロップダウン リスト ボックスのタイプ (複数選択または単一選択) を設定するために使用されます </strong> </p>type 属性: JS は、type 属性の値に基づいてドロップダウンを取得します。リスト ボックス選択コントロールのタイプ。 <p> </p> type 属性の値は次のとおりです: select-multiple (複数選択) または select-one (単一選択) <p> </p> 複数選択に設定する場合、ドロップダウン リスト ボックスはデフォルトで 1 つの項目のみ選択できます。 , set 3c8c25a5469918821b5883d58a298e30 でOKです。 <p> </p>size 属性: 表示されるオプションの数を定義します。 size="3"、つまり、ドロップダウン ボックスに 3 つのオプション オプションを表示できます。 <p> </p> <pre class="precsshui"><form name="MyForm" action="URL" method="post">　　<p>简单的选择列表</p>　　<select id="myselect" name="myselect" multiple="multiple" size="3"> <option value="Apples">Apples</option> <option value="Bananas">Bananas</option> <option value="Cherries">Cherries</option> <option value="oranges">oranges</option> </select></br>　　<input type="button" onclick="getSelectValue('myselect')" value="查看选项" /></form><br /><br /><script language="javascript"> //获取选中的下拉列表值 function getSelectValue(myselect){ var myform = document.forms["MyForm"]; var select = myform.elements[myselect]; //判断是单选还是多选 if(select.type == "selece-one"){ var oneChoice = select.selectedIndex;//获取选中项 alert("单选" + select.options[oneChoice].value);//获取选中项的值 } else{ var multiChoices = new Array(); //遍历整个下拉菜单 for(var i=0;i<select.options.length;i++) if(select.options[i].selected) multiChoices.push(select.options[i].value); alert("多选" + multiChoices); } }</script></pre> <p> </p>ヒント: <p> </p>異なるオペレーティング システムで複数のオプションを選択する場合の違い: <p class="sycode"> </p> Windows の場合: Ctrl ボタンを押しながら複数のオプションを選択します<p> </p> Mac の場合: コマンド ボタンを押しながら複数のオプションを選択します <p> </p>期限上記の違いと、複数の選択が可能であることをユーザーに通知する必要があるため、よりユーザーフレンドリーなアプローチはチェックボックスを使用することです。 <li> </li> <li> <h2><strong>§ <strong>フォーム送信メソッド</strong></strong></h2> <p>フォーム送信メソッドはmethod属性の値によって決まるため、フォーム送信メソッドは2つあります: </p> <p><strong>getメソッド: </strong></p> <p>フォームデータには、アクションによって指定された URL。後で、URL リンクとして渡されます (クエリ文字列の形式でサーバーに送信されます)。 </p> <p>変数送信のスタイルは次のとおりです: HTML 要素の name 属性 = 送信された値。複数の変数は、URL リンクの後に & 記号で区切られます。 </p> <p> </p> <p><strong>投稿方法: </strong></p> <p>フォームデータはリクエスト本文 (HTML ヘッダー) に添付されて送信され、URL リンクには追加されません。 </p> <p>提案: URL が破壊されないように、通常は投稿モードでフォームを送信することをお勧めします。また、URL には長さ制限があります。 </p> <p> </p> <p><strong> get と post の違い: </strong></p> <p>1)、get はサーバーからデータを取得すること、post はデータをサーバーに送信することです</p> <p>2)、データクエリ: たとえば、フォーラムを閲覧する場合ブログやブログの場合、URL には通常、分類、ページ数、ページごとのレコード数などの情報が含まれます。 get メソッドではクエリしたい情報が一目でわかりますが、post ではこの情報が隠されているため、クエリするのに不便です。 </p> <p>3) データ セキュリティ: レコードを変更または追加すると、URL に追加された get メソッドによってデータが漏洩します。post メソッドはデータを非表示にしてデータ セキュリティを確保します。 </p> <p>4) データ送信量: get はクエリに便利ですが、URL に添付されるため、送信するデータの量は少なく、post は大量のデータを送信することができ、通常は制限されません。デフォルト。 。 </p> <p> </p> リソースリンク <p> 推薦者: Fish Li ブロガー ---- <strong> フォームの詳細 </strong></p> <p></p> <p></p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </li>