WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Adding a label to search box

for

From: Kynn Bartlett
Date: Apr 11, 2006 1:00PM

On 4/11/06, Peter Weil < <EMAIL REMOVED> > wrote:
> It's the input box that needs the label. You can add something like
> this:
>
> <div>
> <label for="s">Search this Site</label>
> <input type="text" name="s" id="s" />
> <input type="submit" id="searchsubmit" value="Go!" /
> </div>
>
> You can place the label just above the search box, or "hide" it with
> CSS if you prefer.

Here's an even cooler way to do it that doesn't involve extraneous
content that has to be hid with CSS:

<form>
<input type="text" id="searchbox">
<button type="submit">
<label for="searchbox">Search</label>
</button>
</form>

Enjoy!

--Kynn

--
Kynn Bartlett < <EMAIL REMOVED> >
Writer, Web Developer, Photographer, Game Designer
Tucson, Arizona
http://kynn.com