That worked - thanks!
I've updated the code and inserted the necessary table tags.
When I run it through the HTML Validator, I'm getting the following errors:
Lines 136, 137, 246, and 247:
An "input" element with type="radio" should normally have both the "name" and "value" attributes even though this is not technically required by the HTML/XHTML specification.
---
It is recommended that the unnecessary pseudo-protocol "javascript:" be removed. An exception would be if this is actually a real JavaScript label statement and it is used as such (this is rare).
Not sure if I should be concerned about this or not. You can see in the commented out text I had the name, id, and value.
This is a form that will be submitted electronically and the recipient of the form submission will see name of the field (name) and it's value, i.e.: First Name: Johnny
Also the following style error messages were shown after validation:
Lines144 (HTML Validator didn't pick up this error on line 254):
Using "display: none" or "visibility: hidden" to hide content still causes the downloading of any resources in that content (like images) even though the resources may never be used or displayed (unless it is in an inactive media query). Keep this in mind, and, if possible, use alternate methods (like media queries) that are more efficient and that won't download resources that will not be used or displayed. This message is displayed only once.
---
(Styles) Using "display: none" or "visibility: hidden" to hide text may be considered spamming and "black hat SEO". Be sure not to purposely use this technique to hide text and content for search engine purposes. This message is displayed only once.
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="EWATV Membership Application">
<meta name="apple-mobile-web-app-title" content="EWATV Mbr App">
<title>EWATV Membership Application</title>
<style>
<!--
body
{
FONT-SIZE: 12pt;
FONT-FAMILY: Arial,helvetica,sans-serif;
MARGIN: 0px;
BACKGROUND-COLOR: #ffffff;
}
TABLE, TD
{
BORDER: 1px solid black;
BORDER-COLLAPSE: collapse;
PADDING: 5px;
}
-->
</style>
<!-- Script used for displaying CBO section
Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
-->
<script>
function CBO_Check()
{
if (document.getElementById('CBO_Yes').checked)
{
document.getElementById('ifYes1').style.visibility = 'visible';
}
else document.getElementById('ifYes1').style.visibility = 'hidden';
}
</script>
<!-- Script used for displaying OHV section
Source for following script: https://codepen.io/Zillionx/pen/xwOxoW
-->
<script>
function OHV_Check()
{
if (document.getElementById('OHV_Yes').checked)
{
document.getElementById('ifYes2').style.visibility = 'visible';
}
else document.getElementById('ifYes2').style.visibility = 'hidden';
}
</script>
<!-- Script used for selecting 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_MAKE_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 -->
</head>
<body>
<table>
<tr>
<td colspan="2">
Do you represent a CBO?
<br>
Yes <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_Yes">
No <input type="radio" onclick="javascript:CBO_Check();" name="yesno" id="CBO_No">
<!--
<input type="radio" name="CBO_REPRESENT" id="CBO_REPRESENT_YES" value="Yes">
<label for="CBO_REPRESENT_YES">Yes</label>
<input type="radio" name="CBO_REPRESENT" id="CBO_REPRESENT_NO" value="No" class="MARGIN-LEFT-5EM">
<label for="CBO_REPRESENT_NO">No</label>
-->
<table id="ifYes1" style="visibility:hidden">
<tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
<th colspan="2" id="CBO_INFO">
Club / Business / Organization (CBO)
</th>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_NAME">CBO name:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="text" name="CBO_NAME" id="CBO_NAME" size="65">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_MAIL_ADDRESS">CBO Mail address:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="text" name="CBO_MAIL_ADDRESS" id="CBO_MAIL_ADDRESS" size="65">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_CITY">CBO City:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="text" name="CBO_CITY" id="CBO_CITY" size="65">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_STATE">CBO State:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<select name="CBO_STATE" id="CBO_STATE">
<option value="WA" selected="selected">WA</option>
<option value="ID">ID</option>
</select>
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_ZIP_CODE">CBO Zip code:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="text" name="CBO_ZIP_CODE" id="CBO_ZIP_CODE" size="25" placeholder="Include ZIP+4® if known" pattern="\d{5}-?(\d{4})?">
</td>
</tr>
<tr>
<th colspan="2">One of the following is <span class="TEXT-COLOR-RED">required</span>:
<table class="WIDTH60P MARGIN-LEFT-5_85EM">
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="CBO_PHONE">CBO phone:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="tel" name="CBO_PHONE" id="CBO_PHONE" size="35" placeholder="Numbers only please!" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="CBO_CELL_PHONE">CBO Cell phone:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="tel" name="CBO_CELL_PHONE" id="CBO_CELL_PHONE" size="35" placeholder="Numbers only please!" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</td>
</tr>
</table>
</th>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_E-MAIL_ADDRESS">CBO E-Mail Address:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="email" name="CBO_E-MAIL_ADDRESS" id="CBO_E-MAIL_ADDRESS" size="65">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD TEXT-COLOR-RED">
<label for="CBO_CONFIRM_E-MAIL_ADDRESS">Confirm CBO E-Mail Address:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="email" name="CBO_CONFIRM_E-MAIL_ADDRESS" id="CBO_CONFIRM_E-MAIL_ADDRESS" size="65">
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="CBO_WEB_ADDRESS">CBO Web address:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="url" name="CBO_WEB_ADDRESS" id="CBO_WEB_ADDRESS" size="65">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
Do you own an OHV?
<br>
Yes <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_Yes">
No <input type="radio" onclick="javascript:OHV_Check();" name="yesno" id="OHV_No">
<!--
<input type="radio" name="OHV_OWN" id="OHV_OWN_YES" value="Yes">
<label for="OHV_OWN_YES">Yes</label>
<input type="radio" name="OHV_OWN" id="OHV_OWN_NO" value="No" class="MARGIN-LEFT-5EM">
<label for="OHV_OWN_NO">No</label>
-->
<table id="ifYes2" style="visibility:hidden">
<tr class="TEXT-ALIGN-CENTER TEXT-SIZE-20PT TEXT-COLOR-LIME-GREEN">
<th colspan="2" id="OHV_INFO">
OHV Info
</th>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="OHV_TYPE">OHV Type:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<select name="OHV_TYPE" id="OHV_TYPE">
<option value="" selected="selected">Select OHV Type</option>
<option value="ATV">ATV</option>
<option value="SxS">SxS</option>
<option value="Other">Other</option>
</select>
</td>
</tr>
<tr>
<td class="TEXT-ALIGN-RIGHT TEXT-BOLD">
<label for="OHV_YEAR">OHV Year:</label>
</td>
<td class="TEXT-ALIGN-LEFT">
<input type="text" name="OHV_YEAR" id="OHV_YEAR" size="20" title="Four numbers please!" placeholder="Four numbers please!">
</td>
</tr>
<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_MAKE_MODEL">
<select name="OHV_MAKE" id="OHV_MAKE" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="" selected="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>
<option value="" selected="selected">First Select OHV Make</option>
</select>
</section>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks!