1 2Формы
Формы HTML предназначены для организации взаимодействия с пользователем.
Формы позволяют вводить текст, осуществлять выбор из предложенных значений при помощи списков или кнопок. С помощью форм можно организовать интерактивный обмен информацией между Web-страницей и сервером. Можно определить формы как электронные бланки для заполнения различных данных таких как, например, имя, возраст, выбор страны проживания и других. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию.
Примеры форм
Форма поиска
Одна из наиболее распространенных форм. Пользователь получает возможность ввести искомый запрос, определить область поиска и отправить запрос на сервер для обработки.
<form name="input" action="html_form_action.asp" method="get">
<table border=1 bgcolor="#ddffdd">
<tr>
<td align="center">
<input type="text" name="search" size="50" value="Строка для поиска">
<input type="submit" value="Поиск">
<br>
<input type="checkbox" name="news">Искать в новостях
<input type="checkbox" name="arhive">Искать в архивах
</td>
</tr>
</table>
</form>
Форма является областью, которая может содержать элементы, позволяющие пользователю вводить информацию (такие как текстовые поля, поля многострочного текста, раскрывающиеся меню, переключатели, флажки, и т.д.).
Форма определяется с помощью тегов <form></form>, между которыми располагаются поля ввода, кнопки, а также все необходимые элементы оформления формы.
Тег <form> имеет ряд атрибутов, из которых необходимо выделить атрибуты action и method. Без этих атрибутов форма не сможет передать информацию от пользователя на сервер.
<form action="html_form_action.asp" method=get>
Атрибут Action указывает URL-адрес объекта, который должен получить данные формы.
Атрибут method может иметь два значения: get и post.
Значение атрибута method=get заставляет Web-браузер передать все данные формуляра по URL-адресу, заданному в action. При этом введенные при заполнении формы данные просто добавляются в адресную строку с использованием разделителя – знака вопроса. Этот метод удобен для небольших форм.
Значение атрибута method=post заставляет Web-браузер, прежде всего, связаться
с сервером, обрабатывающим форму, и только после установки связи приступить
к передаче данных, для обработки которых будут использоваться специальные
сценарии.
Поля ввода
Большинство элементов ввода и управления в форме можно описать при помощи тега <input>, обязательными для которого являются атрибуты name (приписывает данному элементу ввода уникальное имя, использующееся для дальнейшей обработки формы) и type (определяет тип элемента управления или ввода).
Текстовые поля
Текстовое поле (type=text) определяет однострочное поле ввода и используется, когда необходимо, чтобы пользователь ввел в форму данные в произвольной форме но ограниченные по объему (слова, словосочетания, числа и т.д.).Следующий пример демонстрирует простейшую форму для ввода имени и фамилии.
<html>
<body>
<form>
Имя:
<input type="text" name="firstname">
<br>
Фамилия:
<input type="text" name="lastname">
</form>
</body>
</html>
Здесь необходимо отметить, что атрибут size ограничивает только видимую область ввода данных, а не длину вводимой строки. Для этой цели используется атрибут maxlength.
Необходимо отметить, что применение атрибутов для различных типов полей вывода и управления может отличаться. Так, например, атрибут size для текстовых полей ввода (type="text" или type="password") указывает максимальное количество символов, отображаемых в поле, а для прочих элементов – занимаемый по горизонтали размер в пикселях.
Поле пароля
Поле пароля (type=password) создает защищенное поле ввода, которое дает возможность пользователю, заполняющему форму ввести текст, но в отличие от обычного текстового поля, вводимые данные при отображении на мониторе заменяются звездочками или точками.
Следующий пример демонстрирует простейшую форму для ввода имени пользователя и пароля.
<form>
Имя пользователя:
<input type="text" name="user" value="Елена">
<br>
Пароль:
<input type="password" name="password" value="tktyf">
</form>
</body>
</html>
Необходимо обратить внимание, что хотя значение пароля и задано по умолчанию, при отображении браузер выводит вместо символов звездочки.
Переключатели
Переключатели или радиокнопки (type=radio) определяют поля выбора одного значения из нескольких доступных. Поля этого типа часто используются в диалоговых окнах. Для каждой позиции переключателя создается свой тег <input type=radio>. Группируются переключатели при помощи одинакового имени, задаваемого атрибутом name.
<html>
<body>
<form>
Укажите Ваш пол:
<br>
<input type="radio" name="sex" value="male"> мужчина
<br>
<input type="radio" name="sex" value="female"> женщина
</form>
</body>
</html>
Необходимо отметить, что в отличие от текстового поля и поля пароля атрибут value задает значение, которое будет передано серверу для дальнейшей обработки в случае выбора данного переключателя. Для выбора по умолчанию одного из возможных значений группы переключателей используется атрибут checked.
<html>
<body>
<form>
Укажите Ваш пол:
<br>
<input type="radio" name="sex" value="male" checked="checked"> мужчина
<br>
<input type="radio" name="sex" value="female"> женщина
</form>
</body>
</html>
В данном примере по умолчанию выбран мужской пол.
1 2