Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Need help to be semantically correct
Is more proper to do this:
<code>
<h3>search</h3><form action=“http://www.amitvaria.com/” method=“get”><p><input type=“text” name=“q” value=”“ size=“15” class=“search-box” /><input type=“submit” class=“search-button” value=“go” /></p></form>
</code>
or have the h3 in the form like:
<code>
<form action=“http://www.amitvaria.com/” method=“get”><h3>search</h3><p><input type=“text” name=“q” value=”“ size=“15” class=“search-box” /><input type=“submit” class=“search-button” value=“go” /></p></form>
</code>
Sounds minute, but I just want to write the best html I can.
Offline
Re: Need help to be semantically correct
If you wanted to be semantically correct, you would make that <code><h3></code> a <code><label for=“q”></code>
Offline
Re: Need help to be semantically correct
ok well in order for that to work the h3 tag would need to be in the form tag. I’m not sure in terms of usability if it would be right to have the heading be a label. Walker, if you checked out http://www.amitvaria.com, would think that it needs to be a label?
Offline
#4 2006-10-18 04:04:30
- Mary
- Sock Enthusiast
- Registered: 2004-06-27
- Posts: 6,236
Re: Need help to be semantically correct
It can go either way, it depends upon what you’re trying to achieve. If you intend search to be a heading, then outside the form is where it should go. If you intend it to be a label, then it should be a label inside the form.
Looking at your page, a label is indeed what you want.
<form method="get" action="http://www.amitvaria.com/">
<p><label for="search">Search</label><br />
<input type="text" id="search" name="q" value="" size="15" class="search-box" />
<input type="submit" class="search-button" value="Go" /></p>
</form>:)
Offline
Offline
Re: Need help to be semantically correct
Another alternative. “Search” sorta describes the action of the form in general, but the input could be more specific, “Keywords”, “Terms”, etc.. you get the idea. In that case you could make use of fieldset and legend tags along with the label. You should also use tabindex and title attributes for accessibility:
<form action="/" method="get">
<fieldset>
<legend>Search</legend>
<label for="terms">Terms</label>
<input id="terms" name="q" tabindex="1" title="Search terms" type="text" />
<input tabindex="2" title="Execute search" type="submit" value="Go" />
</fieldset>
</form>(Edit: corrected code display. -Mary)
Last edited by Mary (2006-10-19 17:56:45)
Travel Atlas * Org | Start Somewhere
Offline
Pages: 1