[SOLVED] Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by paulp575 »

This might be more appropriate in the HTML/XHTML forum, but since I want to use CSS I thought I'd put it in this forum.

In my form I have a series of inputs that require Yes/No radio buttons:
Part 4 screenshot.jpg
Part 4 screenshot.jpg (49.34 KiB) Viewed 14340 times
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 &#8211; 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 &amp; 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>
          
HTML Validator says I should not use spacers for positioning.

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.
Last edited by paulp575 on Wed Nov 11, 2020 9:00 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by Albert Wiersch »

Hello,

I think the simplest approach to replace the spacer images would be to specify a left margin. For example, instead of this:

Code: Select all

<input type="radio" name="ELECTRONIC_COMMUNICATIONS" id="ELECTRONIC_COMMUNICATIONS_NO" value="No">
use this (add style="margin-left: 2em"):

Code: Select all

<input style="margin-left: 2em" type="radio" name="ELECTRONIC_COMMUNICATIONS" id="ELECTRONIC_COMMUNICATIONS_NO" value="No">
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by paulp575 »

For some reason I hadn't thought of using margin-left. Thanks. I'll give it a try and report back.
paulp575
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by paulp575 »

Thanks - it worked!

However, something I noticed when I then used HTML Validator to verify that everything was correct:

I used

Code: Select all

 class="MARGIN-LEFT-3EM"
in the following script:

<script>
document.write('<select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option></select>')
</script>

HTML Validator said it was not used so recommended the listing for it in my css section it should be removed.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by Albert Wiersch »

paulp575 wrote: Tue Nov 10, 2020 5:54 pm Thanks - it worked!
Great! :D
paulp575 wrote: Tue Nov 10, 2020 5:54 pmHowever, something I noticed when I then used HTML Validator to verify that everything was correct:

I used

Code: Select all

 class="MARGIN-LEFT-3EM"
in the following script:

<script>
document.write('<select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option></select>')
</script>

HTML Validator said it was not used so recommended the listing for it in my css section it should be removed.
CSS HTML Validator doesn't run script so it's not seeing what's in document.write() so it's not seeing your use of the MARGIN-LEFT-3EM class.

Is there a reason you're using a "script" element and document.write() instead of just embedding the HTML directly into the document?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by paulp575 »

I found a script for cascading dropdown selection lists, i.e., what you select in the first dropdown select determines what choices you will see in the second related dropdown menu.

I'd prefer to not use scripts, but couldn't find another way to tie the field OHV Make to OHV Model.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by Albert Wiersch »

But instead of

Code: Select all

<script>
document.write('<select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option></select>')
</script>
Why not just

Code: Select all

<select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option></select>
I think both should work unless I'm missing something.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by paulp575 »

Yes, both work. Not sure why I used the document.write.

What I'd really like to do is ensure they first select OHV Make and then the OHV model dropdown would be based upon the OHV Make selected. And if they try to select the OHV Model first, the dropdown would state "Select OHV Make first".

Here's the script I have in the head section:

Code: Select all

<!-- Script used for OHV Make and Model -->
<!-- Source for script code: http://www.jyotiranjan.in/blog/create-dynamic-drop-down-list/ -->
<script>
  function dynamicdropdown(listindex)
  {
    document.getElementById("OHV_Model").length = 0;
    switch (listindex)
    {
      case "CanAm" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Commander","Commander");
      document.getElementById("OHV_Model").options[2]=new Option("Defender","Defender");
      document.getElementById("OHV_Model").options[3]=new Option("Maverick","Maverick");
      document.getElementById("OHV_Model").options[4]=new Option("Outlander","Outlander");
      document.getElementById("OHV_Model").options[5]=new Option("Renegade","Renegade");
      document.getElementById("OHV_Model").options[6]=new Option("Other CanAm","Other CanAm");
      break;

      case "Honda" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Foreman","Foreman");
      document.getElementById("OHV_Model").options[2]=new Option("Pioneer","Pioneer");
      document.getElementById("OHV_Model").options[3]=new Option("Rancher","Rancher");
      document.getElementById("OHV_Model").options[4]=new Option("Recon","Recon");
      document.getElementById("OHV_Model").options[5]=new Option("Rincon","Rincon");
      document.getElementById("OHV_Model").options[6]=new Option("Rubicon","Rubicon");
      document.getElementById("OHV_Model").options[7]=new Option("Talon","Talon");
      document.getElementById("OHV_Model").options[8]=new Option("TRX","TRX");
      document.getElementById("OHV_Model").options[9]=new Option("Other Honda","Other Honda");
      break;

      case "Polaris" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Ace","Ace");
      document.getElementById("OHV_Model").options[2]=new Option("General","General");
      document.getElementById("OHV_Model").options[3]=new Option("Ranger","Ranger");
      document.getElementById("OHV_Model").options[4]=new Option("RZR","RZR");
      document.getElementById("OHV_Model").options[5]=new Option("Sportsman","Sportsman");
      document.getElementById("OHV_Model").options[5]=new Option("Other Polaris","Other Polaris");
      break;

      case "Suzuki" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("KingQuad","KingQuad");
      document.getElementById("OHV_Model").options[2]=new Option("Other Suzuki","Other Suzuki");
      break;

      case "Yamaha" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Grizzly","Grizzly");
      document.getElementById("OHV_Model").options[2]=new Option("Kodiak","Kodiak");
      document.getElementById("OHV_Model").options[3]=new Option("Raptor","Raptor");
      document.getElementById("OHV_Model").options[4]=new Option("Viking","Viking");
      document.getElementById("OHV_Model").options[5]=new Option("Wolverine","Wolverine");
      document.getElementById("OHV_Model").options[6]=new Option("YZR","YZR");
      document.getElementById("OHV_Model").options[7]=new Option("Other Yamaha","Other Yamaha");
      break;

      case "Other" :
      document.getElementById("OHV_Model").options[0]=new Option("Select OHV model","");
      document.getElementById("OHV_Model").options[1]=new Option("Other OHV Model","Other OHV Model");
      break;
    }
    return true;
  }
</script>
<!-- End of script used for OHV Make and Model -->
I thought since I was no longer using the document.write code I wouldn't need that script. However, when I deleted it, the OHV Model didn't work.

Here's the complete OHV Make and Model section code:

Code: Select all

          <tr>
            <td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
              <label for="OHV_MAKE">OHV Make and Model:</label>
            </td>
            <td class="TEXT-ALIGN-LEFT">
              <section id="OHV_MODEL">
                <select name="OHV_MAKE" id="OHV_MAKE" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
                  <option value="" selected>Select OHV Make</option>
                  <option value="CanAm">CanAm</option>
                  <option value="Honda">Honda</option>
                  <option value="Polaris">Polaris</option>
                  <option value="Suzuki">Suzuki</option>
                  <option value="Yamaha">Yamaha</option>
                  <option value="Other">Other</option>
                </select>
                <select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option></select>
<!--
                <script>
                  document.write('<select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option></select>')
                </script>
-->
              </section>
            </td>
          </tr>
I've left the document.write code (commented out) in there in case something we figure doesn't workand I might need to keep it.

I'm just not familiar with scripts.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by Albert Wiersch »

Hello,

I tested the code above and the OHV Model select control seems to work and populate as expected when an OHV Make is chosen.

What about using this to make it more clear that an OHV Make needs to be chosen first?

Code: Select all

                <select name="OHV_Model" id="OHV_Model" class="MARGIN-LEFT-3EM"><option value="">Select OHV Model</option>
                  <option value="">First Select OHV Make</option>
                </select>
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Vertical and Horizontal Alignment of Radio Input on HTML Forms Using CSS

Post by paulp575 »

Looks like we finally got it solved! Thanks.

Even though I'm getting a message about one of my fields being named the same (The "id" attribute value "OHV_Model" is a case-insensitive (but not case-sensitive) match for another "id" value in this document. While this is technically allowed, it can be problematic in some cases. If possible, make sure that unique values do not match other unique values case-insensitively. This message is displayed up to 5 times.).

I will tackle that message when I start working on hiding parts of the form based upon user input ( viewtopic.php?f=8&t=3148).
paulp575
Post Reply