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
Related
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>
I am not a HTML expert, just doing some fun coding once in a while. What I try to accomplish is to have the button in the "td" filling the remaining width, as simple as possible.
<table width="100%">
<tr>
<td>My Text</td>
<td>
<input name="x" id="y" type="text" size="4" maxlength="4" />
<input type="button" onclick="..." value="BlaBla" />
</td>
</tr>
<tr>
<td>Other Text</td>
<td>
<input name="xx" id="yy" type="text" size="20" />
<input type="button" onclick="..." value="MoreBlaBla" />
</td>
</tr>
</table>
I have tried width 100%, but this gives me an extra line. I have checked some answers such as Help with div - make div fit the remaining width here, but since I am not an expert in HTML it is getting too complex. Guess there is a very simple solution.
Well it can be done with JavaScript but it doesn't look that great.
A right-aligned, fixed width button looks better IMHO.
Try this
<td>
<input name="x" id="y" type="text" style="float:left;" size="4" maxlength="4" />
<input type="button" onclick="..." style="float:left;width:70%" value="BlaBla" />
</td>
Basically, there is no way to specify this using HTML+CSS. At some point pretty much everyone has wanted this, and it doesn't exist.
If you are sticking with HTML+CSS, if you have widths specified in some predictable way (either fixed lengths, or percentages), then you can calculate the right percentage (or other measure) to set for the button width. This is probably the best way.
If that is impossible, your next choice is javascript (which you should enhance with at least one of the many libraries that exist now to make javascript so much easier to use).
Try this:
<tr>
<td>My Text</td>
<td>
<input name="x" id="y" type="text" size="4" style="float:left;width:100px" maxlength="4" />
<div style="padding-left:100px"><input type="button" style="width:100%" value="BlaBla" /></div>
</td>
</tr>
i am trying to recreate the login form shown on tinypic's main page.
in html, i have the 3 elemnts like this:
E-Mail:
<input type="text" name="id" maxlength="30" value="" />
Password:
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
i have tried putting them into separate divs,
using float:left with a unique class in css
but the code is really messy unreasonably long.
so essentially, i wanted to know if there was a simple way to achieve this layout with html and css.
thanks for the time!
This CSS should work, though I haven't tested:
input { display: inline; }
Here is my solution: ( http://jsfiddle.net/HcppN/ )
HTML:
<label>E-Mail:</label>
<input type="text" name="id" maxlength="30" value="" />
<label>Password:</label>
<input type="text" name="pw" maxlength="30" value="" />
<input type="submit" name="submit" value="Login" />
CSS:
input, label {
float:left;
margin:5px;
}
I also recommend you to encapsulate the labels in <label> tags. You can even use the for="inputId" attribute, so that clicking on the label brings the input into focus.
Just add display:inline to your input elements, as shown here
Though there are already accepted and up voted answers, I just want to contribute a way to make a form horizontal without any kind of CSS. Using HTML table is an effective way to make a horizontal form.
Example 1:
<table>
<tr>
<td>First Name</td>
<td><input type="text" name="fname" > </td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lname" > </td>
</tr>
</table>
</form>
Example 2:
<form method="">
<table>
<tr>
<td><input type="text" name="fname" ></td>
<td><input type="text" name="lname" ></td>
........................
</tr>
</table>
</form>
My experience says, sometimes in different cases the CSS/class may not work or sometimes they may conflict ; but using an HTML table to make an HTML form is something like forcing to be what we want to be appear. Thank you.
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>
I have form with 2 radio buttons but both of the radio buttons can be selected,
<form class="descriptions" id="collection" method="post" action="">
<table width="200">
<tr>
<td>
<label>Collection</label>
<input type="radio" value="collection" />
</td>
<td>
<label>Delivery</label>
<input type="radio" value="delivery" />
</td>
</tr>
</table>
</form>
I know this is very easy but I can't seem to find the answer,
any help would be appreciated.
Give them the same name.
Description of the radio button control type in the HTML 4.01 specification:
Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive: when one is switched "on", all others with the same name are switched "off".
<form class="descriptions" id="collection" method="post" action="">
<table width="200">
<tr>
<td>
<label>Collection</label>
<input type="radio" name="samename" value="collection" />
</td>
<td>
<label>Delivery</label>
<input type="radio" name="samename" value="delivery" />
</td>
</tr>
</table>
</form>
// this is the correct answer for ur following problem //