Member Avatar for astnrocker

This is for an assignment in school. All of our HTML has to be W3C validated. I'm still getting one error. On line 32 specifically. This is what it's saying:

"Line 32, Column 43: end tag for "select" which is not finished
<select name="choiceBox" size="7"></select>✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on."

I don't see anything nested incorrectly. I've been hacking at the code for a while now with no solution. Anyone have any ideas?

<table border="0"> 
 <tr> 
  <td valign="top"> 
    <h3>Personal Information</h3> 
    <p>Name<br /> 
      <input type="text" name="name" size="50" onclick="document.forms[0].name.value = '';" /></p> 
    <p>E-mail<br /> 
      <input type="text" name="e_mail" size="50" onclick="document.forms[0].e_mail.value = '';" /></p>  
  </td> 
 </tr> 
  <tr> 
  <td valign="top"> 
  <p>Are you 18 years of age or older?</p> 
  <p><input type="radio" name="preferences" />Yes</p> 
  <p><input type="radio" name="preferences" />No</p> 
  </td> 
 </tr> 
<tr>
<td valign="top">
<p>Positions interested in:</p>
<select name="available" size="7" onchange="moveOver();">
<option>Server</option>
<option>Host</option>
<option>Food Runner</option>
<option>Line Cook</option>
<option>Manager</option>
<option>Busser</option>
<option>Event Coordinator</option>
</select>

<p>Your Choices:</p>
<select name="choiceBox" size="7"></select>

<p><input type="button" value="Remove" onclick="removeMe();" /></p>
</td>
</tr>
</table>
  • 3 Contributors
  • 4 Replies
  • 95 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder
Member Avatar for faroukmuhammad

I qoute from third paragraph;

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on."

Just as lines 21-29 are so should line 32. In other words, you have to put some <option> tags between <select> and </select>.

Edited by faroukmuhammad because: n/a
Member Avatar for astnrocker

I tried that but it messed it up. The user selects a job position and it appears in the box below. The user should also be able to select that and remove it as well.

Member Avatar for faroukmuhammad

O.k, then it should be an input box.

Member Avatar for Arkinder

If you were turning this into me I would fail you.

In 1996, a man named David Siegel had a great idea - to use tables to position elements. This would allow him to simply plug in his content and position things wherever he wanted. While this idea worked, it meshed structure and presentation into one. Making code an endless mess. Imagine trying to dig through hundreds of lines of tables just to edit something. David regretted his own idea only a year later.

Unfortunately, we've been paying for it ever since. I cannot stress to you enough how important it is to only use tables for tabular data. What you currently have belongs in a form. Because that is exactly what it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	
	<body>
	
	<h3>Personal Information</h3>
	
	<form method="get" action="">
	<div>
	
	<label for="name">Name</label><br>
	<input type="text" id="name" name="name" size="50" onclick="document.forms[0].name.value = '';"><br><br>
	<label for="e_mail">E-mail</label><br>
	<input type="text" id="e_mail" name="e_mail" size="50" onclick="document.forms[0].e_mail.value = '';"><br><br>
	
	<h4>Are you 18 years of age or older?</h4>
	<input type="radio" name="preferences">Yes
	<input type="radio" name="preferences">No
	
	<h4>Positions interested in:</h4>
	<select name="available" size="7" onchange="moveOver();">
		<option>Server</option>
		<option>Host</option>
		<option>Food Runner</option>
		<option>Line Cook</option>
		<option>Manager</option>
		<option>Busser</option>
		<option>Event Coordinator</option>
	</select>
	
	<h4>Your Choices:</h4>
	<select name="choiceBox" size="7">
		<option></option>
	</select><br><br>
	
	<input type="button" value="Remove" onclick="removeMe();">
	
	</div>
	</form>
	
	</body>
	
</html>

As faroukmuhammad said, select requires option tags. If you post your JavaScript then I'm sure that I can help you find a work around.

Some things to keep in mind.

  • Do not use a XHTML doctype unless you are parsing XML data.
  • This means that <br /> become <br> and <input /> becomes <input> .
  • Instead of using paragraphs for headings, use the heading tag h1, h2, h3, h4, h5, or h6. It's what they're for and it helps screen readers.
  • I used the label tag, this is also useful for screen readers. But it requires that the value of the for attribute matches the ID attribute of the input. for=name id=name .
  • The single division tag is actually what is replacing all of the paragraph tags you had earlier. This is because inline elements: input, a, text. must be inside of a block-level element: div, p, hx (x meaning 1-6). List of inline elements. List of block-level elements.

If you have any questions or do not fully understand something, feel free to ask.

Regards
Arkinder

Edited by Arkinder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.