|
HTML - How Do I Align More Than 100 Radio Buttons Neatly In 3 Columns And 22 Rows
Hi experts,
I'm trying to create a form whereby I need to insert more than 100 radio buttons for user to select. When I tried out my code which is as follows:- <td>Locations</td> <td><input type="radio" id="txtlocation" value="Admiralty" name="txtlocation"/>Admiralty and the list go on until the 100 radio buttons. The outcome is horrendous to say the least. I hope the experts here can share with me how to neathly align all the radio buttons into 3 columns with 22 rows. OK. Hope to hear the experts' view soon. Thank you. Similar TutorialsHow can you make a border appear between rows in a table but not between the columns? Hence you won't notice that there's actally any columns in the table since it's not squared, only the rows are marked, but the columns still are there to prevent the cells from ending up at different horizontal positions at the different rows. So i haven't been able to figure this out and in need of some assistance.Here is the code.want to put them in rows of 2 & columns of 4 but instead it put them in a list.Im sure this is a simple fix.I only have it set up to list 5 products but can set it up for more.If you need the entire page of code just let me know. The webpage for the code http://www.allyugioh.com/products_list <!-- Item loop --> <notag rst:define:img="item1:/ImageUrl" rst:define:notavailable="0" /> <notag rst:ifnot="{img}" rst:define:img="img/noimage.gif" /> <notag rst:if="{item1:/QtyAvailable} le 0" rst:define:notavailable="1" /> <div rst:if="item1:/Title"> <hr/> <a href="#" rst:content="item1:/Title" rst:href:lid="{item1:@id}" rst:href:pagename="product">name</a><br /> <img border="0" height="100" rst:attr:id="thumb{item1:@id}" rst:attr:src="{img}" src="img/imgb.gif" width="100" /><br /> <div class="prod_details_tab"> <b><i rst:content="{item1:/Price@currency}{item1:/Price}">$1</i><br /></b> <a href="#" rst:href:lid="{item1:@id}" rst:href:verb="ATC" rst:href:pagename="cart" rst:ifnot="{notavailable}">add to cart</a> </div> <i rst:content="">$1</i><br /> <i rst:content="">$1</i><br /> <br /><br /> </div> </notag> <!-- Item loop end --> Hi. First time posting here, I hope this is a good place to get some quick help as I've hit a problem I can't figure out myself. I'm having problems with a site I'm working on: http://megansmetalworks.com/home.html My problem is this: the row I've created at the top of the page is far thicker in Firefox than in Safari (where it shows up exactly the height I wanted) In FireFox it is HUGE! how do I fix this? I must have made a mistake The code in question is as follows: <frameset rows="70, 20% framespacing="0" frameborder="0"> In safari it appears to show up correctly, 70 pixels tall. But in FireFox it is much larger and takes up the top half of the screen. Can anyone explain why this is? I need the navigation bar at the top to show up at the same height in all browsers. Thanks in advance. I have some nested tables (collapse/expand kinda table). How can I align the columns of each nested table, if all are expanded I want to see all the columns underneath symetrical. I have attached the screenshot of what I am getting with the following code: HTML Code: <head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.collapsed
{
display: none;
}
table#container
{
background-color:#FFFFFF;
border: solid #000 3px;
width: 400px;
}
table#container td
{
border: solid #000 1px;
}
table#sub
{
background-color:#FFFFFF;
border: solid #000 0px;
width: 400px;
}
table#sub td
{
border: solid #000 1px;
}
.toprow
{
font-style: italic;
text-align: center;
background-color: #FFFFCC;
}
.leftcol
{
font-weight: bold;
text-align: left;
width: 1%;
background-color: #CCCCCC;
}
</style>
<script language="javascript" type="text/javascript">
//***collapsible rows
function outliner(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var oMe;
if (evt.srcElement)
{
oMe = evt.srcElement;
}
else if (evt.target)
{
oMe = evt.target;
}
if (evt.srcElement)
{
//for IE
var child = document.all[oMe.getAttribute("child",false)];
}
else
{
//for Firefox
var child = document.all[oMe.getAttribute("child",false)];
}
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt)
{
evt = (evt) ? evt : (window.event) ? window.event : "";
var uMe;
if (evt.srcElement)
{
uMe = evt.srcElement;
}
else if (evt.target)
{
uMe = evt.target;
}
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "images/collapse.gif";
}
else
{
uMe.src = "images/expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table id="container" border="1">
<thead>
<tr class="toprow">
<td />
<td>Parameter</td>
<td>Value</td>
<td>DataType</td>
</tr>
</thead>
<tr>
<td class="leftcol"> </td>
<td>name</td>
<td>Mark</td>
<td>String</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s2" p21="p21" p22="p22" p22="p23"></a>
</td>
<td>composite</td>
<td>100,200,red</td>
<td>CompositeType</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s2">
<table id="sub">
<tr>
<td> </td>
<td>X</td>
<td>100</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>Y</td>
<td>200</td>
<td>Int32</td>
</tr>
<tr>
<td class="leftcol">
<a><img border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)"
src="images/expand.gif" width="9" child="s3"></a>
</td>
<td>color</td>
<td>134,122,234</td>
<td>Color</td>
</tr>
<tr>
<td colspan="4" bgcolor="cyan" class="collapsed" id="s3">
<table id="sub">
<tr>
<td> </td>
<td>R</td>
<td>134</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>G</td>
<td>122</td>
<td>Int32</td>
</tr>
<tr>
<td> </td>
<td>B</td>
<td>234</td>
<td>Int32</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Hi there, I have a question, in my photo gallery I have three columns: http://leilanimunter.com/photogallery.htm On a PC, the columns are aligned at the top in Firefox, but look all messed up in IE. On my Apple, it looks fine in Safari but they are not aligned properly in Firefox. I am just adding breaks at the bottom to move the other shorter columns up. Is there a code where I can vertically align these columns at the top so it will work on all browsers? Thanks for any help you can offer! Leilani Hi All, Am a bit of a newbie here. I'm having a little problem with a table that I created on Wordpress. After creating the table, the image below shows how it looks like on the Wordpress editor: But, once published, the row alignment is a bit off. Here's the url: http://runfest.my/?page_id=346 Appreciate some advice on what went wrong and how I can fix it. Thanks a bunch! I have a list of with radio buttons... allowing you to choose from 1-5. It's a HUGE list... so I want to pre select the second (#2) radio button for every question. I used the "checked" command but if I change it to a 1 and save and close, when I go back into it, it defaults back to #2. It is only doing this if I select #1... #3,4,5 stays... how do I fix this? <tr> <td>A-1</td> <td>Question #1</td> <td><input type="radio" name="A1_1" id="A1_1_1" value="1" mapname="A1_1" runat="Server"></td> <td><input type="radio" name="A1_1" id="A1_1_2" value="2" mapname="A1_1" runat="Server" checked></td> <td><input type="radio" name="A1_1" id="A1_1_3" value="3" mapname="A1_1" runat="Server"></td> <td><input type="radio" name="A1_1" id="A1_1_4" value="4" mapname="A1_1" runat="Server"></td> <td><input type="radio" name="A1_1" id="A1_1_5" value="5" mapname="A1_1" runat="Server"></td> </tr> Hello there! I'm new to this forum and a definite NEWBIE but am doing my best to learn. I am making a form in which I have several categories that are chosen by clicking on radio buttons. The problem is that I must have coded this incorrectly because you can ONLY click on ONE radio button, even thought there are 7 different subcategories. I'd like to be able to click on one radio button for each of the different subcategories. Any advice would be GREATLY appreciated!!! hello, i just start working on a site, and i have a question. i have 2 radio buttons and a normal button, and i want it to make when i check the first radio button and click on the button it will go to site1.html and if i check the second radio button, and then the normal button it needs to go to site2.html, how do i do that? this is what i have atm: Quote: <form name="form1" method="post" action=""> <p> </p> <FORM name ="form1" method ="post" action ="radioButton.php"> <p> <Input type = 'Radio' Name ='catogorie' value= 'school' > School </p> <p> <Input Name ='catogorie' type = 'Radio' value= 'own' > My Own </p> <P> <Input type = "Submit" Name = "Submit1" VALUE = "Volgende"> I have found these sample html codes but I think these are lacking. I am just a newbie but I know how to trace html codes. <FORM ACTION="../cgi-bin/mycgi.pl"> What size pizza?<P> <INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR> <INPUT TYPE=RADIO NAME="pizzasize" VALUE="M">medium<BR> <INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large<P> <INPUT TYPE=SUBMIT VALUE="submit"> </FORM> Thanks, Magiclouie Hi, I am trying to do this: Have 3 Radio Buttons (I think thats what they are called), Like this: 0 0 0 28K 56K Broadband Play (Button) And when you press any of the buttons the right stream is played via a url from another site I have. How to I go about doing this, ? I see aol has similiar feature for downloading files which I liked the look of, pass some time and help me out. i have my list of radio buttons and submit button but what i would like to do is have each one go to a different URL but im having trouble with that at the moment so if anyone could help it would be very appreciated. thankyou I'm new to the forum and have a question about radio buttons. I think I'm under the right category. I already know how to create the radio buttons and have done that on my site. Where my problem comes in is once a radio button is clicked on. I want to make a trivia page on my site with a multiple choice answers, which means only one answer is correct and the other four options would be wrong. If the correct answer is chosen, I want a page to pop-up or a new page which would let the person know they chose correctly. I also want to do the same for the wrong answers with a pop-up or new page letting the person know they chose wrong if they clicked on any other answer except the correct one. I don't even know if this can be done. I've looked on website help pages and it seems they all differ so I'm getting more confused with each search. Some say to use CSS others say JavaScript. Maybe another way would be better than radio buttons. I'm up for any suggestions. The link to my page for reference is http://wondersofdisney.webs.com/trivia.htm . The page is not visible on my website yet because it is still in construction. If you need any further explanations, please don't hesitate to ask me and I'll try to clear it up. Thanks for any help provided! Hi All, Using Dreamweaver CS4. I'm creating a form to file webpage for my work. It's just a simple html form that a user can fill out and once they hit submit, the information is saved to a file to be later converted to a spreadsheet or database or whatever. I have several required fields on this form. I was instructed to add a "." after the "Name" of whatever field I am requiring. They all work except my Radio buttons. Regardless if I make a selection (Yes or No) and hit submit, it still says that I need to fill out this field. Here is my code, I have tried several varieties of it, but none seem to work. I am completely new to Html coding so please bear with me. Thank you in advance! <input type="hidden" name="RequireApprovalYesNo." id="RequireApprovalYesNo." value=""> <input type="radio" name="RequireApprovalYesNo." id="RequireApprovalYesNo." value="Yes">Yes <input type="radio" name="RequireApprovalYesNo." id="RequireApprovalYesNo." value="No">No I have also tried (without the "." in the second and third piece of code): <input type="hidden" name="RequireApprovalYesNo." id="RequireApprovalYesNo." value=""> <input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo." value="Yes">Yes <input type="radio" name="RequireApprovalYesNo" id="RequireApprovalYesNo." value="No">No How to change this table Code: <SELECT id=SelectPeriod style="FONT-SIZE: 11px; WIDTH: 250px; FONT-FAMILY: Tahoma;background:#cccccc;" onfocus="SetVisibility(Find('TrPrice'), 0);" name=SelectPeriod>
<OPTION value="" selected dOption="">Избери</OPTION>
<OPTION value="1" dOption="100">Да</OPTION>
<OPTION value="2" dOption="4">Не</OPTION>
</SELECT>
to radio buttons Please put an old man out of his mysery I am developing a stand alone 'kiosk' application, it only needs to work in IE 6/7 Why does the page not follow the tabindex order for form radio buttons? It only ever seems to tab between 'checked' buttons - I can not tab to unchecked items. Take a look at http://www.thad.entadsl.com/feedback/feed.php to see what I mean. (ignore layout its a work in progress) Why? Hi there, The following code is called upon the user hitting a submit button and checks that: 1. two drop downs have a response 2. five different groups of radio button each have a response. I have two problems: 1. The first bit of code for the drop downs works, but then seems to ignore the validation code for the radio buttons. 2. The code for the radio buttons repeats five times and each time the only thing that changes is the name of the radio button group (Field23, Field29, etc) and the error message. I cannot seem to find a nice, efficient way of creating a loop that eliminates the clutter I would really appreciate any help with these two problems. Cheers, Adrian Code: <script type="text/javascript" language="JavaScript">
//Ensure that every question is answered, otherwise alert an error
function checkAnswers() {
var questions = ['Field35', 'Field33'];
var errorMessage = ['Please indicate the country where you live.', 'Please indicate your age.'];
var i = 0;
for (i = 0; i < questions.length; i++) {
var response = window.document.getElementById(questions[i]).value;
if (response == null || response == "") {
alert(errorMessage[i]);
return false;
}
}
// set var radio_choice to false
var radio_choice = false;
// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < form1.Field23.length; counter++) {
// If a radio button has been selected it will return true
// (If not it will return false)
if (form1.Field23[counter].checked) radio_choice = true;
}
if (!radio_choice) {
// If there were no selections made display an alert box
alert("Please select a gender.")
return (false);
}
// set var radio_choice to false
var radio_choice = false;
// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < form1.Field29.length; counter++) {
// If a radio button has been selected it will return true
// (If not it will return false)
if (form1.Field29[counter].checked) radio_choice = true;
}
if (!radio_choice) {
// If there were no selections made display an alert box
alert("Please indicate your level of education.")
return (false);
}
// set var radio_choice to false
var radio_choice = false;
// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < form1.Field27.length; counter++) {
// If a radio button has been selected it will return true
// (If not it will return false)
if (form1.Field27[counter].checked) radio_choice = true;
}
if (!radio_choice) {
// If there were no selections made display an alert box
alert("Please indicate your employment status.")
return (false);
}
// set var radio_choice to false
var radio_choice = false;
// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < form1.Field25.length; counter++) {
// If a radio button has been selected it will return true
// (If not it will return false)
if (form1.Field25[counter].checked) radio_choice = true;
}
if (!radio_choice) {
// If there were no selections made display an alert box
alert("Please indicate your marital status.")
return (false);
}
// set var radio_choice to false
var radio_choice = false;
// Loop from zero to the one minus the number of radio button selections
for (counter = 0; counter < form1.Field31.length; counter++) {
// If a radio button has been selected it will return true
// (If not it will return false)
if (form1.Field31[counter].checked) radio_choice = true;
}
if (!radio_choice) {
// If there were no selections made display an alert box
alert("Please indicate your income.")
return (false);
}
return (true);
}
</script>
Hey, I'm trying create a form that contains two radio buttons and a text box and a submit button. Depending on which radio button is selected, a search is done on the keyword. One of the buttons is for a google search and the other is for an internal site I am working with. The problem I am running into is that the 'method' attribute in my form has to equal both "get" and "post", depending on what I select. I've tried a few things using scripts but nothing successful. Any help would be great. Thanks I am developing a site and the client would like to have images instead of radio buttons, how can I do the followings: 1) Replace the radio buttons for different images 2) When one radio button image is selected, changes to another image Thanks, Valeria I'm developing an app that use IE6 and have come across what appears to be a bug but I couldn't find any references to it on the web. I can't make IE6 ignore tabs on radio buttons. The following code snippet will demonstrate the problem. According to the HTML, you should be able to tab from Button 3, to Button 1, then back to the window (address bar). The radio buttons should behave like Button 2 and ignore the tabs, but they don't. I haven't had the opportunity to try this on other browsers yet. But for this project, it has to work on IE6. Any ideas? And a followup question as well. Is there a way to ONLY have tabs in the content window, and to NOT tab to the address bar? -------------------------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> My Document </title> </head> <body> <form> <input type="button" name="button1" value="Button One" tabindex=2> <br/> <input type="button" name="button2" value="Button Two" tabindex=-1> <br/> <input type="radio" name="buttonG" value="Button Four" tabindex=-1> <br/> <input type="radio" name="buttonG" value="Button Five" tabindex=-1 CHECKED> <br/> <input type="button" name="button3" value="Button Three" tabindex=1> <br/> </form> </body> </html> |
|||||||