MachForm Community Forums Topic: image above or right next to either a checkbox or a radio button

MachForm Community Forums Topic: image above or right next to either a checkbox or a radio button https://www.machform.com/forums/ MachForm Community Forums Topic: image above or right next to either a checkbox or a radio button en Tue, 05 May 2026 07:34:58 +0000 yuniar on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8048 Thu, 26 Nov 2009 14:24:11 +0000 yuniar 8048@https://www.machform.com/forums/ <p>Yes, you can insert BOTH text and image for each checkbox. Simply put both text and your HTML image tag into your checkbox label.</p> <p>Example:</p> <pre><code>This is my image <img src="http://www.yourdomain.com/image.gif" /></code></pre> <p>That would display the text "This is my image" and the image along the text. </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8041 Thu, 26 Nov 2009 03:24:13 +0000 arabedioux 8041@https://www.machform.com/forums/ <p>I would like to have BOTH text and image for each checkbox. Also would you be so kind to give me an example beacuse I'm having a hard time understanding how to do this.</p> <p>Thank you and I really appreciate the help. </p> yuniar on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8031 Tue, 24 Nov 2009 16:50:39 +0000 yuniar 8031@https://www.machform.com/forums/ <p>To add different image to each of the checkboxes/radio button, there is no special code/css edit needed.</p> <p>Simply paste the HTML tag for your image into EACH of your checkbox labels. That would display the image instead of the text labels.</p> <p>Then, apply the CSS modification as pointed by redityo above, to adjust the alignment. </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8030 Tue, 24 Nov 2009 14:13:04 +0000 arabedioux 8030@https://www.machform.com/forums/ <p>No, I want to add a different image to EACH of the checkbox/radio buttons.</p> <p>What I basically need is a sample css edit that has images right next to, or above the checkboxes/radio buttons.</p> <p>Thanks. </p> yuniar on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8029 Tue, 24 Nov 2009 09:24:23 +0000 yuniar 8029@https://www.machform.com/forums/ <p>Have you tried the above solution posted by redityo? It does exactly like what you asked. </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8025 Tue, 24 Nov 2009 03:28:10 +0000 arabedioux 8025@https://www.machform.com/forums/ <p>bump </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8006 Fri, 20 Nov 2009 13:24:48 +0000 arabedioux 8006@https://www.machform.com/forums/ <p>i would like to have a individual pictures right next, or above each radio button/checkbox.</p> <p>like this: <a href="http://yehuda.com/listproducts-loosediamonds.asp?type=loose&selectedshape=RB&searchtype=simple&showstatus=2" rel="nofollow">http://yehuda.com/listproducts-loosediamonds.asp?type=loose&selectedshape=RB&searchtype=simple&showstatus=2</a> </p> redityo on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-8004 Fri, 20 Nov 2009 10:54:32 +0000 redityo 8004@https://www.machform.com/forums/ <p>Sorry for the delay, the code seems fine when I save it to HTHL.<br /> Actually I'm still confuse, what do you want to achieve ? I see you're using a table to line up your "check box" in column, do you want to have a check box with table and some check box not ? also please send me your form URL so I can see it clearly. </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-7999 Fri, 20 Nov 2009 01:14:37 +0000 arabedioux 7999@https://www.machform.com/forums/ <p>bump </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-7983 Mon, 16 Nov 2009 22:41:36 +0000 arabedioux 7983@https://www.machform.com/forums/ <p>I would like to make it work with BOTH check and radio boxes please. Thanks!</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Form Copy</title> <link rel="stylesheet" type="text/css" href="./data/form_4/css/view.css" media="all" /> <script type="text/javascript" src="js/view.js"></script> </head> <body id="main_body" > <img id="top" src="images/top.png" alt="" /> <div id="form_container"> <h1><a>Untitled Form Copy</a></h1> <form id="form_4" class="appnitro" method="post" action="#main_body"> <div class="form_description"> <h2>Untitled Form Copy</h2> <p>This is your form description. Click here to edit.</p> </div> <ul > <li id="li_8" > <label class="description">Checkboxes </label> <span> <table width="800px" border="0" cellpadding="0"><tr><td width="23%"><input id="element_8_1" name="element_8_1" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_1"> First option</label></td><td width="23%"><input id="element_8_2" name="element_8_2" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_2"> Second option</label></td><td width="23%"><input id="element_8_3" name="element_8_3" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_3"> Third option</label></td><td width="23%"><input id="element_8_4" name="element_8_4" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_4"> Fourth option</label></td></tr><tr><td width="23%"><input id="element_8_5" name="element_8_5" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_5"> Fifth option</label></td><td width="23%"><input id="element_8_6" name="element_8_6" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_6"> Sixth option</label></td><td width="23%"><input id="element_8_7" name="element_8_7" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_7"> Seventh option</label></td></table> </span> </li> <li id="li_9" > <label class="description">Multiple Choice </label> <span> <table width="800px" border="0"><tr><td width="23%"><input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" /> <label class="choice" for="element_9_1"> First option</label></td><td width="23%"><input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" /> <label class="choice" for="element_9_2"> Second option</label></td><td width="23%"><input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" /> <label class="choice" for="element_9_3"> Third option</label></td><td width="23%"><input id="element_9_4" name="element_9" class="element radio" type="radio" value="4" /> <label class="choice" for="element_9_4"> Fourth</label></td></tr><tr><td width="23%"><input id="element_9_5" name="element_9" class="element radio" type="radio" value="5" /> <label class="choice" for="element_9_5"> Fifth option</label></td><td width="23%"><input id="element_9_6" name="element_9" class="element radio" type="radio" value="6" /> <label class="choice" for="element_9_6"> Sixth option</label></td><td width="23%"><input id="element_9_7" name="element_9" class="element radio" type="radio" value="7" /> <label class="choice" for="element_9_7"> Seventh option</label></td><td width="23%"><input id="element_9_8" name="element_9" class="element radio" type="radio" value="8" /> <label class="choice" for="element_9_8"> Eigth option</label></td></tr><tr><td width="23%"><input id="element_9_9" name="element_9" class="element radio" type="radio" value="9" /> <label class="choice" for="element_9_9"> Ninth option</label></td></table> </span> </li> <li id="li_buttons" class="buttons"> <input type="hidden" name="form_id" value="4" /> <input type="hidden" name="submit" value="1" /> <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> </li> </ul> </form> </div> <img id="bottom" src="images/bottom.png" alt="" /> </body> </html></code></pre> redityo on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-7980 Mon, 16 Nov 2009 15:02:19 +0000 redityo 7980@https://www.machform.com/forums/ <p>Sorry If I've missed on something here, basically you can use the element id to your CSS to apply the style on specific element. For example like this :</p> <pre><code>#li_1 label.choice { display:inline; position:relative; margin-left: 0.2em; _top:0.2em; } #li_1 input.radio { display: inline; margin-left: 0.5em; }</code></pre> <p>Those code will effect on choice field in element 1 only. However is it possible to put your form url/code in here ? so I can know what exactly your problem is </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-7974 Sat, 14 Nov 2009 21:28:50 +0000 arabedioux 7974@https://www.machform.com/forums/ <p>I have edited the view-functions.php to have multiple columns of radio buttons/checkboxes. Ialso did having several different fields in the same line by adding line the CSS file.</p> <p>But what I'm confused about is since because the group of check boxes. How can I asign one for each element?</p> <p>Can you be kind enough to provide a working example/code?</p> <p>thank you. </p> redityo on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-7967 Sat, 14 Nov 2009 10:40:19 +0000 redityo 7967@https://www.machform.com/forums/ <p>Hi,</p> <p>It would easier to have the image on the right of checkbox/radio button. To get an image in those field, simply add "img" tag to the options, for example :</p> <pre><code><img src="images/yourimage.jpg" /></code></pre> <p>then follow the method that posted in here to get those options line up to the right</p> <p><a href="http://www.appnitro.com/forums/topic/radio-buttons-on-same-line?replies=19" rel="nofollow">http://www.appnitro.com/forums/topic/radio-buttons-on-same-line?replies=19</a> </p> arabedioux on "image above or right next to either a checkbox or a radio button" https://www.machform.com/forums/topic/image-above-or-right-next-to-either-a-checkbox-or-a-radio-button#post-7962 Fri, 13 Nov 2009 23:00:51 +0000 arabedioux 7962@https://www.machform.com/forums/ <p>almost like this:<br /> <a href="http://yehuda.com/listproducts-loosediamonds.asp?type=loose&selectedshape=RB&searchtype=simple&showstatus=2" rel="nofollow">http://yehuda.com/listproducts-loosediamonds.asp?type=loose&selectedshape=RB&searchtype=simple&showstatus=2</a></p> <p>Thanks </p>