|
В статье "Как самому создать сайт" мы рассмотрели общие правила написания кода на языке HTML, задание цвета, размера шрифта, вставку графических изображений, создание ссылок,
построение таблицы, порядок редактирования HTML-файлов с помощью Блокнота. Сегодня будем изучать HTML-формы. С формами сталкивались все пользователи. Вам приходилось заполнять анкеты, вводить пароли, оставлять комментарии. Вы всё это делали с помощью форм. Обычно информация в Интернете передаётся с сервера на компьютер пользователя: вы загружаете разные страницы, что-то скачиваете. Похоже на просмотр телевизионных программ. И только с помощью форм весь процесс можно повернуть вспять. Допустим, вы читаете статью. Статья с сервера загрузилась на ваш компьютер. А, если напишите комментарий, то теперь, наоборот, он с вашего компьютера загрузится на сервер. Ну, а теперь приступим к изучению кода для создания форм. Ниже написан код формы из 10 строк. Скопируйте его в Блокнот и сохраните под именем form1.html |
 |
|
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <HTML> <HEAD><META http-equiv="Content-Type" content="text/html" charset="windows-1251"></HEAD> <BODY> <FORM name="my_form" method="GET" action="https://wsw.su/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="https://wsw.su/help/form/form1.php" где wsw.su - доменное имя сайта, 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-адресу https://wsw.su/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, поработайте с формой, и переходите к изучению её кода. ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <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://wsw.su/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://wsw.su/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. На этом у меня всё. До свидания. |