labels next to radio group with same name not work on second form-CodePudding

I have the following multiple radio group with same name

the label next to radio buttons work good with first form1 but in the second from2 the labels works on the radio buttons on the first form1 as this link https://jsfiddle.net/2dp63kw0/

<style>
.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked   label {
  background-color: #114ABB;
}

</style>

<form id="form1">
<div style="padding:20px;display:inline" >
    <input type="radio" name="direction" id="direction0" value="left" />
    <label  for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label  for="direction1">right</label>
</div>
</form>
    <hr>
<form id="form2">   

<div style="padding:20px;display:inline" >
    <input type="radio" name="direction" id="direction0"  value="left" />
    <label  for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label  for="direction1">right</label>
</div>
</form>

every labels next to radio buttons work on form which it belongs to

CodePudding user response：

Change the "name" and "for" attributes in the second form with id=form2.

Also, use class instead of id if you want to apply same properties, as id is unique and used for a single element.

Try this:

.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked   label {
  background-color: #114ABB;
}

<form id="form1">
<div style="padding:20px;display:inline" >
    <input type="radio" name="direction" id="direction0" value="left" />
    <label  for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label  for="direction1">right</label>
</div>
</form>
    <hr>
<form id="form2">   

<div style="padding:20px;display:inline" >
    <input type="radio" name="directionb" id="direction2"  value="left" />
    <label  for="direction2">left</label>
    <input type="radio" name="directionb" id="direction3"  value="top" />
    <label  for="direction3">right</label>
</div>
</form>

CodePudding user response：

.custom-radio label {
    color:#FFF;
    border-radius:20px;
  display: inline-block;
  width: 60px;
  padding: 5px;
  font-size:10pt;
  font-family:arial;
  background-color: #6D778A;
  transition: all 0.3s;
}

.custom-radio input[type="radio"] {
  display: inline-block;
}

.custom-radio input[type="radio"]:checked   label {
  background-color: #114ABB;
}

<form id="form1">
<div style="padding:20px;display:inline" >
    <input type="radio" name="direction" id="direction0" value="left" />
    <label  for="direction0">left</label>
    <input type="radio" name="direction" id="direction1"  value="top" />
    <label  for="direction1">right</label>
</div>
</form>
    <hr>
<form id="form2">   

<div style="padding:20px;display:inline" >
    <input type="radio" name="direction" id="direction3"  value="left" />
    <label  for="direction3">left</label>
    <input type="radio" name="direction" id="direction4"  value="top" />
    <label  for="direction4">right</label>
</div>
</form>

CodePudding user response：

The id values you have used for the input tags are not unique so the first element with the id value is used.

From MDN:

The id global attribute defines an identifier (ID) which must be unique in the whole document.

Change the id values for the input tags in your second form.