同じ名前とIDを持つ入力を持つ2つの別々のフォーム

Question

同じIDと名前を持つ2つのチェックボックスを指すfor属性を持つ2つのラベルを持つ同じページに2つのフォームがあります。

2番目のフォームラベルの1つをクリックすると、最初のフォームチェックボックスがチェックされます。

この場合、問題はあなたが「X名2」のラベルをクリックすると、それは「Xの名前は」彼らは異なる形であるにもかかわらず、ボックスをチェックチェックあり：

.customCheckbox div label { 
 
    padding: 5px; 
 
    background-color: white; 
 
    border: 2px solid #aaaaaa; 
 
    background-image: none; 
 
} 
 

 
.customCheckbox div input { 
 
    margin: 8px auto; 
 
    padding: 5px; 
 
    text-align: left; 
 
    margin-left: -999999px; 
 
    float: left; 
 
} 
 

 
.customCheckbox input[type=checkbox]:checked ~ label, 
 
.customCheckbox input[type=radio]:checked ~ label { 
 

 
    background-color: #117399; 
 
    color: #eeeeee; 
 
} 
 

 
.customCheckbox input[type=radio]:checked ~ label { 
 

 
    background-color: #117399; 
 
    color: #eeeeee; 
 
}

<form style="margin:30px;"> 
 
    <div class="customCheckbox"> 
 
    <div> 
 
     <input id="x" name="x" type="checkbox"/><label for="x">x name</label>  
 
    </div> 
 
    <br/> 
 
    <div> 
 
     <input id="y" name="y" type="checkbox"/> <label for="y">y name</label> 
 
    </div> 
 
    </div> 
 
</form> 
 
<form style="margin:30px;"> 
 
    <div class="customCheckbox"> 
 
    <div> 
 
     <input id="x" name="x" type="checkbox"/><label for="x">x name 2</label>  
 
    </div> 
 
    <br/> 
 
    <div> 
 
     <input id="y" name="y" type="checkbox"/> <label for="y">y name 2</label> 
 
    </div> 
 
    </div> 
 
</form>

• 私は
• 私は（可能であれば）
、JavaScriptから離れて滞在してみたいのですが（かなりの数の場所があるので、これは発生する）要素の名前を変更から離れて滞在したいのですが
• （あなたがCSSで親要素のスタイルを設定することができないので）私はラベルの内側にネストするチェックボックスをすることはできませんラベルやチェックボックスをスタイリングのためのCSSを使用しておりますので

Answer 1

同じidプロパティを使用することが有効ではありません同じページで2回要素が同じ形式または異なる形式の場合は、にすべての要素はありません。

これらは絶対に同じものを持つことができます。名前プロパティです。名前はサーバーに送信される名前です。あなたは同じ名前で同じフォームに50の要素を持たせることができます。

しかし、IDの目的はすべて、ページ上で一意でなければならないということです。

だから、単に最初の1 ... id="x1" name="x" ...と第二... id="x2" name="x" ...を行い、その後、あなたのラベルが異なる入力フィールドがある限り、彼らは異なるにしていると、同じ名前を持つまったく問題はありませんfor="x1"またはfor="x2"

Answer 2

を指して作りますそれらは同じパラメータを表す（例えば、ラジオボタンの場合）。

ただし、NEVERは異なるHTML要素に同じIDを使用する必要があります。 HTML5 specsから

：

id属性は、その要素の一意の識別子（ID）を指定します。

idsを一意にすると、ラベルは正常に動作します。