Ajax Russia : Аякс по-русски

Формы для поиска есть пожалуй на любом вэб сайте, но в большинстве случаев они очень скучные и похожи друг на друга. Мне нравится когда html формы чем то отличаются от других. Поэтому сегодня я хочу представить вашему вниманию туториал от Брайана Рэйндэла.

Для туториала нам потребуется две картинки и несколько минут свободного времени.

1. HTML Markup
   Тут мы создаём DIV контейнер, в котором будет наша форма.
   PLAIN TEXT
   HTML:

   1. <div id="search_box">
   2. <form id="search_form" method="post" action="/">
   3. <input type="text" id="s" value="Search" class="swap_value" />
   4. <input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
   5. </form>
   6. </div>

2. Добавляем CSS
   PLAIN TEXT
   CSS:

   1. #search_box {
   2. width: 201px;
   3. height: 31px;
   4. background: url(bg_search_box.gif);
   5. }
   6. #search_box #s {
   7. float: left;
   8. padding: 0;
   9. margin: 6px 0 0 6px;
   10. border: 0;
   11. width: 159px;
   12. background: none;
   13. }
   14. #search_box #go {
   15. float: right;
   16. margin: 3px 4px 0 0;
   17. }

И - пожалуйста, форма для поиска готова: