Question

Select Radio Button by Clicking Label

Forms Version 10

Updated May 4, 2021

asked on May 3, 2021

Afternoon All, hoping someone out there can help me with some html. I have a form that has 5 options. Instead of text labels, I am using pictures. What I want to do is essentially hide the actual radio button circle and have people click on the picture to select that option.

I've attached my html and currently, if they select the picture nothing happens, they still have to click on the actual radio button. How can I connect the label with the radio button?

<p align="center">

<div id="container">
<div>


<label> <input name="Category" type="radio" value="Trust">
 <img src="http://svr/Forms//img/Theme/Awardco/Trust1.png">
</label>


<label><input name="Category" id="Commitment" type="radio" value="Commitment">
<imgsrc="http://svr/Forms//img/Theme/Awardco/Commitment1.png">
</label>

<label><input name="Category" id="Value" type="radio" value="Value"> <img src="http://svr/Forms//img/Theme/Awardco/Value1.png">
</label>

<label><input name="Category" id="Innovation" type="radio" value="Innovation">
<img src="http://svr/Forms//img/Theme/Awardco/Innovation1.png">
</label>


<label><input name="Category" id="Excellence" type="radio" value="Excellence">
  <img src="http://svr/Forms//img/Theme/Awardco/Excellence1.png">
</label>

</div></div>

0 0

Answer

SELECTED ANSWER

replied on May 4, 2021

You can use HTML elements in the labels of the Radio Button field type. Just make sure they're in a place that users have access (this example just stashes them in the standard Forms img folder)

2 0

Replies

replied on May 3, 2021

To make it clickable you need to set the "for" attribute on the label, and the value should correspond to the unique id attribute of the target input.

For example,

<label for="Trust"> 
    <input name="Category" type="radio" id="Trust" value="Trust">
    <img src="http://svr/Forms//img/Theme/Awardco/Trust1.png">
</label>

It may not have the pointer cursor by default, so you could also add the following css

label[for] {
  cursor: pointer;
}

However, if you're using this in Forms, please note that custom HTML is not saved upon submission because Forms is only aware of the variables configured in the designer.

If you use custom inputs inside a custom HTML element, you'll need to use JavaScript to transfer the values/selections to a form field, and vice versa if you load the page in a user task or save a copy.

1 0

You are not allowed to follow up in this post.

Question

Question

Select Radio Button by Clicking Label

Answer

Replies

Sign in to reply to this post.