In my form I have a series of inputs that require Yes/No radio buttons:
Here's the code I've used to align the buttons:
Code: Select all
<tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN"><th colspan="2" id="PART-4">Part 4 – Miscellaneous and Agreements</th></tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="FIND_US">How did you find us?</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<textarea name="FIND_US" id="FIND_US" rows="1" cols="49" placeholder="Internet? Friend? Big Horn Show?"></textarea>
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="SPONSOR_NAME">Sponsor name:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="text" name="SPONSOR_NAME" id="SPONSOR_NAME" size="65" placeholder="Name of person that referred you">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">I agree to the<br>Rules & Terms of Use</td>
<td class="TEXT-ALIGN-LEFT">
<input type="radio" name="RULES_TERMS" id="RULES_TERMS_YES" value="Yes">
<label for="RULES_TERMS_YES">Yes</label>
<img src="spacer.gif" alt="Spacer image" title="Spacer" width="60" height="12">
<input type="radio" name="RULES_TERMS" id="RULES_TERMS_NO" value="No">
<label for="RULES_TERMS_NO">No</label>
<br>
Read the <a href="https://ewatv.org/Terms-of-Use.htm" target="_blank">Rules and Terms of Use</a> here.
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">I agree to the<br>Liability Waiver</td>
<td class="TEXT-ALIGN-LEFT">
<input type="radio" name="LIABILITY_WAIVER" id="LIABILITY_WAIVER_YES" value="Yes">
<label for="LIABILITY_WAIVER_YES">Yes</label>
<img src="spacer.gif" alt="Spacer image" title="Spacer" width="60" height="12">
<input type="radio" name="LIABILITY_WAIVER" id="LIABILITY_WAIVER_NO" value="No">
<label for="LIABILITY_WAIVER_NO">No</label>
<br>
Read the <a href="https://ewatv.org/Documents/EWATV_Release_of_Liability_2020-08-05.pdf" target="_blank">Liability Waiver</a> here.
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">I agree to receive electronic<br>communications from EWATV</td>
<td class="TEXT-ALIGN-LEFT">
<input type="radio" name="ELECTRONIC_COMMUNICATIONS" id="ELECTRONIC_COMMUNICATIONS_YES" value="Yes">
<label for="ELECTRONIC_COMMUNICATIONS_YES">Yes</label>
<img src="spacer.gif" alt="Spacer image" title="Spacer" width="60" height="12">
<input type="radio" name="ELECTRONIC_COMMUNICATIONS" id="ELECTRONIC_COMMUNICATIONS_NO" value="No">
<label for="ELECTRONIC_COMMUNICATIONS_NO">No</label>
</td>
</tr>
<tr>
<th colspan="2">
<br>
<input class="BUTTON-CLEAR-FORM" type="reset" value="Clear form - start over">
<img src="spacer.gif" alt="Spacer image" title="Spacer" width="60" height="12">
<input class="BUTTON-SUBMIT" type="submit" value=" Submit Your Application ">
<br><br>
</th>
</tr>
Okay, I get that, but haven't figured out how to use position with CSS to ensure the radio buttons line up.
I also have Yes/No radio buttons in other parts of my form so will use this code for those other parts.
Any help is greatly appreciated.