Как вы уже знаете, веб-клиент имеет возможность передавать веб-серверу различную информацию при помощи GET и POST-запросов. HTML-формы - это основной инструмент для создания таких запросов. По сути, HTML-форма представляет собой поле или поля для ввода информации на веб-странице. Наглядным примером HTML-формы служит форма ввода логина и пароля для авторизации на сайте.
HTML-форма описывается с помощью парного тега form . Этот тег имеет два важнейших атрибута: method и action . В атрибуте method задается тип HTTP-запроса (get или post), в action - запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:
<form method = "get" action = "/login.php" > ... </ form >Существует несколько различных видов элементов для ввода данных, которые помещаются внутри формы. Элемент, с которого я хотел бы начать, называется submit :
<input type = "submit" value = "Войти" / >Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут value задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты name . Например:
<form method = "get" action = "/control.php" > <input type = "submit" name = "submit" value = "Add" / > <input type = "submit" name = "submit" value = "Edit" / > </ form >При формировании запроса веб-браузер включит HTTP-параметр, характеризующий нажатый элемент submit. В качестве имени параметра будет взято значение атрибута name нажатой кнопки, в качестве значения - значение атрибута value. Таким образом, при нажатии кнопки Add будет сформирован запрос:
/control.php?submit=Add
а при нажатии кнопки Edit:
/control.php?submit=Edit
Следующий элемент представляет собой простейший элемент для ввода однострокового текста. Его HTML-код:
<input type = "text" name = "name" / >name - обязательный атрибут для участия в HTTP-запросе. Значение этого атрибута будет использовано в качестве имени HTTP-параметра. Этот атрибут имеется у всех типов элементов форм.
Элементу можно также задать атрибут value, указав в нем текст, который по-умолчанию будет введен в элементе. Например:
<input type = "text" name = "login" value = "Имя пользователя" / >Элемент password служит для ввода паролей. Внешне он такой же, но введенный текст отображается в виде звездочек или точек:
<input type = "password" / >Этого, в принципе, достаточно для создания простейшей формы авторизации. Давайте попробуем ее реализовать, а затем вернемся к рассмотрению остальных типов элементов.
Создадим файл auth.php в корневом каталоге со следующим содержимым:
<html xmlns= "http://www.w3.org/1999/xhtml" > <head > <title > Авторизация</ title > <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" / > </ head > <body > <form method = "get" action = "/auth.php" > <table > <tr > <td > Имя пользователя:</ td > <td > <input type = "text" name = "login" value = "" / > </ td > </ tr > <tr > <td > Пароль:</ td > <td > <input type = "password" name = "pass" value = "" / > </ td > </ tr > </ table > <input type = "submit" value = "Войти" / > </ form > </ body > </ html >Как видите, внутри тега form можно размещать теги, помогающие красиво разметить форму (я внутрь поместил таблицу). Форма содержит поля для ввода имени пользователя и пароля с именами login и pass соответственно. При нажатии "Войти" формируется GET-запрос документа /auth.php (то есть, страница запрашивает саму себя). В моем случае полный URL страницы имел вид http://test-domain3/auth.php .
Введите данные и нажмите "Войти". Страница должна перезагрузиться. Должен также измениться и адрес страницы. В моем случае он принял вид:
Http://test-domain3/auth.php?login=Joker-jar&pass=12345
Это означает, что документ auth.php был запрошен с GET-параметрами, которые были введены с помощью HTML-формы. Поместите в начало файла auth.php PHP-обработчик, который будет принимать данные для авторизации:
//--Проверяем, были ли переданы данные if ( isset ($_GET [ "login" ] ) && isset ($_GET [ "pass" ] ) ) { echo "Ваше имя пользователя: " . $_GET [ "login" ] . ", ваш пароль: " . $_GET [ "pass" ] ; exit ; } ?>Если странице были переданы логин и пароль, условие сработает и сообщение будет выведено. Также будет вызван exit , который прекратит дальнейшее выполнение скрипта, следовательно форма выведена не будет.
Передавать пароль с помощью GET-запроса небезопасно, так как он виден в адресной строке. Сменим тип запроса на POST. Для этого изменим значение атрибута method, а в PHP-обработчике обращения к массиву $_GET изменим на $_POST. Проверьте работоспособность скрипта.
Следующий элемент - флажок . Его применяют, когда от пользователя необходим ответ вида "да/нет":
<input type = "checkbox" / >Если флажок не отмечен, в параметрах ничего не передается. Иначе передается параметр name со значением on . Есть еще один момент. Как правило, рядом с флажком присутствует поясняющая надпись. Хорошим тоном является реализация веб-мастером реакции флажка на клики по этой надписи. Делается это просто. Флажку присваивается определенный id, а сама надпись оформляется тегом label с атрибутом for , значение которого равно идентификатору флажка:
<input type = "checkbox" id = "remember" name = "remember" / > <label for = "remember" > Запомнить меня</ label >Похожий элемент используется для выбора ответа из набора значений. Допустим, пользователю необходимо выбрать один из трех цветов:
<input type = "radio" id = "red" name = "color" value = "red" / > <label for = "red" > Красный</ label > <br / > <input type = "radio" id = "green" name = "color" value = "green" / > <label for = "green" > Зеленый</ label > <br / > <input type = "radio" id = "blue" name = "color" value = "blue" / > <label for = "blue" > Синий</ label > <br / >Обратите внимание, что у всех элементов одинаковое значение name. Можно выбрать только одно значение. В HTTP-параметра передастся value выбранного элемента, например color=blue .
Чтобы изначально был выбран какой-то из элементов, например, первый, ему нужно задать атрибут checked со значением checked (стандарт XHTML):
<input type = "radio" id = "red" name = "color" value = "red" checked = "checked" / >Для ввода большого многострочного текста существует специальный элемент textarea :
<textarea rows = "6" cols = "20" name = "text" > Текст внутри элемента</ textarea >Текст внутри элемента
Этот элемент, как видите, отличается от предыдущих. Он представляет собой парный тег, а текст помещается не в атрибут, а в тело тега. У элемента также есть атрибут name. При помощи атрибута rows можно задать количество строк в элементе, cols - количество символов в строке. Элемент textarea используется, как правило, в POST-формах, т.к. предполагает ввод длинного текста (например, форма сообщения на форуме).
Выпадающий список. Наверняка сталкивались с таким элементом в программах. Позволяет выбрать одно значение из набора. Код элемента также не совсем обычен. Сначала создается элемент-контейнер select , ему задается атрибут name:
<select name = "towns" > </ select >Внутрь контейнера помещаются элементы списка. Элемент списка представляет собой парный тег option , каждому элементу задается атрибут value. В тело элемента прописывается надпись элемента:
<select name = "town" > <option value = "msk" > Москва</ option > <option value = "vlad" > Владивосток</ option > <option value = "nsk" > Новосибирск</ option > </ select >В HTTP-запросе передается параметр с именем name и значением value выбранного элемента, например town=vlad . По умолчанию выбран первый элемент списка, если хотите, чтобы был выбран другой элемент, задайте ему атрибут selected со значением selected :
<option value = "vlad" selected = "selected" > Владивосток</ option >Список значений. Если элементу select задать атрибут size с числовым значением, выпадающий список превратится в список значений. При этом значение атрибута size будет определять вертикальный размер элемента:
<select name = "town" size = "3" > <option value = "msk" > Москва</ option > <option value = "vlad" > Владивосток</ option > <option value = "nsk" > Новосибирск</ option > </ select >Москва Владивосток Новосибирск
Если элементу select задать атрибут multiple со значением multiple (стандарт XHTML), то появится возможность выбирать более одного элемента одновременно (например, с зажатой клавишей Ctrl). В этом случае в HTTP-запросе будут переданы все выбранные элементы с одинаковыми именами, например: town=msk&town=vlad&town=nsk .
Иногда необходимо в HTTP-запросе передать параметр, который пользователь не должен редактировать, а порой даже и видеть. Допустим, вы реализуете форму редактирования новости. В HTTP-запросе необходимо передавать идентификатор этой новости. Для подобных случаев есть скрытый элемент HTML-форм:
<input type = "hidden" name = "param" value = "" / >Этот элемент не будет виден на форме, но при выполнении запроса будет передан HTTP-параметр name=value.
Иногда может пригодиться элемент, очищающий форму. Кнопка, при нажатии на которую все введенные пользователем данные на форме стираются:
<input type = "reset" value = "Очистить" / >Перечисленные элементы имеют два специальных атрибута:
readonly="readonly" - запрещает изменение информации в элементе (режим "только для чтения);
disabled="disabled" - делает элемент неактивным.
Существует также элемент для выбора файла, который при сабмите формы будет загружен на веб-сервер, но об этом, пожалуй, в отдельной статье.
Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.
Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.
In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.
registration.html
HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и