PDA

View Full Version : Is this form code correct?



effpeetee
Apr 28th, 2010, 11:32 AM
<form><label class="c1" form="text">Search</label> <input type="text" size="22" class="c1" id="text" onkeyup="javascript:void($('a')removeHighlight(.highlight(document.getElementById('text').value)); return false;" />
<label class="c1" for="text">Use C/R or Enter to clear..___Needs javascript -
For best viewing, use Firefox-Safari-Chrome.&nbsp;Uses CSS3 HTML5.</label></form>

This code seems to work OK but gives errors on some browsers. My validator seems to accept it but comments that it is not good code.

Part of my Sources program (http://exitfegs.co.uk/Sources.html). Any help welcomed.

Frank

mbaker
Apr 28th, 2010, 01:26 PM
Your code validates (experimentally) as HTML5 at the W3C validator.

However as HTML5 is still not yet a standard and many of the new features are not yet supported in browsers, it is safer to only use features that are already in one of the HTML4 standards (such as HTML4 Transitional).

In HTML4 you should have an action attribute on your form tag, and there is no form attribute on the label tag.

In addition you should probably associate one of your label tags with the input element, either by surrounding it with a label tag, or using the label tags for attribute (which should match the corresponding form control's id attribute).

effpeetee
Apr 28th, 2010, 01:40 PM
Thank you mbaker. This is the only form that I have ever used and it was written for me by one of this forum.

EDIT: I have put the earlier version back on site. No HTML5 for now.

My knowledge of this is minimal and despite much Googling I have not yet come to understand it. Any additional insight welcomed.
I have also put this query on the Javascript site as I do not know which is the main culprit. Incidentally, I had these odd errors when it was with an Xhtml doctype. Before the rounded corners, etc.

Frank

bazz
Apr 28th, 2010, 03:50 PM
Frank can you post a link to the form. Much easier to see what you are having trouble with.

bazz

mbaker
Apr 28th, 2010, 04:23 PM
Frank,

To be valid XHTML 4 Strict you need to make three changes:

Add an action to your form element.
Remove height="2" from your input element.
Wrap the contents of your form in a tag such as p.

If you replace your form with the following your page should validate:


<form action="javascript:void(); return false;"><p><label class="c1" for="text">Search</label> <input type=

"text" size="22" class="c1" id="text" onkeyup=

"javascript:void($('a').removeHighlight().highlight(document.getElementById('text').value)); return false;" />
<label class="c1" for="text">Use C/R or Enter to clear..___Needs javascript -
</label></p></form>


It would also be safer to put the javascript into a function than call it directly from the onkeyup attribute.

The following should prevent your page hanging if the user clears the search box by using the backspace key:


<script type="text/javascript">
var oldSearchTerm;
function searchHighlight(theId) {
/*alert(theId);*/
var searchBox = document.getElementById(theId);
var searchTerm = searchBox.value;
if (searchTerm == oldSearchTerm) {
searchBox.value = '';
searchTerm = '';
}
oldSearchTerm = searchTerm;
if(searchTerm == '') {
$('a').removeHighlight();
} else {
$('a').removeHighlight().highlight(searchTerm);
}
return false;
}
</script>


Then replace your input with:


<input type="text" size="22" class="c1" id="text" onkeyup="searchHighlight('text'); return false;" />

In addition it might also be worthwhile to only show the search box to those who have javascript enabled. One way to do that would be to replace your <div id="cl"> with:


<div id="cl" style="display:none">
<form action="javascript:void(); return false;"><label class="c1" for="text">Search</label> <input type=
"text" size="22" class="c1" id="text" onkeyup="searchHighlight('text'); return false;" />
<label class="c1" for="text">Use C/R or Enter to clear..___Needs javascript -
</label></form>
</div>
<script type="text/javascript">
document.getElementById("cl").style.display="block";
</script>

effpeetee
Apr 28th, 2010, 09:22 PM
Thanks very much. That is very kind of you and works fine now.
I have put it over to my site. (http://exitfegs.co.uk/Sources.html)All the little irritations have now gone.

Just this from the validator (http://validator.w3.org/check?uri=http%3A%2F%2Fexitfegs.co.uk%2FSources.html&charset=%28detect+automatically%29&doctype=Inline&group=0#result) although it doesn't seems to affect it.

http://validator.w3.org/check?uri=http%3A%2F%2Fexitfegs.co.uk%2FSources.html&charset=%28detect+automatically%29&doctype=Inline&group=0#result

Brilliant.

Frank