This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have to have 3 questions. One with radio button options, one with checkboxes and one with a textarea. The problem I am having is the questions all have to be on the same line with the choices below each of those questions. I used a table to get the questions on the same line but the problem I am having is I can't get the choices (radio button, checkboxes, and text area) under each appropriate question.
This is what I am receiving:
Your question here: choice 1 choice 2. ques. here: c1, c2, c3, c4
I need this:
Your question here:
Choice 1
Choice 2
With the other 2 questions right beside that question in that format.
This is the html coding I'm using below:
<table>
<tr>
<td align="left"> Your question here:</td>
<td><input name="choice" type="radio" value="1" />Choice 1 </td>
<br />
<td><input name="choice" type="radio" value="2" checked="checked" />Choice 2</td>
<td align="center"> Your question here:</td>
<br>
<td><input name="choice" type="checkbox" value="choice1" />Choice 1</td>
<br>
<td><input name="choice" type="checkbox" value="choice2" />Choice 2</td>
<br>
<td><input name="choice" type="checkbox" value="choice3" />Choice 3</td>
<br>
<td><input name="choice" type="checkbox" value="choice4" checked="checked">Choice 4</td>
<td align="right"> Your question here:</td>
<td><br /><textarea name="other" rows="5" cols="35"></textarea></td>
</tr>
</table>
I tried using for each of the choices but it displayed both the questions and answers directly underneath one another and that's not what I need. It is driving me crazy because I know it is something simple. Does anybody know how to fix this?
I agree with Nader's answer, but to answer your question, the reason the Choice appear next to the Questions appear next to each other as opposed to below the Question is because you are placing them in different cells (using ) within the SAME row (This makes a new column). If you were to make a second row and have 1 cell for all the choices, it would look something more like what you want.
<table>
<tr>
<td align="left" style="width:200px;"> Your question here:</td>
<td align="center" style="width:200px;"> Your question here:</td>
<td align="right" style="width:200px;"> Your question here:</td>
</tr>
<tr>
<td align="left">
<input name="choice" type="radio" value="1" />Choice 1 <br />
<input name="choice" type="radio" value="2" checked="checked" />Choice 2</td>
<td align="center">
<input name="choice" type="checkbox" value="choice1" />Choice 1 <br />
<input name="choice" type="checkbox" value="choice2" />Choice 2 <br/>
<input name="choice" type="checkbox" value="choice3" />Choice 3 <br />
<input name="choice" type="checkbox" value="choice4" checked="checked" />Choice 4
</td>
<td><br /><textarea name="other" rows="5" cols="30"></textarea></td>
</tr>
</table>
I added a little bit of styling to make it look a little more spaced out. It would be useful to draw the borders of the tables to see how things are spaced out.
Well, I would definitely advise that you use divs instead of tables (Personally, I am not convinced that tables are the appropriate solution), with that being said, have three divs, all floating left, with width 33% each and post the questions and the answers in them.
e.g.
<div>
Question 1<br/>
Choice 1
Choice 2
Choice 3
</div>
<div>
Question 2<br/>
Choice 1
Choice 2
Choice 3
</div>
<div>
Question 3<br/>
Choice 1
Choice 2
Choice 3
</div>
<style>
div{
width:33%;
float:left;
}
</style>
well with your tables as a solution I think you need this...
<table>
<tr>
<td > Your question here:</td>
<br />
<td > Your question here:</td>
<br />
<td > Your question here:</td>
</tr>
<tr>
<td>
<input name="choice" type="radio" value="1" />Choice 1
<br />
<input name="choice" type="radio" value="2" checked="checked" />Choice 2
</td>
<td>
<input name="choice" type="checkbox" value="choice1" />Choice 1
<br />
<input name="choice" type="checkbox" value="choice2" />Choice 2
<br />
<input name="choice" type="checkbox" value="choice3" />Choice 3
<br />
<input name="choice" type="checkbox" value="choice4" checked="checked" />Choice 4
</td>
<td>
<textarea name="other" rows="5" cols="25"></textarea>
</td>
</tr>
</table>
Related
I keep getting one error when trying to validate my HTML, I will post my code and a clip of the error below. Line 67 in the screen capture of the error is the line above the first radio button.
<!-- donate page -->
<section class = "blog container">
<div class = "title">
<h2>Donate</h2>
<div>
<h2>Donate</h2>
</div>
</div>
<h2 class="donate">Give to the American Foundation for Suicide Prevention</h2>
<p class = "text">Established in 1987, the American Foundation for Suicide Prevention (AFSP) is a voluntary health organization that gives those affected by suicide a nationwide community empowered by research, education and advocacy to take action against this leading cause of death.</p>
<h2 class="donate">Why Give to AFSP?</h2>
<p class = "text">Led by CEO Robert Gebbia and headquartered in New York, and with a public policy office in Washington, D.C., AFSP has local chapters in all 50 states with programs and events nationwide. AFSP celebrates 30 years of service to the suicide prevention movement. Learn more about AFSP in its latest Annual Report, and join the conversation on suicide prevention by following AFSP on Facebook, Twitter, Instagram, and YouTube.</p>
<form id="donationInfo">
<table class="center">
<tr>
<td><label for="title">Title:</label>
Mr.<input type="radio" name="title" tabindex="-1">
Mrs.<input type="radio" name="title">
Ms.<input type="radio" name="title">
Dr.<input type="radio" name="title">
</td>
<td><label for="fname">First Name:</label><input type="text" id="fname" tabindex="2" size="20" maxlength="20"></td>
<td><label for="lname">Last Name:</label><input type="text" id="lname" tabindex="3" size="25" maxlength="20"></td>
</tr>
<tr>
<td><label for="email">Email Address:</label><input type="email" id="email" tabindex="4" size="25"></td>
<td><label for="date">Date:</label><input type="date" id="date" tabindex="5" size="25"></td>
<td></td>
</tr>
<tr>
<td>
<label for="phonetype">Phone Type:</label>
<select id="phonetype">
<option value="C">Cell</option>
<option value="H">Home</option>
<option value="W">Work</option>
<option value="O">Other</option>
</select>
</td>
<td><label for="telephone">Phone Number:</label><input type="tel" id="telephone" tabindex="7" size="25"></td>
<td></td>
</tr>
<tr>
<td><label for="amount">Donation Amount:</label><input type="number" id="amount" tabindex="8"></td>
<td></td>
<td></td>
</tr>
<tr>
<td><label for="ccNumber">Credit Card Number:</label><input type="text" id="ccNumber" tabindex="9" size="19"></td>
<td><label for="security">Security Code:</label><input type="text" id="security" tabindex="10" size="4"></td>
<td><label for="expiration">Expiration:</label><input type="text" id="expiration" tabindex="11" size="5"></td>
</tr>
<tr>
<td>Agree to Terms:</td>
<td>Yes <input type="checkbox" name="check" value="Yes" tabindex="12" onclick="onlyOne(this)">
No <input type="checkbox" name="check" value="No" tabindex="13" onclick="onlyOne(this)">
</td>
<td></td>
</tr>
</table>
<br/>
</form>
</section>
<!-- end of donate page -->
Thanks in advance for any and all help! It is very much appreciated.
See for example MDN:
To associate the with an element, you need to give the an id attribute. The then needs a for attribute whose value is the same as the input's id.
Your label has a for attribute with value title but there is no input element with an id of title.
Maybe you are thinking of putting a label on each of the following inputs which have type=radio? Each would need to have its own id in that case.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I was wondering if the HTML table element is still up to date for positioning several checkbox input fields in an orderly manner, or if there are more up to date options available, for example with css or other html elements?
Here my example:
<table>
<tr>
<td><label for="grade1">Grade 1</label></td>
<td><input type="checkbox" name="grade1" id="grade1" checked></td>
</tr>
<tr>
<td><label for="grade2">Grade 2</label></td>
<td><input type="checkbox" name="grade2" id="grade2"></td>
</tr>
<tr>
<td><label for="grade3">Grade 3</label></td>
<td><input type="checkbox" name="grade3" id="grade3"></td>
</tr>
<tr>
<td><label for="grade4">Grade 4</label></td>
<td><input type="checkbox" name="grade4" id="grade4"></td>
</tr>
<tr>
<td><label for="grade5">Grade 5</label></td>
<td><input type="checkbox" name="grade5" id="grade5"></td>
</tr>
<tr>
<td><label for="grade6">Grade 6</label></td>
<td><input type="checkbox" name="grade6" id="grade6"></td>
</tr>
<tr>
<td><label for="grade8">High school</label></td>
<td><input type="checkbox" name="grade8" id="grade8"></td>
</tr>
</table>
One option is to use css grid to achieve a similar layout.
.grid {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 5px;
}
<div class="grid">
<label for="grade1">Grade 1</label>
<input type="checkbox" name="grade1" id="grade1" checked>
<label for="grade2">Grade 2</label>
<input type="checkbox" name="grade2" id="grade2">
<label for="grade3">Grade 3</label>
<input type="checkbox" name="grade3" id="grade3">
<label for="grade4">Grade 4</label>
<input type="checkbox" name="grade4" id="grade4">
<label for="grade5">Grade 5</label>
<input type="checkbox" name="grade5" id="grade5">
<label for="grade6">Grade 6</label>
<input type="checkbox" name="grade6" id="grade6">
<label for="grade8">High school</label>
<input type="checkbox" name="grade8" id="grade8">
</div>
The radio buttons are looking weird, and I don't know why. This is what it looks like:
I want that third one in line but I don't know how.
This is the code for all three buttons. I tried using <pr> tags but this didn't work.
<td><input type="radio"
id="examtype"
name="examtype"
value="GCSE" /> : GCSE<br />
<pr></pr>
<td><input type="radio"
id="examtype"
name="examtype"
value="A2" /> : A2<br />
<pr></pr>
<td><input type="radio"
id="examtype"
name="examtype"
value="AS"/> : AS<br />
<pr></pr>
</tr>
I don't think that pr is a tag... I'm guessing you meant to type tr, or br, or maybe even pre (but that doesn't make sense). Regardless, using the correct table structure, the elements can be neatly positioned inline without any weird jumps like in your picture:
<table>
<tr>
<td>
<input type="radio" id="examtype" name="examtype" value="GCSE" />: GCSE
</td>
<td>
<input type="radio" id="examtype" name="examtype" value="A2" />: A2
</td>
<td>
<input type="radio" id="examtype" name="examtype" value="AS" />: AS
</td>
</tr>
</table>
Example
<TR>
<TD VALIGN="top">
<LABEL FOR="disabilities">5. Do you have any disability which may limit your-----------
<BR>
ability to perform the essential functions of the job
<BR>
for which you are applying?<FONT COLOR="#FF0000"><SUP>*</SUP></FONT>
</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="disabilities" MAXLENGTH="3" SIZE="6" onFocus="javascript:toggleMsg('msg-23')" onBlur="javascript:toggleMsg('msg-23')" MAXLENGTH="20">
<SPAN ID="msg-23" CLASS="msg" STYLE="visibility:hidden;">Yes or no</SPAN><editcheck="req=Y=Please enter yes or no.">
</TD>
</TR>
<TR>
<TD> </TD>
</TR>
<TR>
<TD VALIGN="top">
<LABEL FOR="ifyes">If yes, describe----------------------------------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="ifyes" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-24')" onBlur="javascript:toggleMsg('msg-24')" MAXLENGTH="20">
<SPAN ID="msg-24" CLASS="msg" STYLE="visibility:hidden;">If no, put N/A.</SPAN><editcheck="req=Y=Please enter descriptions of disabilities.">
</TD>
</TR>
<TR>
<TD VALIGN="top">
<LABEL FOR="accommodate">What can we do to accommodate you?---------------------</LABEL>
</TD>
<TD VALIGN="top">
<INPUT TYPE="text" NAME="accomodate" MAXLENGTH="50" SIZE="60" onFocus="javascript:toggleMsg('msg-25')" onBlur="javascript:toggleMsg('msg-25')" MAXLENGTH="20">
<SPAN ID="msg-25" CLASS="msg" STYLE="visibility:hidden;">If none, type N/A</SPAN><editcheck="req=Y=Please enter accommodations.">
</TD>
</TR>
Ignoring the javascript since it doesn't work yet and is part of another question, How do I set this up so I have a checkbox next to disabilities. Click on yes, it shows "ifyes" and "accommodate" click on no, it doesn't show it. How do I do that?
You will need to put some javascript in to make it work. I have put together a real quick test for you. Feel free to modify it to suit your needs.
JavaScript
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.visibility = 'visible';
}
else document.getElementById('ifYes').style.visibility = 'hidden';
}
</script>
HTML
<label for="yesCheck">Yes</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label for="noCheck">No</label> <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="visibility:hidden">
<label for="yes">If yes, explain:</label>
<input type='text' id='yes' name='yes'><br>
<label for="acc">What can we do to accommodate you?</label>
<input type='text' id='acc' name='acc'>
</div>
Demo - http://jsfiddle.net/QAaHP/
I am using radio buttons, but I am not sure how to align them how I want. I want them to be on the same line like this :
Option 1 o Option 2 o
But they appear like this :
Option 1 o
Option 2 o
Here is my HTML, can anybody advise?
<table>
<tr>
<td>
<label for="lblMeterName" />
</td>
</tr>
<tr>
<td>
Input/Output Group :
</td>
<td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
<input type="radio" name="rdoInput" value="No"/> No
</td>
</tr>
<tr>
<td>
<input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>
Give your radio buttons and labels a class as follows:
<input type="radio" id="radioYes" class="inline-radio" name="radioGroup" value="Yes" />
<label for="radioYes" class="inline-radio">Yes</label>
<input type="radio" id="radioNo" class="inline-radio" name="radioGroup" value="No" />
<label for="radioNo" class="inline-radio">No</label>
Then apply the following CSS:
.inline-radio {
display: inline-block;
}
This is an improvement over the float method because float often requires additional semantics to prevent undesired rendering, whereas inline-block does not.
Put them in a table like this:
<td>
<table><tr><td>
<input type="radio" name="rdoInput" value="Yes"/> Yes
</td><td>
<input type="radio" name="rdoInput" value="No"/> No
</td></tr></table>
</td>
This gives you the most flexibility concerning space in between or alignment with parent object.
You can wrap input and text into div and set float css property for div.
There are multiple solutions for this:
You could wrap another table around the radiobuttons and add each one to a table cell.
Add a <br/> after each option.
You could float the radiobuttons.
You could add a display:inline or display:inline-block to the radiobuttons.
I would prefer wrapping both the radiobutton and it's label in a <label> tag and applying float, since this would make the label clickable as well and provide you with more flexibility:
<label class="radio-label"><input type="radio" name="rdoInput" value="Yes"/> Yes</label>
<label class="radio-label"><input type="radio" name="rdoInput" value="No"/> No</label>
And the CSS:
label.radio-label {
float: left;
margin-right: 10px;
}
Add non-breaking spaces between radio buttons;
Use this:
<table>
<tr>
<td><input type="radio" name="rdoInput" value="Yes"/> Yes</td>
<td><input type="radio" name="rdoInput" value="No"/> No</td>
</tr>
<tr>
<td colspan=2><input type="button" id="dialogButton" name="dialogButton" value="Submit" />
</td>
</tr>
</table>