Forum

Thread tagged as: Question, Suggestions, Forms

Perch form radio with label

Hello, i have following html code, is possible make perch form with this structure?

<div class="radio__labels">
  <input type="radio" id="3_image" name="bg_image" value="3" />
      <label for="3_image">
           <img src="/img/bg_image_3.jpg">
           <div class="radio"></div>
       </label>
 </div>
 <div class="radio__labels">
    <input type="radio" id="4_image" name="bg_image" value="4" />
    <label for="4_image">
         <img src="/img/bg_image_4.jpg">
         <div class="radio"></div>
     </label>
  </div>
  <div class="radio__labels">
     <input type="radio" id="5_image" name="bg_image" value="5" />
     <label for="5_image">
        <img src="/img/bg_image_5.jpg">
        <div class="radio"></div>
     </label>
  </div>
  <div class="radio__labels">
      <input type="radio" id="6_image" name="bg_image" value="6" />
      <label for="6_image">
           <img src="/img/bg_image_6.jpg">
           <div class="radio"></div>
       </label>
 </div>

if i try

 <perch:input id="bg_image" type="radio" options="1,2,3,4,5,6" wrap="div.radio__labels" />

frontend

<div class="radio__labels"><input id="form1_bg_image1" name="bg_image" type="radio" value="1"><label for="form1_bg_image1">1</label></div>

if i use perch:label , label is duplicated in frontend
Pavol Krchnavy

Pavol Krchnavy 0 points

  • 5 years ago
Simon Clay

Simon Clay 127 points

5 years ago

Hi Pavol,

I can see your issue. I think the best way to deal with it would be to add the images in via CSS, something like this:

div.radio__labels {
    font-size: 0; 
    width: 100px;
    height: 100px;
}
div.radio__labels:nth-child(1) label {
    background-image: url(/img/bg_image_1.jpg);
}
div.radio__labels:nth-child(2) label {
    background-image: url(/img/bg_image_2.jpg);
}
div.radio__labels:nth-child(3) label {
    background-image: url(/img/bg_image_3.jpg);
}
div.radio__labels:nth-child(4) label {
    background-image: url(/img/bg_image_4.jpg);
}
div.radio__labels:nth-child(5) label {
    background-image: url(/img/bg_image_5.jpg);
}
div.radio__labels:nth-child(6) label {
    background-image: url(/img/bg_image_6.jpg);
}