Формы

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

Чтобы получать информацию от посетителей, вы добавили поля к своей форме. Возможно, вы пользуетесь программой дизайна, такой как 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, имеют шаблоны для изображений кнопок.