Vertically align radio buttons?

Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

Hello.

This isn't a perl question per se but is there a convenient technique for vertically aligning radio buttons?

<html>
<head>
<title>Biological Sequence Analyzer</title>
</head>
<body bgcolor='grey' text='black'>


<form method='post' action='../cgi-bin/bioanalyzer.cgi'>

<tr>
<td><b>Protein Name:</b></td><td><input type='text'
                                        name='protein_name'
                                        width=25 /></td>
</tr><br />


<tr>
<td><b>Input Type:</b></td></tr><tr><td><input type='radio'
                                  name='input'
                                  value='amino acids'><b>amino acids</
+b></td>
</tr><br />

<tr>
<td><input type='radio'
               name='input'
               value='dna'></td></tr><tr><td><b>nucleotides - DNA</b><
+/td>
</tr><br />

<tr>
<td><input type='radio'
           name='input'
           value='rna'></td></tr><tr><td><b>nucleotides - RNA</b></td>
</tr><br /><br />

<tr>
<td><b>Upload File:</b></td><td><input type='file' name='upload'></td>
</tr><br /><br />

<tr>
<td><b>...or paste a sequence:</b><br /><br /></td>
<td><textarea name='seq' rows='20' cols='90'></textarea></td>
</tr>

<center>
<br />
<input type='submit' value='Calculate'>
<input type='reset' value='Clear Form'/>
</center>

</form>
</body>
</html>
[download]

I'd like the 2nd and 3rd button to be moved farther to the right and directly under the 1st.

Thank You

Comment on Vertically align radio buttons? Download Code

Replies are listed 'Best First'.
Re: Vertically align radio buttons? by Utilitarian (Vicar) on May 27, 2009 at 08:16 UTC
In order to use table separation you have to declare a table, and when debugging it can be useful to set a border=1. Answering 'cos it's simple to do, but you should really have tried a bit harder before asking this question. <html> <head> <title>Biological Sequence Analyzer</title> </head> <body bgcolor='grey' text='black'> <form method='post' action='../cgi-bin/bioanalyzer.cgi'> <table> <tr> <td><b>Protein Name:</b></td><td><input type='text' name='protein_name' width=25 /></td> </tr><br /> <tr><td><b>Input Type:</b></td><td><input type='radio' name='input' value='amino acids'><b>amino acids</ +b> <br/> <input type='radio' name='input' value='dna'><b>nucleotides - DNA</b> <br /> <input type='radio' name='input' value='rna'><b>nucleotides - RNA</b> <br /><br /> <tr> <td><b>Upload File:</b></td><td><input type='file' name='upload'></td> </tr><br /><br /> <tr> <td><b>...or paste a sequence:</b><br /><br /></td> <td><textarea name='seq' rows='20' cols='90'></textarea></td> </tr> </table> <center> <br /> <input type='submit' value='Calculate'> <input type='reset' value='Clear Form'/> </center> </form> </body> </html> [download]	[reply] [d/l]
Re^2: Vertically align radio buttons? by Anonymous Monk on May 28, 2009 at 05:03 UTC
I simply forgot to include the table tags. However, the 2nd and 3rd radio buttons are still not directly under the 1st radio button. I'd like to have them vertically aligned (in a column). Thank You.	[reply]
Re^3: Vertically align radio buttons? by Utilitarian (Vicar) on May 28, 2009 at 06:25 UTC
I also altered your table structure slightly, if you try the posted markup you'll see it works, getting the "Input type:" header to vertically align to the top of the list is left as a trivial, please do some of the work yourself, exercise;)	[reply]