Chapter 10 bubbleunder google search tool validation

Get Started
1

Following is the mark-up I’m using:


<form method="get" action="http://www.google.com/search">
					<label for="q">Search:</label>
					<input id="q" name="q" size="20" maxlength="255" value="" type="text" />
					<input name="domains" value="http://www.bubbleunder.com/" type="hidden" />
					<input name="sitesearch" value="http://www.bubbleunder.com/" checked="checked" id="mysite" type="radio" />
					<label for="mysite">Just this site</label>
					<input name="sitesearch" value="" id="www" type="radio" />
					<label for="www">Web</label>
					<input name="btnG" value="Go" type="submit" />
				</form>

When I try to validate it using W3C I get a whole bunch of error messages like:


Line 20, Column 20: document type does not allow element "label" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag 
					<label for="q">Search:</label>

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as “<p>” or “<table>”) inside an inline element (such as “<a>”, “<span>”, or “<font>”).

Does anyone know how I can validate correctly? Thanks, Jos:)

2

Hi, it’s due to the type of doctype you are using, it would require you to wrap an element around it.

Basically this is an easy fix, get rid of whatever doctype you are currently using, and replace it with this HTML5 doctype (note, I don’t recommend using HTML5, but the doctype is the only useful part about it :))

<!DOCTYPE html>

Easy to remember also, a huge plus.

3

Jos, I presume you are talking about the code on page 390 or something?

If so, what the W3C Validator is saying is; you haven’t placed an inline element inside a block-level element.

Like Ryan hinted HTML5 is a lax language and non normative and ‘experiential only’. Though you are using XHTML 1.0 in the Second Edition book by the looks of things. Thus ignore what he said about changing the Doctype.

Typically with FORM in a proper normative language like XHTML they tend have a FIELDSET and LEGEND after the start FROM tag.

However, for the sake of the book in question; what you are a missing is a DIV element. In the form of <div id=“search”> prior to the first LABEL tag and obviously you’ll require the closing </div> before the closing FORM tag and then it should pass as it fulfils wrapping the inline form controls, etc.