Опубликован: 06.10.2006 | Доступ: свободный | Студентов: 4469 / 488 | Оценка: 3.94 / 3.86 | Длительность: 24:58:00
Лекция 18:

Формы

Аннотация: В данной лекции рассказывается об одном из самых важных механизмов, с помощью которого можно придать Web-странице интерактивность. Описываются возможные проблемы, связанные с использованием форм, даются рекомендации по их решению.

Форма размещается неверно

Чтобы получать информацию от посетителей, вы добавили поля к своей форме. Возможно, вы пользуетесь программой дизайна, такой как FrontPage, или создали форму в HTML, используя тэги <FORM>, <INPUT> и <SELECT>, но при предварительном просмотре поля не выровнены и выглядят неряшливо.

Чтобы привести форму в порядок, есть две возможности. Первая – использовать преформатированный текст (preformatted text), с которым броузер использует моношириные шрифты, показывает разбивку и разрывы строки в точности так, как показано в вашем HTML. (Обычно броузеры сливают множественные пробелы или разрывы строки в один пробел.) Вторая возможность – использовать таблицу, контролирующую размещение элементов в вашей форме. В любом случае вам придется отрегулировать размеры полей, чтобы подравнять форму. Если форма не выглядит должным образом, cделайте следующее.

  1. Отрегулируйте ширину текстовых полей, так чтобы одинаковые поля имели одинаковый размер. В тэгах <INPUT> укажите атрибут size.

    <input type="text"name="realname"size="34">
    <input type="text"name="email"size="34">

    Если вы используете FrontPage, щелкните на каждом поле и отрегулируйте размер вручную.

  2. Чтобы упорядочить вашу форму, используйте один из следующих методов.
Поскольку Internet Explorer и Netscape определяют размер текстовых полей по-разному, протестируйте форму в обоих броузерах. Если поля не совсем подходят по размеру, см. раздел "Текстовые поля имеют разную ширину в разных броузерах".

Использование преформатированного текста

Простейший способ выравнивания текста в форме – использовать тэг <PRE>, чтобы отобразить разбивку в точности как в вашем HTML. Броузер использует моноширинный шрифт, такой как Courier, таким образом каждый символ или пробел занимают одинаковую ширину на странице.

  1. В HTML поместите содержимое формы в блок <PRE>. (Во FrontPage выберите содержимое формы и затем выделите Formatted в окошке Style в левой части панели Formatting.)
  2. Добавьте пробелы и разрывы строк между текстом и тэгами <INPUT>, чтобы выровнять элементы.

Использование таблицы

Если вы не хотите использовать моноширинные шрифты, используйте таблицу для точного выравнивания элементов.

  1. Внутри блока <FORM> создайте таблицу не меньше чем с двумя столбцами – один для подписей к полям, другой для самих полей – по строке на каждое поле.
  2. Переместите ваш текст и тэги <INPUT> внутрь тэгов <TD>. (Во FrontPage выделите и перетащите текст и поля в нужные ячейки.)
  3. Для каждого тэга <TD>, содержащего заголовок поля, используйте align="right", чтобы выравнять заголовки с полями в следующем столбце. (Во FrontPage выделите ячейки и нажмите Align Right на панели Formatting.)
  4. Чтобы отрегулировать разбивку между полями, установите атрибут cellpadding в тэге <TABLE>. (Во FrontPage щелкните правой кнопкой по таблице, нажмите Table Properties и введите значение в окно Cell Padding.) Вот на что должен быть похож ваш HTML:

    <H2 align=center>Argus the Answer Dog</H2>
    <form method="POST"action="argus.cgi">
      <table border=0 cellpadding=5>
        <tr>
          <td align=right><b>Your name:</b></td>
          <td><input type="text"name="name" size=34></td>
        </tr>
        <tr>
          <td align=right><b>Your email:</b></td>
          <td><input type="text"name="email" size=34></td>
        </tr>
        <tr>
          <td align=right><b>Your question:</b></td>
          <td><textarea name="question"rows=3 cols=29></textarea></td>
        </tr>
        <tr>
          <td align=center colspan=2>
          <input type="image"src="argusbtn.gif"width=94 height=94></td>
        </tr>
      </table>
    </form>
Если вам не нравится, как на вашей странице выглядит стандартная кнопка Submit (Отправить), используйте свое изображение. В тэге <INPUT> установите type="image" и присвойте атрибуту src название файла с изображением. В FrontPage укажите Form в меню Insert и нажмите Picture. Некоторые графические редакторы, такие как Fireworks, имеют шаблоны для изображений кнопок.