Формы в HTML, это основной инструмент для взаимодействия пользователей с веб-страницами. Они используются для сбора информации от пользователя, отправки данных на сервер, поиска и других целей. В этой статье мы рассмотрим основные элементы форм, их атрибуты и функции для создания интерактивных элементов на веб-страницах.
Основные теги
1. \<form\>
Тег `<form>` используется для создания формы на веб-странице. Он определяет контейнер, в котором размещаются элементы управления и кнопки для отправки данных.
Пример⁚
<form action="/submit-form" method="post">
</form>
2. \<input\>
Тег `<input>` является одним из основных элементов управления формой. Он может быть использован для создания различных типов полей ввода, таких как текстовое поле, поле для ввода пароля, флажок, радиокнопка и другие.
Пример⁚
<label for="username">Имя пользователя⁚</label>
<input type="text" id="username" name="username">
3. \<select\>
Тег `<select>` позволяет создать список с выбором одного или нескольких вариантов. Внутри тега `<select>` используются теги `<option>`, определяющие отдельные варианты выбора.
Пример⁚
<label for="gender">Пол⁚</label>
<select id="gender" name="gender">
<option value="male">Мужской</option>
<option value="female">Женский</option>
</select>
4. \<textarea\>
Тег `<textarea>` используется для создания многострочного текстового поля, позволяющего пользователю вводить произвольный текст.
Пример⁚
<label for="message">Сообщение⁚</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
5. \<button\>
Тег `<button>` создает кнопку на форме, которая может быть использована для отправки данных или выполнения других действий.
Пример⁚
<button type="submit">Отправить</button>
Основные атрибуты
1. action
Атрибут `action` тега `<form>` указывает URL, куда данные формы должны быть отправлены.
<form action="/submit-form" method="post">
</form>
2. method
Атрибут `method` тега `<form>` определяет метод HTTP, который будет использован для отправки данных. Два наиболее распространенных значения ⏤ `get` и `post`.
<form action="/submit-form" method="post">
</form>
3. name
Атрибут `name` используется для идентификации элементов формы при их отправке на сервер.
<input type="text" name="username">
4. type
Атрибут `type` тега `<input>` определяет тип элемента управления формой.
<input type="password" name="password">
5. value
Атрибут `value` определяет значение элемента управления формой.
<input type="submit" value="Отправить">
Пример формы
<form action="/submit-form" method="post">
<label for="username">Имя пользователя⁚</label>
<input type="text" id="username" name="username">
<label for="password">Пароль⁚</label>
<input type="password" id="password" name="password">
<label for="gender">Пол⁚</label>
<select id="gender" name="gender">
<option value="male">Мужской</option>
<option value="female">Женский</option>
</select>
<label for="message">Сообщение⁚</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<button type="submit">Отправить</button>
</form>
Формы в HTML являются мощным средством взаимодействия с пользователями на веб-страницах. Понимание основных тегов и атрибутов, а также умение создавать и стилизовать формы, позволит создавать удобные и интуитивно понятные интерфейсы для пользователей.
Некоторые веб-браузеры позволяют пользователю выполнять определенные действия на вашем веб-сервере путем заполнения специальной формы, которая возвращает значение. Когда форма интерпретируется веб-браузером, создаются специальные элементы графического интерфейса, такие как поля ввода, флажки, кнопки, раскрывающиеся меню, списки прокрутки, кнопки и т. Д., Которые вы определяете как часть определения документа), информация, введенная пользователем в форму, отправляется на HTTP-сервер для обработки и распространения другим программам, работающим на сервере, в соответствии с Общим интерфейсом шлюза (CGI).
Когда вы описываете форму, каждый input имеет тег & lt; INPUT & gt;. Когда пользователь вводит данные в элемент формы, эта информация помещается в раздел VALUE элемента.
Синтаксис
Все формы начинаются с & lt; FORM & gt; и заканчиваются на & lt;/FORM & gt;.
& lt; FORM METHOD = & quot; get | post & quot; ДЕЙСТВИЕ = "URL" & gt; Elements_form_and_other_elements_HTML & lt;/FORM & gt;
МЕТОД
Метод отправки сообщения с данными формы. В зависимости от используемого метода результаты ввода данных в форму могут быть отправлены двумя способами:
* GET: информация из формы добавляется в конец URL-адреса, указанного в форме. Название Описание. Ваша программа CGI (сценарий CGI) получает данные из формы в качестве параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.
* POST: этот метод передает всю информацию формы, как только вводится указанный URL. Ваша программа CGI получает данные из формы в стандартный поток ввода. Сервер не отправляет вам сообщение о завершении в стандартный поток ввода; вместо этого он использует переменную среды CONTENT_LENGTH, чтобы определить, сколько данных вы хотите прочитать из стандартного входного потока. Этот метод рекомендуется.
ACTION
ACTION описывает URL-адрес, который должен быть вызван для обработки формы. Этот URL почти всегда указывает на программу CGI, обрабатывающую форму.
Теги формы
TEXTAREA
Тег & lt; TEXTAREA используется, чтобы позволить пользователю ввести более одной строки информации (свободный текст). Примеры использования тега & lt; TEXTAREA & gt;:
& lt; TEXTAREA NAME = "address" ROWS = 10 COLS = 50 & gt; 9B, офис 448 & lt;/TEXTAREA & gt;
Атрибуты, используемые внутри тега & lt; TEXTAREA & gt; Опишите внешний вид и название введенного текста. Тег & lt;/TEXTAREA & gt; это необходимо, даже если изначально поле ввода пусто. Описание атрибутов:
* NAME имя поля ввода
* ROWS высота поля ввода в символах: * COLS ширина поля ввода в символах
Если мы хотим, чтобы поле ввода содержало текст по умолчанию, поместите его внутри тегов & lt; TEXTAREA & gt; и & lt;/TEXTAREA & gt;.
INPUT
Тег & lt; INPUT & gt; он используется для отдельной строки текста или отдельного слова. Атрибуты тега:
* CHECKED означает, что CHECKBOX или RADIOBUTTON будут проверены.
* MAXLENGTH он определяет количество символов, которые пользователь может ввести в поле ввода. Когда количество символов превышено, браузер отвечает звуковым сигналом и не позволяет пользователю ввести новый символ. Не путать с атрибутом РАЗМЕР. Если MAXLENGTH больше SIZE, поле прокручивается. Значение MAXLENGTH по умолчанию — бесконечность.
* NAME имя поля ввода. Это имя используется как уникальный идентификатор поля, который можно использовать для извлечения данных из поля ввода.
* SIZE определяет визуальный размер поля ввода в символах на экране.
*SRC URL. который указывает на изображение (используется с атрибутом IMAGE).
* VALUE устанавливает для поля значение по умолчанию или значение, которое будет выбрано с использованием типа RADIO (атрибут RADIO является обязательным)
* TYPE определяет тип поля ввода. По умолчанию это простое однострочное текстовое поле. Остальные типы должны быть явными, их полный список приведен ниже:
CHECKBOX
Он используется для простых логических значений (BOOLEAN). Значение, связанное с Имя поля, передаваемое программе CGI, может быть включено или выключено.
HIDDEN
Поля этого типа не отображаются в браузере и не позволяют пользователь может изменить значения полей по умолчанию. Это поле используется для отправки статической информации программе CGI, такой как идентификатор пользователя, пароль или другая информация.
IMAGE
Этот тип Поле ввода позволяет связать графическое изображение с названием поля. Когда вы щелкаете по любой части чертежа, немедленно вызывается связанная с ней программа CGI. Значения, присвоенные переменной NAME, будут иметь вид Создаются две новые переменные: первая имеет имя, определенное в поле NAME, за которым следует .x в конце имени. Координата X точки в пикселях будет дана в этой переменной (при условии начала координат в верхнем левом углу чертежа), на которую указывал указатель мыши в момент щелчка, и переменная с именем в поле NAME с примечанием .y будет содержать координату Y. Все значения атрибута VALUE игнорируются. Само описание изображения выполняется с помощью атрибута SRC и синтаксически совпадает с тегом & lt; IMG & gt;
ПАРОЛЬ
То же, что и атрибут TEXT, но значение, введенное пользователем, не отображается в браузере.
RADIO
Этот атрибут позволяет вам ввести одно из числа альтернатив. Чтобы создать набор альтернатив, создайте несколько полей ввода с атрибутом TYPE = "RADIO"; с разными значениями атрибута VALUE, но с одинаковым значением атрибута NAME. Значение атрибута NAME = VALUE будет передано в программу CGI, а VALUE примет значение атрибута VALUE поля ввода, которое в данный момент выбрано (активно). Выбор поля ввода RADIO автоматически отменяет выбор всех других полей ввода RADIO с тем же именем (атрибут NAME).
RESET
Этот тип означает кнопку, которая запускается все поля формы со значениями по умолчанию.
ОТПРАВИТЬ
Этот тип представляет собой кнопку, которая выполняет программу CGI (или URL-адрес), указанную в заголовке формы. Атрибут VALUE может содержать строку, которая печатается на кнопке.
Это поле ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE, чтобы указать максимальную длину вводимого значения в символах и размер отображаемого поля ввода (по умолчанию — 20 символов).
Меню выбора формы
Меню выбора формы относится к элементу интерфейса с именем LISTBOX. Существует три типа тегов меню выбора для форм:
* Select Пользователь выбирает одно значение из предопределенного списка значений, представленных тегами OPTION. Он представлен в виде раскрывающегося списка.
* Выберите один То же, что и «Выбрать», но пользователь может видеть три варианта одновременно. Если их больше, предоставляется автоматическая вертикальная прокрутка.
* Выбрать несколько позволяет выбрать несколько элементов из LISTBOX.
SELECT
Тег SELECT позволяет пользователю выбрать значение из предопределенного списка значений. Обычно это представлено раскрывающимся меню.
Тег SELECT имеет один или несколько параметров между начальным тегом & lt; SELECT & gt; и конечный тег & lt;/SELECT & gt;. Пример тега & lt; SELECT & gt; это:
& lt; FORM & gt; & lt; ВЫБРАТЬ ИМЯ = группа & gt; & lt; ОПЦИЯ & gt;В 386 & lt; ОПЦИЯ & gt; AT 486 & lt; ОПЦИЯ & gt; В 586 & lt;/SELECT & gt; & lt;/FORM & gt;
ВЫБРАТЬ ОДИН тег
ВЫБРАТЬ ОДИН тег то же самое, что и Select, но пользователь видит сразу несколько элементов выбора (по умолчанию три). Если их больше трех, предусмотрена автоматическая вертикальная прокрутка. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:
& lt; FORM & gt; & lt; ВЫБРАТЬ ЕДИНОЕ ИМЯ = РАЗМЕР группы = 4 & gt; & lt; ОПЦИЯ & gt; В 386 & lt; ОПЦИЯ & gt; AT 486 & lt; ОПЦИЯ & gt; В 586 & lt; ОПЦИИ & gt; Pentium PRO & lt;/SELECT & gt; & lt;/FORM & gt;
SELECT MULTIPLE
Тег SELECT MULTIPLE похож на тег SELECT SINGLE, но позволяет пользователю выбрать более один элемент в списке, включая то же время. Атрибут SIZE указывает количество элементов, видимых на экране одновременно, атрибут MULTIPLE максимальное количество одновременно выбранных предметов. Пример:
& lt; FORM & gt; & lt; ВЫБРАТЬ ЕДИНОЕ ИМЯ = РАЗМЕР группы = 4 НЕСКОЛЬКО = 2 & gt; & lt; ОПЦИЯ & gt; В 386 & lt; ОПЦИЯ & gt; AT 486 & lt; ОПЦИЯ & gt; В 586
& lt; ОПЦИИ & gt; Pentium PRO & lt;/SELECT & gt; & lt;/FORM & gt;
Если выбрано несколько значений одновременно, сервер получит соответствующее количество параметров NAME = VALUE с тем же NAME, но разными значениями VALUE.
Отправить файлы с использованием форм
Формы можно использовать не только для отправки небольших информационных сообщений в качестве параметров, но и для отправки файлов.
Внимание! Поскольку для этого требуется WEB сервер для поддержки приема файлов, сервер должен правильно поддерживать получение файлов!
Например:
& lt; FORM ENCTYPE = & quot; multipart/данные формы & quot; ДЕЙСТВИЕ = "URL" МЕТОД = POST & gt; Загрузите этот файл: & lt; INPUT NAME = & quot; userfile & quot; ТИП = "файл" & gt; & lt; INPUT TYPE = "отправить" VALUE = "Отправить файл" & gt; & lt;/FORM & gt; & lt; FORM action = & quot; http://pandemonium.cs.nstu.ru/~gun/docs/sites.htm" encType = "multipart/form-data" method = "post" & gt; Отправьте этот файл: & lt; INPUT name = & quot; userfile & quot; type = "file" & gt; & lt; INPUT type = "submit" value = "Отправить файл" & gt; & lt;/FORM & gt;
.
