入力要素がマルチプルdivにある場合、フォームの送信でクエリパラメータが生成されない

Question

フォーム要素を以下のように指定すると、フォームのサブミットを呼び出すと、URLエンコードされたフォームのリクエストボディ/ = {username} & password = {password} & submit = submit "{}内の値は、対応する入力要素のテキストボックスから取得されます。

<form action="/action.php" method="POST"> 
    <input id="username" type="text" /> 
<input id="password" type="password" /> 
<input type="submit" id="submit" value="submit" /> 
</form> 

しかし、私はのdivの複数のレベルで私の入力要素を配置するつもりならば、フォーム送信はリクエストボディ/クエリパラメータを生成するために失敗します。

<form action="/action.php" method="POST"> 
    <div id="inside_formdiv"> 
     <div id="userdiv"> 
     <input id="username" type="text" /> 
     </div> 
     <div id="passworddiv"> 
     <input id="password" type="password" /> 
     </div> 
     <div id="submit_div"> 
     <input type="submit" id="submit" value="submit" /> 
     </div> 
    </div> 
</form> 

誰も私にそのような理由を教えてもらえますか？この仕様では、入力要素がForm要素の直接の子要素である必要はありません。私はこの動作の正当な理由が不思議でした。

値が要素に移入され、私が最初に気づくのは、あなたの入力が「name」属性が欠落していることである

<script type="text/javascript"> 
    function logincheck() { 
    alert ('hi ' + document.getElementById('username').value); 
    alert ('hi ' + document.getElementById('password').value); 
    } 
</script> 


<form action="/action.php" method="POST"> 
    <div id="inside_formdiv"> 
     <div id="userdiv"> 
     <input id="username" type="text" /> 
     </div> 
     <div id="passworddiv"> 
     <input id="password" type="password" /> 
     </div> 
     <div id="submit_div"> 
     <input type="submit" onclick="logincheck()" /> 
     </div> 
    </div> 
</form> 

Answer 1

下記のように変更を編集する場合、あなたはまた、値を確認することができます。 afaikというHTML仕様では必須ではありませんが、これがリクエストとともに送信されない理由です

<form action="/action.php" method="POST"> 
     <div id="inside_formdiv"> 
     <div id="userdiv"> 
      <input id="username" name="username" type="text" /> 
     </div> 
     <div id="passworddiv"> 
      <input id="password" name="password" type="password" /> 
     </div> 
     <div id="submit_div"> 
      <input type="submit" onclick="logincheck()" /> 
     </div> 
     </div> 
    </form> 

これは、入力要素は、フォーム要素内で直接である必要はありませんトリック

Answer 2

を行う必要があります！ へ -

<input type="text" id="username" name="username" /> 

ノート前の例の名前=「ユーザ名」：彼らは内部方法次のように、テキストフィールド内のIDと一緒に名前を使用しようとしているについて...などのテーブルをdivをすることができすべての入力要素。

Answer 3

Aは、より詳細な情報をビット：

私はあなたがこのの残りのためのPHPを使用している、あなたが他のサーバー側の言語を置き換えることができ想定しています。

入力にname属性がありません。あなたが実際に何かのためにid属性を使用している場合を除き、あなたはそれらを取り除くことができます。フォームデータは、name属性（例えば、PHP $_GET、$_POST、および$_REQUESTの配列）によってリストされます。これらの配列には、入力の名前が入力されます。名前はなく、データは無視されます。

名前の一致後にブラケットのペアを使用して入力配列を作成することもできます。
例：

<input name="answers[]" type="text" id="answer1" /> 
<input name="answers[]" type="text" id="answer2" /> 

これが配列である1 GET/POSTのエントリを作成します。配列内に2つの要素を持つキーanswersがあります。

チェックボックスの場合、チェックされている場合にのみGET/POSTに値が表示されます。あなたがチェックされていなければ結果は得られません。知ることは重要です。たとえば、誰かが何か「オフ」に変わった場合、比較する元の入力のリストを知る必要があります。