HTML тег
Тег используется для создания формы на веб-странице. Основная задача HTML формы — принять информацию от пользователя и отправить ее на сервер для обработки.
Для отправки информации на сервер используется кнопка submit. Если этой кнопки нет, то форму можно отправить на сервер, нажав клавишу Enter.
Синтаксис
Элемент
) тегами.
Элемент содержит другие HTML теги, которые определяют способы ввода данных.
Пример
html> html> head> title>Заголовок документа title> head> body> form action="server-script-url-here" method="GET or POST" > label for="fname">Имя label> input type="text" name="FirstName" id="fname" value="Арина"/>br/> label for="lname">Фамилия label> input type="text" name="LastName"id="lname" value="Петрова"/>br/> input type="submit" value="Отправить"/> form> body> html>Результат
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| accept | file_type | Определяет разделенный запятыми список типов файлов, которые принимает сервер (Список может быть представлен через загрузку файлов). Не поддерживается в HTML5. |
| accept-charset | character_set | Определяет кодировку, в которой сервер может принимать и обрабатывать данные. |
| action | URL | Указывает адрес, куда отправляются данные из заполненной формы, и где они будут обрабатываться. |
| autocomplete | on off |
Включает/выключает автозаполнение полей формы. По умолчанию значение включено. |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | Определяет способ кодирования данных формы при их отправке. (Значение по умолчанию application/x-www-form-urlencoded). (Используется только при методе POST). |
| method | ||
| Определяет HTTP метод отправки данных формы. (по умолчанию используется метод GET) | ||
| get | -передает данные формы в адресной строке («имя=значение»), которые добавляются к URL страницы после вопросительного знака и разделяются между собой амперсандом (&). (http://example.ru/doc/?name=Ivan&password=vanya) | |
| post | — браузер устанавливает связь с сервером и посылает данные для обработки. | |
| name | text | Определяет имя формы. |
| novalidate | novalidate | Устанавливает, что данные введенные в форму не будут проверяться перед отправкой. |
| target | ||
| Определяет, где показать ответ, полученный после отправки формы | ||
| _blank | -показывает в новом окне. | |
| _self | -показывает в текущем окне. | |
| _parent | — показывает в родительском фрейме. | |
| _top | — открывает во всю ширину окна. | |
| framename | — открывает в iframe (имя должно быть указано в качестве значения |
HTML Форми
HTML-форма містить елементи форми. Елементи форми — це різні типи елементів вводу, такі як текстові поля, прапорці, перемикачі, кнопки відправки і т.ін.
Елемент
Елемент є найбільш важливим елементом форми. Елемент може відображатися кількома способами, в залежності від атрибута type. Ось кілька прикладів:
| Тип | Опис |
|---|---|
| Визначає однорядкове поле вводу текста | |
| Визначає перемикач (для выбору одного з кількох варіантів) | |
| Визначає кнопку відправки (для відправки форми) |
Ви дізнаєтесь набагато більше про типи вводу пізніше в цьому підручнику на нашому сайті W3Schools українською.
Введення тексту
визначає однорядкове поле вводу для введення тексту — text input:
Приклад
Ось так це буде виглядати в браузері: Ім’я:
Прізвище:
Примітка: Сама форма не видна. Також зверніть увагу, що ширина текстового поля за умовчанням містить 20 символів.
Радіо кнопка введення
визначає радіо кнопку. Перемикачі (радіо-кнопки) дозволяють користувачу обрати ОДИН із обмеженної кількості варіантів:
Приклад
Ось як HTML-код вище буде відображатися в браузері: Чоловіча
Жіноча
Інше
Кнопка ’Відправити’
визначає кнопку для відправки даних форми в обробник форм. Обробник форм зазвичай представляє собою серверну сторінку зі скриптом для обробки вхідних даних. Обробник форми вказується в атрибуті action форми:
Приклад
Ось як HTML-код вище буде відображатися в браузері:
Атрибут Action
Атрибут action визначає дію, яку буде виконано при відправці форми. Зазвичай дані форми відправляються на веб-сторінку на сервері, коли користувач натискає кнопку відправки. У наведеному вище прикладі дані форми відправляються на сторінку на сервері з ім’ям «/action_page.html». Ця сторінка містить серверний скрипт, який обробляє дані форми:
Якщо атрибут action пропущений, дію встановлено на поточну сторінку.
Атрибут Target
Атрибут target вказує, чи буде відправлений результат відкриватися в новій вкладці браузера, у фреймі або в поточному вікні. За замовчуванням значення ‘ _self ‘ означає, що форма буде відправлена в поточному вікні. Щоб зробити результат форми відкритим в новій вкладці браузера, використовуйте значення ‘ _blank ‘:
Приклад
Іншими допустимими значеннями є ‘ _parent ‘, ‘ _top ‘ або ім’я, яке представляє ім’я iframe.
Атрибут Method
Атрибут method вказує метод HTTP (GET або POST), який буде використовуватись при відправці даних форми:
Приклад
Приклад
Коли використовувати метод GET?
Метод за замовчуванням при відправці даних форми — GET. Однак при використанні GET відправлені дані форми будуть видимі в полі адреси сторінки (адресному рядку):
/action_page.html?firstname=Mickey&lastname=Mouse
- Додає дані в формі відправки до URL-адреси в парах ім’я/значення
- Довжина URL-адреси обмежена (близько 3000 символів)
- Ніколи не використовуйте GET для відправки конфіденційних даних! (Буде відображатися в URL-адресі)
- Корисно для подачі форм, де користувач хоче зробити закладку результату
- GET є найкращим варіантом для незахищених даних, наприклад рядків запитів в Google
Коли використовувати метод POST?
Завжди використовуйте POST, якщо дані форми містять конфіденційну або особисту інформацію. Метод POST не відображає відправлені дані форми в адресному рядку сторінки.
Примітка по POST:
- POST не має обмежень за розмірами і може використовуватися для відправки великих обсягів даних
- Відправлені з POST форми можна додати в закладки
Атрибут Name
Кожне поле вводу повинно мати атрибут name для відправки.
Якщо атрибут name опущений, дані його поля вводу не будуть відправлені взагалі.
Цей приклад буде відправляти тільки поле вводу «Last name» (Прізвище):
Приклад
Групування даних форми за допомогою
Елемент використовується для групування пов’язаних даних у формі.
Елемент визначає заголовок для елемента .
Приклад
Ось як HTML-код вище буде відображатися в браузері:
HTML Вправи
Список всіх атрибутів :
| Атрибут | Опис |
|---|---|
| accept-charset | Вказує набір символів, що використовується у відправленої формі (за замовчуванням: набір символів сторінки). |
| action | Вказує адресу (url), куди відправити форму (за замовчуванням: сторінка відправки). |
| autocomplete | Вказує, чи повинен браузер автоматично заповнювати форму (за замовчуванням: включено). |
| enctype | Визначає кодування відправлених даних (за замовчуванням: url-encoded). |
| method | Вказує метод HTTP, який використовується під час відправки форми (за замовчуванням: GET). |
| name | Вказує назву, яка використовується для ідентифікації форми (для використання DOM: document.forms.name). |
| novalidate | Вказує, що браузер не повинен перевіряти форму. |
| target | Вказує ціль адреси в атрибуті action (за замовчуванням: _self). |
Ви дізнаєтеся більше про атрибути форми в наступних розділах нашого сайту W3Schools українською.
Тег form
Тег form создает форму для отправки данных на сервер, где эти данные будут обработаны с помощью языка PHP . Также данные формы могут быть обработаны с помощью языка JavaScript .
Тег служит контейнером для тегов input , textarea , select , button , fieldset . Указанные теги не обязательно следует размещать в теге form , но, если этого не сделать, не произойдет отправки формы на сервер.
Отправка формы на сервер осуществляется по нажатию на кнопку, создаваемую тегом input с атрибутом type в значении submit , или на кнопку button .
Атрибуты
| Атрибут | Описание |
|---|---|
| action | Куда отправляем форму, на какую страницу сайта (своего или чужого). Если оставить пустым — форма отправится на текущую страницу. Необязательный атрибут. В атрибуте можно указывать ссылку на определенное место страницы (через #, как в теге a). В этом случае после отправки формы браузер откроет страницу, заданную в атрибуте action , на указанном месте. |
| method | Метод отправки формы, может быть POST или GET. Верстальщику это знать не обязательно. Необязательный атрибут. По умолчанию имеет значение GET. |
| target | Указывает ссылке в какой вкладке ей открываться: в новой, в текущей или во фрейме. Необязательный атрибут. |
| enctype | Определяет способ кодирования данных формы. Необязательный атрибут. Подробнее см. атрибут enctype. |
Значения атрибута target
| Значение | Описание |
|---|---|
| _blank | Страница откроется в новой вкладке браузера. |
| _self | Страница откроется в текущей вкладке браузера. |
| _parent | Страница откроется во фрейме-родителе. |
| _top | Отменяет все фреймы и загружает страницу в полном окне браузера. |
Значение по умолчанию: _self.
Форма в HTML. Тег
Тег используется для создания HTML-формы. В нём находится всё содержимое формы: поля для ввода, подписи к этим полям и кнопка отправки.
Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST . Если использовать метод GET , параметры формы будут отображаться в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.
Атрибуты тега :
- action — адрес, на который будут отправлены данные формы.
- method — метод отправки данных: GET или POST .
- target — окно или фрейм, в котором будет открыт результат отправки данных формы.
- name — имя формы, которое используется для её идентификации при отправке данных на сервер.
- autocomplete — может ли браузер запоминать введённые пользователем данные для автозаполнения.
- enctype — способ кодирования данных формы при отправке на сервер.
- novalidate — указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.Пример использования атрибутов тега :
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.