Custom DTD
A couple of months ago introduced you Safari’s new search field — a special HTML form component, that looks and behaves just as the search field of Mac OS. However there is one drawback: the custom attribute “search” prevents your site from validating.
In order to make Safari display this custom input field you just have to assign another type to the input element — type=“search”. If you don’t mind whether your site validates or not, this approach is absolutely okay since search fields degrade gracefully in other browsers. However if you do care, you can make use of one of the following techniques.
JavaScript
The first and more obvious technique is to replace the type attribute using JavaScript. Since the W3C Validator does not interpret JavaScript, it only validates the following HTML…
<input type="text"/>instead of…
<input type="search"/>This techniques is perfect when viewing the site with a javascript enabled browser. However if javascript is disabled, Safari users or rather Apple Webkit users will just get a plain text field. And since your site will probably also be viewed with RSS readers such as NetNewsWire or NewsFire, in which javascript is disabled by default, this approach is somewhat half-hearted. So let’s better take a look at the second technique.
Custom DTD
So how can we assign this proprietary value to our search field without intimidating browsers and the W3C validator? Well the answer is quite simple — by defining a custom DTD that extends XHTML a bit to include our custom attribute. This custom DTD defines our special attribute value, and the validator obeys by checking the document structure against our special flavor of XHTML. If the DTD says the value is valid, they’re valid.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
[
<!ATTLIST input type
(text|submit|checkbox|radio|button|password|search)
#REQUIRED>
]>
However if you look at the example you will recognize that all browsers except for Opera render the closing parenthesis ]>, which is quite annoying. But if we apply some negative text-indent to the body element, we can get rid of it. For further reading check out the following articles: Validating a Custom DTD and More About Custom DTDs at “A List Apart”.
