Help - Search - Members - Calendar
Full Version: Form creation
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
jabob88
I'm creating a survey for someone and they have asked if the boxes could act as the selection but i am unsure how to achieve this so any help in this area would be greatly appreciated.

Regards
Jacob
Christian J
What kind of boxes? Checkboxes?
jabob88
QUOTE(Christian J @ Nov 16 2018, 03:48 PM) *

What kind of boxes? Checkboxes?


Like a generic button. so when it is selected it changes colour.
pandy
Boxes or buttons? And how do you mean? You click a box or button and it changes color. What more should happen?
jabob88
QUOTE(pandy @ Nov 16 2018, 06:10 PM) *

Boxes or buttons? And how do you mean? You click a box or button and it changes color. What more should happen?

I'd like it if i could have 5 boxes in a row that acted like a radio button style but in a form that when its submitted it will send the data via an email
pandy
Still confused. Do you want checkboxes (the square ones) to act as radio buttons (the round ones)?
jabob88
QUOTE(pandy @ Nov 16 2018, 08:01 PM) *

Still confused. Do you want checkboxes (the square ones) to act as radio buttons (the round ones)?


I'd like a likert scale like these but rather than radio buttons i'd like boxes with the text inside to act as the radio buttons. https://codepen.io/Buttonpresser/pen/qiuIx
Christian J
To elaborate, checkboxes and radio buttons have different function: https://www.nngroup.com/articles/checkboxes...-radio-buttons/

The appearance can be customized a little, but it's best not to confuse users about what is what. Making a checkbox look round (or a radio button look square) is not a good idea at all, even if it probably can be done one way or another.
Christian J
QUOTE(jabob88 @ Nov 17 2018, 09:42 AM) *

I'd like a likert scale like these but rather than radio buttons i'd like boxes with the text inside to act as the radio buttons. https://codepen.io/Buttonpresser/pen/qiuIx

You could make the actual radio button invisible with CSS. If you then wrap the text and radio button in a LABEL element, clicking the text activates the invisible radio button. I'll post an example in a few minutes.


Christian J
Here's a simple example. Keep in mind that users may not realize that the labels are clickable. Older browsers may not support it either.

CSS
CODE
input[type=radio] {opacity: 0;}
input[type=radio]:checked ~ span {color: red;}


HTML
CODE
<label><input type="radio" name="rating" value="1" checked><span>Foo</span></label>
<label><input type="radio" name="rating" value="2"><span>Bar</span></label>
<label><input type="radio" name="rating" value="3"><span>Baz</span></label>
jabob88
That i can work with. Thank you very much for your help.

Regards
Jacob
Christian J
You're welcome.
pandy
QUOTE(Christian J @ Nov 17 2018, 10:29 AM) *

Keep in mind that users may not realize that the labels are clickable. Older browsers may not support it either.


Yes. Not an entirely good idea. Instructive text is probably needed, like "choose one of the below". Basically, form controls shouldn't be too much messed with.
aresourcepool
Use real radio buttons followed by a label like this:
<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>

Using CSS to show radio buttons like a box:
.radios input[type=radio] {display:none}
.radios .radio {background-color: #c5e043;display: inline-block;width: 10px;height: 10px;cursor: pointer;}
.radios input[type=radio] {display: none;}
.radios input[type=radio]:checked + .radio {background-color: #241009;}


<div class="radios">
<input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
<label class="radio" for="r1"></label>

<input type="radio" name="rGroup" value="2" id="r2" />
<label class="radio" for="r2"></label>

<input type="radio" name="rGroup" value="3" id="r3" />
<label class="radio" for="r3"></label>
</div>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.