doc/todo/Add_label_to_search_form_input_field.mdwn

   1 The default searchform.tmpl looks rather bare and unintuitive with just an input field.
   2
   3 The patch below adds a label for the field to improve usability:
   4
   5     --- templates/searchform.tmpl.orig  Fri Jun 15 15:02:34 2007
   6     +++ templates/searchform.tmpl       Fri Jun 15 15:02:41 2007
   7     @@ -1,5 +1,6 @@
   8      <form method="get" action="<TMPL_VAR SEARCHACTION>" id="searchform">
   9      <div>
  10     +<label for="phrase">Search:</label>
  11      <input type="text" name="phrase" value="" size="16" />
  12      <input type="hidden" name="enc" value="UTF-8" />
  13      <input type="hidden" name="do" value="hyperestraier" />
  14
  15 > I don't do this by default because putting in the label feels to me make
  16 > the action bar too wide. YMMV. What I'd really like to do is make the
  17 > _content_ of the search field say "search". You see that on some other
  18 > sites, but so far the only way I've seen to do it is by inserting a
  19 > nasty lump of javascript. --[[Joey]]
  20
  21 >> Please don't do that, it is a bad idea on so many levels :) See e.g.
  22 >> <http://universalusability.com/access_by_design/forms/auto.html> for
  23 >> an explanation why. --[[HenrikBrixAndersen]]
  24
  25 >>> If you really want to do this, this is one way:
  26
  27     --- searchform.tmpl.orig        Sat Aug 25 11:54:28 2007
  28     +++ searchform.tmpl     Sat Aug 25 11:56:19 2007
  29     @@ -1,6 +1,6 @@
  30      <form method="get" action="<TMPL_VAR SEARCHACTION>" id="searchform">
  31      <div>
  32     -<input type="text" name="phrase" value="" size="16" />
  33     +<input type="text" name="phrase" value="Search" size="16" onfocus="this.value=''" />
  34      <input type="hidden" name="enc" value="UTF-8" />
  35      <input type="hidden" name="do" value="hyperestraier" />
  36      </div>
  37
  38 > That's both nasty javascript and fails if javascript is disabled. :-)
  39 > What I'd really like is a proper search label that appears above the
  40 > input box. There is free whitespace there, except for pages with very
  41 > long titles. Would someone like to figure out the CSS to make that
  42 > happen?
  43 >
  44 > The tricky thing is that the actual html for the form needs to
  45 > still come after the page title, not before it. Because the first thing
  46 > a non-css browser should show is the page title. But the only way I know
  47 > to get it to appear higher up is to put it first, or to use Evil absolute
  48 > positioning. (CSS sucks.) --[[Joey]]
  49
  50 > Update: html5 allows just adding `placeholder="Search"` to the input
  51 > element. already works in eg, chromium. However, ikiwiki does not use
  52 > html5 yet. --[[Joey]]
  53
  54 >> [[Done]], placeholder added, in html5 mode only.
  55
  56 [[!tag wishlist bugs/html5_support]]