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

Давайте создадим для 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.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: