Что такое form в html
Перейти к содержимому

Что такое form в html

  • автор:

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>

Результат

formexample1

Атрибуты

Атрибут Значение Описание
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 тег создаёт HTML форму, которая используется для отправки введённых пользователем данных на сервер.

Так как сама форма не предоставляет никаких средств для пользовательского ввода данных, внутри элемента располагают другие элементы, цель которых предоставить пользователю различные способы ввода данных:

Помимо этих элементов, внутри формы можно использовать и любые другие HTML-элементы.

По умолчанию форма никак не отображается на веб-странице, видны только элементы расположенные внутри неё, однако с помощью CSS можно придать форме любой внешний вид.

Атрибуты

accept-charset: Указывает кодировку символов или список кодировок, разделенных пробелами, для введенных в форму данных, переданных на сервер для обработки. Если данные включают в себя символы, не поддерживающиеся указанной кодировкой, то браузер пытается определить соответствующую для них кодировку. Если соответствующая кодировка не может быть определена, то символы кодируются в числовые коды.

  • on: браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
  • off: пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

Примечание: атрибут autocomplete не поддерживается браузером Opera.

  • application/x-www-form-urlencoded: значение по умолчанию: все символы кодируются перед отправкой (пробелы преобразуются в символ » + «, а специальные символы в значения ASCII HEX).
  • multipart/form-data: символы не кодируются. Используется для элементов , у которых в атрибуте type установлено значение » file «.
  • text/plain: пробелы преобразуются в символ «+», но не кодирует в шестнадцатеричные значения спецсимволы, такие как апострофы.
  • get: данные передаются в адресной строке браузера в виде пар «имя=значение» путём их добавления в конце URL-адреса. В качестве разделителя между основным URL-адресом и передаваемыми данными используется знак вопроса ( ? ), для разделения передаваемых данных между собой используется символ амперсанда ( & ). Данный метод применяется при отправке данных небольшого размера.
  • post: данные передаются не как часть URL, а в качестве содержимого запроса браузера. Данный метод применяется для отправки данных большого объёма.

Примечание: атрибут novalidate не поддерживается в IE9 и более ранних версиях, и в Safari.

  • _blank: открывает документ в новом окне или вкладке.
  • _self: открывает документ в той же директории, где располагается ссылка (значение по умолчанию).
  • _parent: открывает документ в родительском фрейме.
  • _top: открывает документ во всю ширину окна.
  • имя_фрейма: открывает документ в iframe, имя которого было указано в качестве значения.

Стиль по умолчанию

form

Пример

Имя:
Фамилия:

Результат данного примера в окне браузера:

Пример использования тега 

<form></p>
<p>» width=»288″ height=»180″ /></p>
<p>Копирование материалов с данного сайта возможно только с разрешения администрации сайта <br />и при указании прямой активной ссылки на источник. <br />2011 – 2024 © puzzleweb.ru | razumnikum.ru</p><div class='code-block code-block-6' style='margin: 8px 0; clear: both;'>
<!-- 6dvdigital -->
<script src=

Формы в HTML

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.

Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода. Эти виды взаимодействия включают в себя:

  • регистрацию и вход на сайтах;
  • ввод личной информации (имя, адрес, данные кредитной карты и др.);
  • фильтрацию контента (с помощью выпадающих списков, флажков и др.);
  • выполнение поиска;
  • загрузку файлов.

Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:

  • текстовые поля (для одной или нескольких строк);
  • переключатели;
  • флажки;
  • выпадающие списки;
  • виджеты для загрузки;
  • кнопки отправки.

Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег . Поскольку это самозакрывающий элемент, тип поля определяется его атрибутом type :

Элемент

является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как , или ) должны находиться внутри элемента .

Два атрибута HTML необходимы:

  • action содержит адрес, который определяет, куда будет отправлена информация формы;
  • method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.

Как правило, информация формы посылается на сервер. Как эти данные затем будут обработаны выходит за рамки данного руководства.

Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить одну операцию. Если вы написали форму входа на сайт, у вас могло быть три поля:

  • поле для электронной почты
  • поле для пароля
  • кнопка отправки

Эти три элемента HTML будут заключены внутри одной формы .

Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе .

Текстовые поля

Почти всем формам требуется текстовый ввод от пользователей, чтобы ввести своё имя, адрес электронной почты, пароль, адрес и др. Текстовые поля формы приходят в разных вариантах.

Текст Допускает любой тип символов
Email Может показывать предупреждение, если введён неверный email
Пароль Символы показываются как точки
Число Могут быть использованы клавиши вверх/вниз
Телефон Может сработать автозаполнение
Многострочный текст Может быть изменён размер поля

Хотя эти поля очень похожи и позволяют пользователям вводить текст любого рода (даже неправильный), их тип обеспечивает специфическую семантику для ввода, определяя, какую информацию поле должно содержать.

Браузеры могут впоследствии немного изменить интерфейс элемента управления, чтобы повысить интерактивность или подсказать, какое содержимое ожидается.

К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.

placeholder

Текстовые поля могут отображать подсказывающий текст, который исчезнет, как только будет введён некоторый текст.

Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.

Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая метка.

 

В то время как placeholder уже обеспечивает некоторую подсказку о том, какое ожидается содержание, метки имеют преимущество оставаясь видимыми в любое время и могут использоваться наряду с другими типами элементов формы, таких как флажки или переключатели.

Хотя вы можете применять короткие абзацы для описания элементов формы, использование является семантически более правильным, потому что они существуют только в формах. также может быть связан с определённым элементом формы с помощью атрибута for , соответствующему значению id у поля.

При щелчке по метке фокус переходит к текстовому полю и помещает курсор внутрь него. Пока эта связка кажется бесполезной, но пригодится с флажками и переключателями.

Флажки

Флажки — это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.

 Запомнить меня

Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь .

  

Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.

По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked .

  

Переключатели

Вы можете предоставить пользователю список вариантов на выбор с помощью переключателей.

Для работы этого элемента формы, ваш HTML-код должен сгруппировать список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:

     

Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status ), выбор одного из вариантов отменит все остальные. Переключатели являются взаимоисключающими.

Разница между переключателями и флажками

Хотя флажок существует сам по себе, переключатели могут появляться только в виде списка (что означает, по меньшей мере два варианта).

Кроме того, щелчок по флажку является произвольным, в то время как выбор одного из переключателей является обязательным. Вот почему невозможно выключить переключатель, если выбрать ближайший вариант. В конце концов, всегда выбирается один из переключателей.

Выпадающие меню

Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню .

Они работают подобно переключателям, отличается только компоновка.

 

Множественный выбор из выпадающего меню

Если добавить атрибут multiple , вы можете предоставить возможность выбрать несколько вариантов.

 

Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.

Пример: полная форма регистрации

 

Также доступны и другие элементы форм, но мы рассмотрели наиболее используемые.

71. Что такое формы в HTML

Форма HTML – это способ общения пользователя и сайта, попросту говоря. Это раздел документа, позволяющий пользователю что-то написать, и впоследствии это будет обработано системой. Чтобы использовать формы по назначению, нужно знать JavaScript или PHP. Далее пример:

В примере показано два элемента. создает многострочное поле для написания текста. – универсальный элемент в формах. В данном примере имеет значение submit атрибута type , означает, что после нажатия на кнопку, идет отправка на сервер.

Если урок был полезным,
можете поделиться им с друзьями

Похожие уроки и записи блога

Первое знакомство с Python Знакомство с Python
Раскрывающийся список на HTML — тег SELECT Формы
Написание модулей в Python Знакомство с Python
Нумерованный список в HTML Разметка текста
Продолжаем написание классов в Python Знакомство с Python
Первое знакомство с HTML Знакомство с HTML
Работа с файлами в Python Знакомство с Python
Урок 3. Генерация SSH-ключа для работы с GitHub Блог
Универсальные атрибуты в HTML Разметка текста
Вернуть расположение блоков
Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

  1. Добавьте еще одно многострочное текстовое поле в форму (тег , обратите внимание, что это парный тег)
  2. Добавьте еще один универсальный элемент в форму (тег , обратите внимание, что это одинарный тег)
  3. К созданному добавьте атрибут type со значением text

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

Необходимо авторизоваться, чтобы проверить задание
Это займет не больше минуты.
Раздел «Формы»
УРОК 71 . Что такое формы в HTML
72 . УРОК: Как создать форму в HTML и ее атрибуты
73 . ТЕСТ: Вводный тест по формам в HTML
74 . УРОК: Кнопки в HTML — тег BUTTON
75 . УРОК: Универсальный тег в HTML форме — тег INPUT
76 . УРОК: Многострочное поле для текста – TEXTAREA
77 . УРОК: Метки в HTML формах — LABEL
78 . УРОК: Раскрывающийся список на HTML — тег SELECT
79 . УРОК: Для чего нужен тег KEYGEN
80 . УРОК: Группировка элементов в HTML формах
81 . УРОК: Группировка элементов списка в HTML
82 . ТЕСТ: Заключительный тест по формам в HTML
Другие разделы
Раздел 1. Знакомство с HTML
Раздел 2. Разметка текста
Раздел 3. Ссылки
Раздел 4. Изображения
Раздел 5. Таблицы
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *