Главная страница


Как создать HTML-формы

 В статье "Как самому создать сайт" мы рассмотрели общие правила написания кода на языке HTML, задание цвета, размера шрифта, вставку графических изображений, создание ссылок, построение таблицы, порядок редактирования HTML-файлов с помощью Блокнота.
 Сегодня будем изучать HTML-формы. С формами сталкивались все пользователи. Вам приходилось заполнять анкеты, вводить пароли, оставлять комментарии. Вы всё это делали с помощью форм. Обычно информация в Интернете передаётся с сервера на компьютер пользователя: вы загружаете разные страницы, что-то скачиваете. Похоже на просмотр телевизионных программ. И только с помощью форм весь процесс можно повернуть вспять. Допустим, вы читаете статью. Статья с сервера загрузилась на ваш компьютер. А, если напишите комментарий, то теперь, наоборот, он с вашего компьютера загрузится на сервер.
 Ну, а теперь приступим к изучению кода для создания форм. Ниже написан код формы из 10 строк. Скопируйте его в Блокнот и сохраните под именем form1.html



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
form1.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


<HTML>
<HEAD><META
http-equiv="Content-Type" content="text/html" charset="windows-1251"></HEAD>
<BODY>

<FORM
name="my_form" method="GET" action="http://novosibirsk.cc/help/form/form1.php">

Как вас зовут?
<INPUT type="text" name="first_name" size=12 maxlength=15 value="Введите имя">

<INPUT type="submit" name="start" value="OK">

</FORM>

</BODY>
</HTML>



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 Щёлкните по файлу form1.html дважды левой кнопкой мыши. Перед вами появится форма. Заполните текстовое поле и нажмите кнопку "OK". Вот, вы и передали информацию на сервер. Теперь смотрим на код. Форма задаётся контейнером <FORM>. Контейнер - это открывающий тег <FORM>, закрывающий тег </FORM>, и всё остальное, что находится между ними. Контейнер <FORM> можно располагать в любой части тела документа <BODY>. Можно вставить в ячейку таблицы, и т. д. Тег <FORM> имеет атрибуты: name, method, action.

name - имя формы. Произвольное имя, задаётся программистом. name="my_form"
method - метод передачи информации. Бывают GET или POST. Потом расскажу, в чём разница. method="GET"
action - URL-адрес, на который будут отправлены данные из формы. action="http://novosibirsk.cc/help/form/form1.php"

 где
novosibirsk.cc - доменное имя сайта,
help - название папки,
form - название ещё одной вложенной папки,
form1.php - имя файла, который будет принимать, и обрабатывать данные из формы.

Можно ещё добавить атрибут enctype (тип кодировки). Если не указали, браузер по умолчанию назначит сам.

 Переходим к содержимому контейнера. В него вставляются элементы управления <INPUT>. Каждый элемент имеет свои атрибуты. В нашей форме 2 элемента управления: текстовое поле и кнопка.

 Рассмотрим атрибуты текстового поля.
type - тип элемента управления. type="text" text - однострочное текстовое поле.
name- имя элемента управления. Произвольное имя, задаётся программистом. name="first_name"
size - размер текстового поля, задаётся программистом. size=12 Размер: 12 символов.
maxlength - максимально допустимая длина текста, задаётся программистом. maxlength=15
Допустим, ввели имя из 14 символов. Первые 2 символа выйдут за рамки поля, но не удалятся. А, вот, имя из 16 символов будет ввести невозможно.
value - значение элемента управления. Значение бывает начальное и конечное. Начальное значение задаёт программист. value="Введите имя" При открытии формы оно сразу выводится в текстовом поле. Если написать value="" , тогда поле будет чистым. Конечное значение задаёт пользователь. То, что он напечатает, будет являться конечным значением value. Оно и будет передаваться на сервер.

 Атрибуты кнопки.
type - тип элемента управления. type="submit" submit - кнопка подачи запроса.
name- имя элемента управления. Произвольное имя, задаётся программистом. name="start"
value - значение элемента управления. value="OK" Проще говоря, это надпись на кнопке.

 Итак, как работает форма? Пользователь заполняет поле. В одной форме может быть несколько полей. Например: логин и пароль. Или даже целая анкета. Всё заполнили. Но пока ничего не происходит. Процесс "закипает" при нажатии на кнопку. В адресную строку браузера переносится содержимое атрибута формы action. После знака "?" туда же записываются в паре атрибуты элементов управления name=value. В нашем случае к URL-адресу http://novosibirsk.cc/help/form/form1.php будет через знак "?" добавлено first_name=%C2%E2%E5%E4&start=OK
 где

first_name - имя текстового поля в нашем коде,
%D1%E0%F8%E0 - содержимое текстового поля (русские буквы из формы передаются в закодированном виде, предположим, пользователь ввёл "Саша").
& - and (и),
start - имя кнопки,
OK - надпись на кнопке.

 Затем происходит соединение с сервером, где размещён файл form1.php. Файл принимает данные, которые стоят после знака "вопрос", обрабатывает их и выводит на экран. Вспомните, как работает ссылка. При нажатии на текст ссылки мы тоже перемещаемся по указанному адресу, но "с пустыми руками", а здесь ещё и со своими данными.

 Теперь проведём эксперимент. Допустим, через форму передали имя "Николай". Вот что, мы видим:



 А сейчас в адресной строке браузера измените имя.



 Теперь нажмите кнопку перехода или клавишу "Enter".



 Мы в обход формы передали на сервер искажённую информацию.



 Можно также обрубить в адресной строке все атрибуты, и сервер не получит данных. Здесь зарыты большие возможности для злоумышленников. А, что же делать законопослушному гражданину? Ему надо использовать метод передачи данных POST. А мы применили метод GET. Вот, откуда возникло всё это безобразие. Попробуйте в коде изменить метод передачи данных. Данные методом POST передаются в закрытом виде. Их невозможно увидеть, а, следовательно, и невозможно туда вмешаться. Вывод такой: если вы имеете дело с вводом паролей, перечислением денег, передачей конфиденциальной информации, используйте только метод POST.

 Итак, если вы разобрались с первой формой, давайте перейдём ко второй. Скопируйте расположенный ниже код в Блокнот, и сохраните под именем form2.html Запустите файл form2.html, поработайте с формой, и переходите к изучению её кода.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
form2.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


<HTML>
<HEAD><META
http-equiv="Content-Type" content="text/html" charset="windows-1251"></HEAD>
<BODY
bgcolor=FFFFE0>

<H1>
Учебная анкета</H1> <BR>

<FORM
name="my_form" method="GET" action="http://novosibirsk.cc/help/form/form2.php">

Фамилия
<INPUT type="text" name="family_name" size=6 maxlength=20 value=""> <BR><BR>

Имя
<INPUT type="text" name="first_name" size=12 maxlength=20 value="Имя"> <BR><BR>

Пароль
<INPUT type="password" name="password1" size=15 maxlength=15 value=""> <BR><BR>

Ваш отзыв об этой статье <BR>
<TEXTAREA
name="comment" cols=70 rows=6 wrap="physical" maxlength=420> </TEXTAREA> <BR><BR>

Что вы читаете? <BR>
<INPUT
type="checkbox" name="read_0" checked > Газеты <BR>
<INPUT
type="checkbox" name="read_1" > Журналы <BR>
<INPUT
type="checkbox" name="read_2" > Художественную литературу <BR>
<INPUT
type="checkbox" name="read_3" checked > Учебники <BR>
<INPUT
type="checkbox" name="read_4" > Объявления на заборе <BR><BR>

Ваш возраст <BR>
<INPUT
type="radio" name="age" checked value="before_20">до 20 лет <BR>
<INPUT
type="radio" name="age" value="20_40"> от 20 до 40 <BR>
<INPUT
type="radio" name="age" value="after_40"> старше 40 <BR><BR>

На каком языке программирования написан этот файл? <BR>
<SELECT
name="language">
<OPTION
value="0">PHP
<OPTION value="1">HTML
<OPTION value="2">MySQL
</SELECT> <BR><BR>

В каком городе вы хотели бы жить? <BR>
<SELECT
name="city" size="5">
<OPTION
value="0">Москва
<OPTION value="1">Санкт-Петербург
<OPTION value="2">Сочи
<OPTION value="3">Владивосток
<OPTION value="4">Калининград
</SELECT> <BR><BR>

<INPUT
type="submit" name="send" value="Отправить">
<INPUT
type="reset" name="cancel" value="Отменить">

</FORM>

<BR><BR><BR><BR>

<H1>
Отправка файлов на сервер</H1> <BR>

<FORM
name="form1" method="POST" enctype="multipart/form-data" action="http://novosibirsk.cc/help/form/form3.php">
Нажмите кнопку "Обзор" для выбора файла:
<INPUT type="file" name="myfile"> <BR><BR>
<INPUT
type="submit" name="start" value="Отправить файл"> <BR><BR>

</FORM>

</BODY>
</HTML>



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 Здесь в одной форме мы собрали все распространённые элементы управления. В каждом элементе должны присутствовать атрибуты name и value. Потому что на сервер передаются именно эти пары name=value. Напоминаю, что значение name произвольное, и придумывает его программист. А за конечное значение value решение принимает пользователь.

 Первые 2 элемента - однострочные текстовые поля (text). type="text" Мы их подробно рассмотрели в первом примере. Область применения: фамилии, имена, почтовые адреса, адреса электронной почты, номера телефонов, а также ввод другой информации, где достаточно одной строки.

 Затем идёт поле ввода пароля (password). Его тип type="password" По своей структуре оно похоже на текстовое поле. Только введённые символы отображаются звёздочками.

 Многострочное текстовое поле (textarea). Предназначено для больших текстов, таких как инструкции, реквизиты, комментарии и т. д. Состоит из двух тегов <TEXTAREA> и </TEXTAREA>. Атрибут value в явном виде отсутствует, но это не значит, что его нет совсем. Между тегами <TEXTAREA> и </TEXTAREA> можно вставить текст, который и будет являться начальным значением value. Атрибуты cols и rows - ширина и высота поля в символах. Атрибут переноса слов wrap. wrap="physical" (Сохраняется перенос слов).

 Флажки (checkbox). type="checkbox" У всех флажков должны быть разные имена. Атрибута value здесь нет, хотя можно было написать. Вы спросите: а, что же тогда будет передаваться на сервер? Браузер создаст его сам. В тех элементах, где выставлены флажки, он сделает value="on" Вообще браузеры многое чего домысливают за программистов. Но у каждого из них свой "интеллект". Если Internet Explorer может обойтись без многих тегов и атрибутов, то некоторые будут тупо выполнять только то, что написано в программе. Поэтому не сокращайте код. И, если создаёте сайт, предварительно протестируйте файлы в разных браузерах. Атрибут checked - начальное положение флажка. Мы 2 флажка установили по умолчанию. Но пользователь может их сбросить, и сделать всё по-своему.

 Переключатели (radio). type="radio" Наш переключатель состоит из 3 элементов. Обратите внимание: все элементы имеют одинаковые имена. name="age" Если этого не сделать, все 3 элемента будут работать вразнобой. Также имеется атрибут начального положения checked. Это необязательный атрибут - его можно не применять.

 Списки (select). Первый - раскрывающийся список, а второй - поле-список. Пишутся одинаково, только в поле-список добавляется атрибут size (количество строк). size="5" Обратите внимание на атрибут value. Например, при выборе города Сочи, на сервер пойдёт не название города, а двойка.

 Кнопки. Кнопка submit предназначена для запуска процедуры передачи данных на сервер. Кнопка reset - для приведения формы в начальное положение (сброс всех введённых данных).

 Ниже написана ещё одна маленькая форма для передачи файлов на сервер. С помощью её обычно передают фотографии. Тип элемента type="file" Обязательные условия здесь: метод POST и формат кодировки enctype="multipart/form-data".

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

  На этом у меня всё. До свидания.