summaryrefslogtreecommitdiff
path: root/doc/todo/Add_label_to_search_form_input_field.mdwn
blob: e4e83428c3372754c7e2fe36fb0b295b42363a02 (plain)

The default searchform.tmpl looks rather bare and unintuitive with just an input field.

The patch below adds a label for the field to improve usability:

--- templates/searchform.tmpl.orig	Fri Jun 15 15:02:34 2007
+++ templates/searchform.tmpl	Fri Jun 15 15:02:41 2007
@@ -1,5 +1,6 @@
 <form method="get" action="<TMPL_VAR SEARCHACTION>" id="searchform">
 <div>
+<label for="phrase">Search:</label>
 <input type="text" name="phrase" value="" size="16" />
 <input type="hidden" name="enc" value="UTF-8" />
 <input type="hidden" name="do" value="hyperestraier" />

I don't do this by default because putting in the label feels to me make the action bar too wide. YMMV. What I'd really like to do is make the content of the search field say "search". You see that on some other sites, but so far the only way I've seen to do it is by inserting a nasty lump of javascript. --[[Joey]]

Please don't do that, it is a bad idea on so many levels :) See e.g. http://universalusability.com/access_by_design/forms/auto.html for an explanation why. --[[HenrikBrixAndersen]]

If you really want to do this, this is one way:

--- searchform.tmpl.orig        Sat Aug 25 11:54:28 2007
+++ searchform.tmpl     Sat Aug 25 11:56:19 2007
@@ -1,6 +1,6 @@
 <form method="get" action="<TMPL_VAR SEARCHACTION>" id="searchform">
 <div>
-<input type="text" name="phrase" value="" size="16" />
+<input type="text" name="phrase" value="Search" size="16" onfocus="this.value=''" />
 <input type="hidden" name="enc" value="UTF-8" />
 <input type="hidden" name="do" value="hyperestraier" />
 </div>

That's both nasty javascript and fails if javascript is disabled. :-) What I'd really like is a proper search label that appears above the input box. There is free whitespace there, except for pages with very long titles. Would someone like to figure out the CSS to make that happen?

The tricky thing is that the actual html for the form needs to still come after the page title, not before it. Because the first thing a non-css browser should show is the page title. But the only way I know to get it to appear higher up is to put it first, or to use Evil absolute positioning. (CSS sucks.) --[[Joey]]

[[!tag done wishlist]]