Тег form: описание, значение, применение

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

Вам будет интересно:Как в HTML уменьшить картинку и сделать ее адаптивной

Для создания HTML-формы используется тег . Он фактически не создает поля, но применяется в качестве родительского контейнера для таких элементов как и . Если вы хотите сделать форму простой подписки, с обычной проверкой и оплатой, или же интерактивные веб-приложения, для работы вам нужно будет использовать HTML-теги элементов, важнейшим из которых является <form>.</p> <a name="Как-работают-стандартные-формы-HTML" class="page-contents-link"></a><h2>Как работают стандартные формы HTML</h2> <p>Формы HTML были изобретены и в основном стандартизированы до появления асинхронного JavaScript и сложных веб-приложений. Сегодня используются входные данные форм, кнопки и другие механизмы взаимодействия, но в основе этого лежит система, основанная на парадигме HTTP-запроса и ответа.</p> <p class="post-other"> <a href="/sajtostroenie/777-kak-uznat-datu-sozdanija-sajta-na-svoem-kompjutere/"><img src="/wp-content/uploads/2018/11/19b9efe8108452ce00cdf373071c2eea-150x150.jpg" alt="Как узнать дату создания сайта на своем компьютере"></a><span class="post-other-desc"><span class="desc">Вам будет интересно:</span><a href="/sajtostroenie/777-kak-uznat-datu-sozdanija-sajta-na-svoem-kompjutere/">Как узнать дату создания сайта на своем компьютере</a></span> </p> <p> <img src="/wp-content/uploads/2018/11/ac1ab164fd82d2b1415b3f19a1f300fa.jpg" itemprop="image" alt="атрибут action" class="if uuid-2829218" / /> <p>Когда пользователь загружает страницу, посылается http-запрос (как правило, это так называемый GET-запрос). Он отправляется вашим браузером на сервер, и обычно сервер отвечает веб-страницей, которую ищет пользователь. Это взаимодействие является одним из самых фундаментальных понятий Интернета. И это объясняет, как именно работают HTML-формы.</p> <a name="Процесс-обмена-информацией-с-сервером" class="page-contents-link"></a><h2>Процесс обмена информацией с сервером</h2> <p>Каждый <input>, включающий в себя такие элементы, как <select>, располагаются внутри <form> и имеет атрибут name (имя), а также его значение. Значение определяется по-разному. Для текстовых <input> это будет то значение, которое было введено в поле пользователем сайта. Для радиокнопки — значение выбранного параметра. Пользователь может настроить значение, но чаще всего не может настроить атрибут name. При этом создается набор пар "имя-значение", в которых значения определяются пользовательским вводом.</p> <p> <img src="/wp-content/uploads/2018/11/ff6c21b523221c3bd38eed25fcaa788f.jpg" itemprop="image" alt="какие значения необходимо присвоить атрибутам тега form" class="if uuid-2829208" / /> <p>Основное различие между формой и обычным HTML-документом заключается в том, что в большинстве случаев данные, собранные формой, отправляются на веб-сервер. В этом случае необходимо настроить веб-сервер для получения и обработки данных. Атрибут action тега <form> определяет расположение (URL), куда должны быть отправлены собранные данные.</p> <a name="Как-выглядит-ответ-сервера" class="page-contents-link"></a><h2>Как выглядит ответ сервера</h2> <p>Когда форма отправлена, пары имя-значение и все поля внутри <form> элемента включаются в HTTP. Производится запрос на URL-адрес, определенный в форме атрибута action. Тип запроса (GET или POST) будет находиться в атрибуте method. Это означает, что все данные, предоставленные пользователем, отправляются на сервер сразу в процессе отправки формы, и сервер может делать с этими данными все, что захочет. Когда сервер получает форму отправки, он воспринимает ее, как любой другой запрос HTTP. Сервер делает все, что ему нужно сделать с включенными данными, и выдает ответ обратно в браузер.</p> <p> <img src="/wp-content/uploads/2018/11/add7025911df8b51d1919fba4b6f673a.jpg" itemprop="image" alt="тег form атрибуты" class="if uuid-2829191" / /> <p>Если вспомнить, что загрузка страницы является ответом, можно заметить, что то же самое происходит здесь. В типичной форме, созданной при помощи тега <form>, ответ — это новая страница, загружаемая браузером. Как правило, новая страница заменяет текущее содержание, но это может быть переопределено с помощью target-атрибута. Подавляющее большинство онлайн-форм работают таким образом, и именно поэтому пользователь получает отправку на страницу «Спасибо», когда заполняет форму подписки по электронной почте.</p> <a name="Веб-приложения-и-формы-без-тега-<form>" class="page-contents-link"></a><h2>Веб-приложения и формы без тега <form></h2> <p>Современные интерактивные веб-приложения используют код JavaScript для запуска асинхронных http-запросов. Это такие вызовы к серверу, которые не вызывают перезагрузки страницы. Они не полагаются на тег <form> — HTML-элемент, встроенный в поведение. Они не объединяют в единое целое все данные пользователя и не отправляют их сразу. По этой причине многие верстальщики на HTML+JS в веб-приложениях не используют тег <form> на всех формах. Чаще они просто применяют его как своего рода контейнер для различных типов полей ввода и элементов. В этом случае используемые атрибуты method и action не будут видны.</p> <a name="Подробнее-о-формах" class="page-contents-link"></a><h2>Подробнее о формах</h2> <p>HTML-формы являются одним из основных моментов взаимодействия пользователя с сайтом или приложением. Они позволяют пользователям отправлять данные на сайт. Большую часть времени данные отправляются на веб-сервер, но веб-страница также может перехватить его, чтобы использовать самостоятельно. Есть много связанных с формой элементов — различные виды кнопок, селекторов для различных типов, механизмов обратной связи. Поэтому могут возникать сложности в процессе решения вопроса о том, какие значения необходимо присвоить атрибутам тега <form>. Когда дело доходит до создания форм, нужно сделать так, чтобы они смогли работать на разных размерах экрана. Немаловажно создать их доступными для людей с ограниченными возможностями. Потому формы и тег <form> с атрибутами - возможно, самый сложный аспект в HTML.</p> <p> <img src="/wp-content/uploads/2018/11/9e572c9f2db9d810dc7fc7f46b34cd99.jpg" itemprop="image" alt="атрибутам тега form" class="if uuid-2829221" / /> <a name="Из-чего-состоит-форма" class="page-contents-link"></a><h2>Из чего состоит форма</h2> <p>HTML-форма состоит из одного или нескольких виджетов. Они могут быть однострочными или многострочными текстовыми полями, полями выбора, кнопками или переключателями. Чаще всего они связаны с атрибутом <label>, который описывает их цель - правильно реализованные <label> могут четко проинструктировать как зрячих, так и незрячих пользователей о том, как попасть в форму ввода. Атрибут <label> связан правильно с <input> с помощью их for и id-атрибутов соответственно. Метка for при этом ссылается на id атрибут соответствующего виджета, а программа для чтения с экрана, используя его, будет зачитывать то, что в нем написано.</p> <p> <img src="/wp-content/uploads/2018/11/bdac028e68bf72fdc1edb34f5e627a19.jpg" itemprop="image" alt="тег form" class="if uuid-2829233" / /> <p>Помимо структур, специфичных для тега <form>, важно помнить, что формы — просто код на языке HTML. Это означает, что можно использовать всю мощь HTML для структурирования форм. Обычной практикой является использование тега <div>, чтобы обернуть элементы с тегом <p>. Также широко используются списки HTML, для структурирования применяют множественные чекбоксы или радиокнопки. После создания полей для ввода остается добавить кнопку при помощи тега <button> и проверить результат. Гибкость HTML-форм делает их одними из самых сложных структур в формате HTML. Но с помощью правильной структуры при построении HTML-формы можно гарантировать, что она будет одновременно удобной и доступной.</p> </p> <p><br> <br> <a rel="nofollow" target="_blank" href="https://itinru.ru/away?to=http://fb.ru/article/421922">Источник</a></p></div> <div class="article-social"> <div></div> <div class="social-like"> <div id="vk_like"></div> </div> </div> <div class="social-share"> <span class="social-share-h">Понравилась статья? Поделись с друзьями:</span> <div class="social-share-rows"> <a class="soc-share vk" onclick="Share.vkontakte()"><i class="fab fa-vk"></i></a> <a class="soc-share fb" onclick="Share.facebook()"><i class="fab fa-facebook-f"></i></a> <a class="soc-share ok" onclick="Share.odnoklassniki()"><i class="fab fa-odnoklassniki"></i></a> <a class="soc-share twitter" onclick="Share.twitter()"><i class="fab fa-twitter"></i></a> </div> </div> <div class="content-author" itemscope="" itemtype="http://www.schema.org/Person"> <div class="author-box"> <a class="author-avatar" itemprop="url" href="/profile/3998" target="_blank"> <img class="author-avatar-img" src="https://img.itinru.ru/photos/avf/4622.jpg" alt="Мила Владимирова"> </a> <div class="author-box-content"> <div class="author-box-data"> <span>Автор: </span><a class="author author-name" href="/profile/3998" rel="author" target="_blank" ><span itemprop="name">Мила Владимирова</span></a> <time class="author-date updated published" datetime="2018-11-04T10:55:15+00:00"> 04-11-2018 15:55</time> </div> <div class="author-comment">Жду ваши вопросы и мнения в комментариях</div> </div> </div> </div> </div> </div> <div class="post-comments"> <div id="vk_comments"></div> <aside> <div class="block-title bgg">Подпишись на нашу группу ВКонтакте</div> <div id="vk_groups"></div> </aside> </div> <aside> <div class="block-title bgg">Похожие статьи</div> <div class="post-similar"> <div class="post-similar-row"> <a href="/sajtostroenie/20274-kak-zarabotat-na-youtube/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/24987/small/119951-52f61a71156df52f61a7115718.jpg" alt="Как заработать на Youtube"></div><div class="similar-article-title">Как заработать на Youtube</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20270-kak-sdelat-registratsiyu-polzovateley-na-sayte/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8405/small/1-52552d8e4804352552d8e48083.jpg" alt="Как сделать регистрацию пользователей на сайте"></div><div class="similar-article-title">Как сделать регистрацию пользователей на сайте</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20269-kak-sozdat-svoy-smaylik/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8402/small/1-52552abcec5a452552abcec5e3.jpg" alt="❶ Как создать свой смайлик"></div><div class="similar-article-title">❶ Как создать свой смайлик</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20268-kak-sdelat-muzyku-pri-vkhode-na-sayt/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8396/small/1-52552b72e23bf52552b72e23fc.jpg" alt="Как сделать музыку при входе на сайт"></div><div class="similar-article-title">Как сделать музыку при входе на сайт</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20267-kak-otklyuchit-perenapravlenie/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/8190/small/1-52552c6be26d852552c6be2715.jpg" alt="Как отключить перенаправление"></div><div class="similar-article-title">Как отключить перенаправление</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20264-kak-udalit-akkaunt-ucoz/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7862/small/1-52552c867272b52552c8672769.jpg" alt="Как удалить аккаунт ucoz"></div><div class="similar-article-title">Как удалить аккаунт ucoz</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20263-kak-translirovat-radio-cherez-internet/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7860/small/1-52552cbe532ad52552cbe532ea.jpg" alt="❶ Как транслировать радио через интернет"></div><div class="similar-article-title">❶ Как транслировать радио через интернет</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20261-kak-sdelat-mobilnuyu-versiyu-sayta/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7852/small/1-52552ba66751652552ba667553.jpg" alt="Как сделать мобильную версию сайта"></div><div class="similar-article-title">Как сделать мобильную версию сайта</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20254-kak-pomestit-svoe-video-v-quotyutubequot/" class="similar-article"> <div class="similar-article-img"><img src="/img/no-image-min.jpg" alt="Как поместить свое видео в "Ютубе""></div><div class="similar-article-title">Как поместить свое видео в "Ютубе"</div> </a> </div> <div class="post-similar-row"> <a href="/sajtostroenie/20253-kak-poluchit-vydelennyy-ip/" class="similar-article"> <div class="similar-article-img"><img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/7225/small/1-52552e106658752552e10665c7.jpg" alt="❶ Как получить выделенный ip"></div><div class="similar-article-title">❶ Как получить выделенный ip</div> </a> </div> </div> </aside> </article> </main> </div> <div class="sidebar"> <div class="sidebar-row"> <aside> <div class="sidebar-title ggc">Категории</div> <div class="sidebar-content"> <nav class="sidebar-nav"> <ul class="sidebar-nav__list"> <li><a href="/programmy/">Программы</a> </li> <li><a href="/smartfony/">Смартфоны</a> </li> <li><a href="/raznoe-pro-ustrojstva/">Разное про устройства</a> </li> <li><a href="/foto-i-videotehnika/">Фото и видеотехника</a> </li> <li><a href="/remont-ustrojstv/">Ремонт устройств</a> </li> <li><a href="/komplektujushhie-i-aksessuary/">Комплектующие и аксессуары</a> </li> <li><a href="/ofisnaja-tehnika/">Офисная техника</a> </li> <li><a href="/raznoe/">Разное</a> </li> <li><a href="/vybor-i-pokupka/">Выбор и покупка</a> </li> <li><a href="/noutbuki/">Ноутбуки</a> </li> <li><a href="/operacionnye-sistemy/">Операционные системы</a> </li> <li><a href="/servera/">Сервера</a> </li> <li><a href="/bezopasnost-v-internete/">Безопасность в интернете</a> </li> <li><a href="/blogging/">Блоггинг</a> </li> <li><a href="/sajtostroenie/">Сайтостроение</a> </li> <li><a href="/igry/">Игры</a> </li> <li><a href="/seo/">SEO</a> </li> <li><a href="/socialnye-seti/">Социальные сети</a> </li> </ul> </nav> </div> </aside> </div> <div class="sidebar-row"> <aside> <div class="sidebar-title ggc">Последние статьи</div> <div class="sidebar-new-posts-rows"> <a href="/igry/20286-kak-postavit-plagin-v-odinochnuyu-igru-v-minecraft/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/74849/small/1-5417f5412a8735417f5412a8b0.jpg" alt="Как поставить плагин в одиночную игру в Minecraft"> <span>Как поставить плагин в одиночную игру в Minecraft</span> </a> <a href="/raznoe/20285-cheetos-zapustil-pervuyu-v-rossii-tiktok-pachku/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/62722/small/37-6160583810a816160583810abe.jpg" alt="Cheetos запустил первую в России TikTok-пачку!"> <span>Cheetos запустил первую в России TikTok-пачку!</span> </a> <a href="/raznoe/20284-klub-druzey-cheetos-pomogaet-gepardam-v-moskovskom-zooparke/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/62721/small/37-614366759a2c3614366759a304.jpg" alt="«Клуб друзей»: Cheetos помогает гепардам в Московском зоопарке"> <span>«Клуб друзей»: Cheetos помогает гепардам в Московском зоопарке</span> </a> <a href="/raznoe/20283-nachinaem-s-ponedelnika-gadzhet-kotoryy-pomozhet-perestroitsya-na-zozh-i-sokhranit-emotsionalnyy-zapal/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/57505/small/25-618ce3d7a17ee618ce3d7a184f.jpg" alt="Начинаем с понедельника: гаджет, который поможет перестроиться на ЗОЖ и сохранить эмоциональный запал"> <span>Начинаем с понедельника: гаджет, который поможет перестроиться на ЗОЖ и сохранить эмоциональный запал</span> </a> <a href="/vybor-i-pokupka/20279-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/vybor-i-pokupka/20280-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/vybor-i-pokupka/20281-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/vybor-i-pokupka/20282-kak-vybrat-noutbuk-dlya-raboty/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/56105/small/1-52550c8cb088852550c8cb08c7.jpg" alt="Как выбрать ноутбук для работы"> <span>Как выбрать ноутбук для работы</span> </a> <a href="/raznoe/20278-kak-vybrat-messendzher-dlya-raboty-i-zhizni-whatsapp-telegram-viber-gem4me/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/53642/small/25-60224bde5762960224bde57668.jpg" alt="Как выбрать мессенджер для работы и жизни: Whatsapp, Telegram, Viber, Gem4me?"> <span>Как выбрать мессенджер для работы и жизни: Whatsapp, Telegram, Viber, Gem4me?</span> </a> <a href="/raznoe/20277-implantatsii-all-on-6-preimushchestva-i-nedostatki/" class="sidebar-new-post"> <img src="https://img.itinru.ru/91385f33ca5c3e3975698b3d1d35a5fd/post/ad/53641/small/37-5fe32eaecea885fe32eaeceac8.jpg" alt="Имплантации All-on-6 преимущества и недостатки"> <span>Имплантации All-on-6 преимущества и недостатки</span> </a> </div> </aside> </div> <div class="sidebar-row"> <div id="comments_browse"></div> </div> </div> </div> <footer> <div class="footer"> <div class="footer-rows"> <div class="footer-menu"> <div class="footer-column info-url"> <a href="/about/">О проекте</a> <a href="/contacts/">Обратная связь</a> </div> <div class="footer-column info-url"> <a href="/sotrudnichestvo/">Сотрудничество</a> <a href="/razmeshchenie-reklamy/">Размещение рекламы</a> <a href="/dlya-pravoobladateley/">Для правообладателей</a> </div> <div class="footer-column info-responsibility"> <span>Информация взята из открытых источников, либо прислана нашими читателями. Все статьи размещенные на сайте представлены для ознакомления и не являются рекомендациями и используются в некоммерческих целях. Все права на материалы, изображения и прочую информацию пренадлежат их законным авторам (правообладателям).</span> </div> </div> <div class="footer-copy ggc">© «IT in RU», 2024</div> <div class="footer-column"> <a href="/usloviya-predostavleniya-informatsii/">Условия предоставления информации</a> | <a href="/otkaz-ot-otvetstvennosti/">Отказ от ответственности</a> </div> </div> </div> </footer> <!-- Scripts --> <script> $(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); </script> <script src="//cdn.itinru.ru/js/app.js"></script> <!-- Yandex.Metrika counter --> <script > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(50995274, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/50995274" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <div style="display:none;" onload="genStickSidebar()"></div> </body> </html>