Поиск

Создание простой формы

Давайте создадим для HTMLформы страницу, где пользователи будут фикси ровать свое имя, фамилию, адрес электронной почты и давать произвольный комментарий. Для этого в экранной форме нужно создать необходимые поля и соответствующие им переменные.

Создание HTMLформы

  1. Откройте текстовый редактор и создайте новый документ. <HTMLxHEADxTITLE>HTML Form</TITLEx/HEAD><BODYx/BODY></HTML>
  2. В тело программы добавьте открывающий и закрывающий тэги для экран ной формы (листинг 3.1). <FORM ACTION="HandleForm.php"> </FORM>.
  3. Тэги <FORM> задают начало и конец формы. Все элементы формы должны быть размещены между ними. Атрибут ACTION сообщает серверу, какая страни ца (или сценарий) получит данные из формы.

    Листинг 3.1 т Каждая HTMLформа начинается и заканчивается тэгами <FORM> и </FORM>. He забывайте использовать их. Также помните, что необхо димо отправлять форму для обработки в соответствующий сценарий с помо щью атрибута ACTION.

    1. <HTML>
    2. <HEAD>
    3. <TITLE>HTML Form</TITLE>
    4. </HEAD>
    5. <BODY>
    6. <PORM ACTION = "HandlePorm.php">
    7. </PORM>
    8. </BODY>
    9. </HTML>
  4. Сохраните страницу как form.html.
  5. Вставьте курсор между тэгами <FORM> и нажмите клавишу Enter для созда ния новой строки.
  6. Теперь начнем добавлять в форму поля:
  7. First Name <INPUT TYPE=TEXT NAME="FirstName" SIZE=20xBR> Будьте последовательны и присвойте каждому полю в форме логическое и наглядное имя. Для имени используются буквы, числа и символ подчеркива ния (_). При работе внимательно следите за именами полей.

    Last Name <INPUT TYPE=TEXT NAME="LastName" SI2E=40xBR>
    Добавьте тэги <BR>, чтобы форма выглядела более аккуратно в окне браузера.
    Email Address <INPUT TYPE=TEXT NAME="Email" SIZE=60xBR>
    Comments <TEXTAREA NAME ="Comments" ROWS=5 COLS=40x/TEXTAREAxBR>

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

  8. На отдельной строке напечатайте новую строку
  9. <INPUT TYPE=SUBMIT NAME="SUBMIT" VALUE="Submit!">

    Значение типа SUBMIT это надпись на кнопке в окне браузера. Также мож но использовать кнопки Go! или Enter.

  10. Сохраните сценарий (листинг 3.2), загрузите его на сервер и просмотри те в окне браузера (рис). Так как это обычная страница, а не PHPсце нарий, ее можно увидеть и без сервера, в окне браузера прямо на вашем компьютере.

Листинг 3.2 т Разрешается использовать любую комбинацию полей ввода в форме, главное, чтобы все они были определены внутри тэгов <FORM>, иначе не будут работать. Представленная в виде таблицы форма удобна в использова нии и выглядит профессионально.

1. <HTML>
2. <HEAD>
3. <TITLE>HTML Fbrm</TITLE>
4. </HEAD>
5. <BODY>
6. <FORM ACTION="HandleForm.php"> ' •
7. First Name <INPDT TYPE=TEXT NAME="FirstNaae" SIZE=20xBR>
8. Last Name <INPUT TYPE=TEXT NAME="LastName" SIZE=40xBR>
9. Email Address <INPTJT TYPE=TEXT NAME="Email" SIZE=60xBR>
10. Comments <TEXTAREA NAME= "Comments" ROWS=5 COLS=40x/TEXTAREAxBR>
11. <INPUT TYPE=SOBMIT NAME="SUBMIT" VALUE="Submit!">
12. </FORM>
13. </BODY>
14. </HTML>

В данном примере мы создали форму, вручную написав HTMLкод. Можно делать то же самое в специальных HTMLредакторах, таких как Dreamweaver или GoLive, если вам это больше нравится.

Мы использовали стандартное расширение HTML (.html), так как создавали обыч ную HTMLстраницу. Можно было применить расширение .php и получить тот же ре зультат, хотя сам язык и не был бы использован. Напоминаю, что на РНРстранице все, что не ограничено PHPтэгами <?php и ?>, трактуется как обычный код HTML

Хотя мы и не рассматривали этот вопрос, я все же порекомендовал бы использо вать в формах, особенно сложных, кнопку Reset. Создать ее можно следующим образом:

<INPUT TYPE=RESET NAME=RESET VALUE="RESET">

Убедитесь, что атрибут ACTION правильно указывает на существующий на серве ре файл, иначе форма не будет обработана. В нашем случае мы определяем, что файл HandleForm.php находится в одном каталоге со страницей form.html.