Содержание

action атрибут HTML теґа form

Атрибут action (HTML тега <form>) визначає адресу, куди відправляється форма (за замовчуванням дію встановлено на поточну сторінку).

Значення атрибута може бути перевизначине за допомогою атрибута formaction елементів <button> чи <input>, що відносяться до форми.

Порада:

В якості обробника можна вказати адресу електронної пошти, починаючи з ключового слова mailto:. При відправці форми буде запущена поштова програма встановлена без задання.

Нотатка:

Якщо атрибут action відсутній, всі дані буде відправлено на поточну сторінку.

Порада:

Для коректної інтерпретації даних використовуйте атрибут «enctype=»text/plain»» в елементі <form>

Синтакс

<form action="URL">...</form>

Атрибут action може отримувати єдине значення :

URL

URL — адреса скрипта, який буде обробляти дані форми.

Можливі значення:

  • Абсолютний URL — вказує на інший веб-сайт (наприклад, href = http://www.css_in_ua.com/default.htm )
  • Відносний URL — вказує на файл в структурі поточного веб-сайту (наприклад, href = "default.htm" )

Переглядачі

Переглядач

1+

1+

1+

3.5+

3+

12+

Переглядач

1+

1+

1+

1+

Різниця між HTML 4.01 та HTML5


У HTML5 використання атрибуту action не обов’язкове, на відміну від HTML4.

Різниця між XHTML та HTML


У XHTML атрибут action є обов’язковим.

Тег | HTML справочник

Поддержка браузерами

Описание

HTML тег <form> создаёт HTML форму, которая используется для отправки введённых пользователем данных на сервер.

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

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

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

Атрибуты

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

Значением по умолчанию является зарезервированная строка «UNKNOWN» (браузеры интерпретируют это значение как кодировку символов идентичную кодировке документа, содержащего элемент <form>).

action:
Указывает адрес отправки данных из заполненной формы, где будет обрабатываться данная информация.
autocomplete:
Определяет, включить или выключить автозаполнение формы. При включенном автозаполнение браузер автоматически подставляет значения, которые пользователь вводил во время предыдущего использования формы. Возможные значения атрибута:
  • on: браузер автоматически показывает значения вводимые ранее пользователем (значение по умолчанию).
  • off: пользователь должен сам вводить значения для каждого поля при каждом использовании формы. Ранее вводимые значения показываться не будут.

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

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

<form novalidate>
<form novalidate="novalidate">
<form novalidate="">

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

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

Тег <form> так же поддерживает Глобальные атрибуты и События

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


form {
    display: block;
    margin-top: 0em;
} 

Пример


<form action="demo_form.asp">
  Имя: <input type="text" name="fname" value="Mickey"><br>
  Фамилия:<input type="text" name="lname" value="Mouse"><br>
  <input type="submit" value="Submit">
</form> 

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

seodon.ru | Теги HTML — Тег FORM

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут action, тега <FORM>, задает адрес программы, по которому будут отправлены данные переданные формой. Это может быть программа-обработчик, располагаемая на Web-сервере, Mail-сервере и т.д.

Значения

Абсолютный или относительный URL — уникальный адрес каждого документа в интернете или якоря на странице.

Если вы отправляете данные по электронной почте, то перед адресом почтового ящика необходимо указать конструкцию «mailto:», а также установить method=»post» и enctype=»text/plain», чтобы сформировалось текстовое сообщение.

Значение по умолчанию: нет.

Синтаксис

<form action="URL">...</form>

Обязательный атрибут: да.

Пример HTML: применение атрибута action

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тега FIELDSET, атрибут action</title>
 </head>
 <body>
  <form action="mailto:[email protected]" enctype="text/plain" method="post">
   <p><input type="text" name="name" size="30" value="Ваше имя"><br> 
    <input type="text" name="email" size="30" value="Ваш e-mail"><br>
    <input type="text" name="comment" size="50" value="Комментарий"></p>
   <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
  </form>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Тег form в html: значение, применение

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

Для создания HTML-формы используется тег <form>. Он фактически не создает поля, но применяется в качестве родительского контейнера для таких элементов как <input> и <textarea>. Если вы хотите сделать форму простой подписки, с обычной проверкой и оплатой, или же интерактивные веб-приложения, для работы вам нужно будет использовать HTML-теги элементов, важнейшим из которых является <form>.

Как работают стандартные формы HTML

Формы HTML были изобретены и в основном стандартизированы до появления асинхронного JavaScript и сложных веб-приложений. Сегодня используются входные данные форм, кнопки и другие механизмы взаимодействия, но в основе этого лежит система, основанная на парадигме HTTP-запроса и ответа.

Когда пользователь загружает страницу, посылается http-запрос (как правило, это так называемый GET-запрос). Он отправляется вашим браузером на сервер, и обычно сервер отвечает веб-страницей, которую ищет пользователь. Это взаимодействие является одним из самых фундаментальных понятий Интернета. И это объясняет, как именно работают HTML-формы.

Процесс обмена информацией с сервером

Каждый <input>, включающий в себя такие элементы, как <select>, располагаются внутри <form> и имеет атрибут name (имя), а также его значение. Значение определяется по-разному. Для текстовых <input> это будет то значение, которое было введено в поле пользователем сайта. Для радиокнопки — значение выбранного параметра. Пользователь может настроить значение, но чаще всего не может настроить атрибут name. При этом создается набор пар «имя-значение», в которых значения определяются пользовательским вводом.

Основное различие между формой и обычным HTML-документом заключается в том, что в большинстве случаев данные, собранные формой, отправляются на веб-сервер. В этом случае необходимо настроить веб-сервер для получения и обработки данных. Атрибут action тега <form> определяет расположение (URL), куда должны быть отправлены собранные данные.

Как выглядит ответ сервера

Когда форма отправлена, пары имя-значение и все поля внутри <form> элемента включаются в HTTP. Производится запрос на URL-адрес, определенный в форме атрибута action. Тип запроса (GET или POST) будет находиться в атрибуте method. Это означает, что все данные, предоставленные пользователем, отправляются на сервер сразу в процессе отправки формы, и сервер может делать с этими данными все, что захочет. Когда сервер получает форму отправки, он воспринимает ее, как любой другой запрос HTTP. Сервер делает все, что ему нужно сделать с включенными данными, и выдает ответ обратно в браузер.

Если вспомнить, что загрузка страницы является ответом, можно заметить, что то же самое происходит здесь. В типичной форме, созданной при помощи тега <form>, ответ — это новая страница, загружаемая браузером. Как правило, новая страница заменяет текущее содержание, но это может быть переопределено с помощью target-атрибута. Подавляющее большинство онлайн-форм работают таким образом, и именно поэтому пользователь получает отправку на страницу «Спасибо», когда заполняет форму подписки по электронной почте.

Веб-приложения и формы без тега <form>

Современные интерактивные веб-приложения используют код JavaScript для запуска асинхронных http-запросов. Это такие вызовы к серверу, которые не вызывают перезагрузки страницы. Они не полагаются на тег <form> — HTML-элемент, встроенный в поведение. Они не объединяют в единое целое все данные пользователя и не отправляют их сразу. По этой причине многие верстальщики на HTML+JS в веб-приложениях не используют тег <form> на всех формах. Чаще они просто применяют его как своего рода контейнер для различных типов полей ввода и элементов. В этом случае используемые атрибуты method и action не будут видны.

Подробнее о формах

HTML-формы являются одним из основных моментов взаимодействия пользователя с сайтом или приложением. Они позволяют пользователям отправлять данные на сайт. Большую часть времени данные отправляются на веб-сервер, но веб-страница также может перехватить его, чтобы использовать самостоятельно. Есть много связанных с формой элементов — различные виды кнопок, селекторов для различных типов, механизмов обратной связи. Поэтому могут возникать сложности в процессе решения вопроса о том, какие значения необходимо присвоить атрибутам тега <form>. Когда дело доходит до создания форм, нужно сделать так, чтобы они смогли работать на разных размерах экрана. Немаловажно создать их доступными для людей с ограниченными возможностями. Потому формы и тег <form> с атрибутами — возможно, самый сложный аспект в HTML.

Из чего состоит форма

HTML-форма состоит из одного или нескольких виджетов. Они могут быть однострочными или многострочными текстовыми полями, полями выбора, кнопками или переключателями. Чаще всего они связаны с атрибутом <label>, который описывает их цель — правильно реализованные <label> могут четко проинструктировать как зрячих, так и незрячих пользователей о том, как попасть в форму ввода. Атрибут <label> связан правильно с <input> с помощью их for и id-атрибутов соответственно. Метка for при этом ссылается на id атрибут соответствующего виджета, а программа для чтения с экрана, используя его, будет зачитывать то, что в нем написано.

Помимо структур, специфичных для тега <form>, важно помнить, что формы — просто код на языке HTML. Это означает, что можно использовать всю мощь HTML для структурирования форм. Обычной практикой является использование тега <div>, чтобы обернуть элементы с тегом <p>. Также широко используются списки HTML, для структурирования применяют множественные чекбоксы или радиокнопки. После создания полей для ввода остается добавить кнопку при помощи тега <button> и проверить результат. Гибкость HTML-форм делает их одними из самых сложных структур в формате HTML. Но с помощью правильной структуры при построении HTML-формы можно гарантировать, что она будет одновременно удобной и доступной.

HTML теги и атрибуты форм

Вы здесь: Главная — HTML — HTML 5 — HTML теги и атрибуты форм

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

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


Атрибуты HTML тега формы

Какие у тега form есть атрибуты? Самый главный — это атрибут action, без которого невозможна отправка формы на сервер. Внутри атрибута action указывается PHP файл, который и занимается отправкой содержимого полей формы на сервер. Через атрибут name, задается название формы, чтобы связать отправляемые данные с конкретным именем. На одной странице может быть больше, чем одна форма и имя позволяет вычислить из какой именно формы, были отправлены данные. Если вы простой верстальщик и не отвечаете за отправку формы на сервер, то поставьте в значение атрибута, заглушку.

<form action="#"></form>

Атрибут method отвечает за способ передачи данных и может иметь одно их двух значение, POST или GET. Метод GET используется по умолчанию, когда передача данных осуществляется непосредственно в адресной строке в открытом виде и подходит для передачи небольшого количества данных. Метод POST скрытно передает данные, используя запрос браузера. На большинстве сайтов данные передаются более безопасным методом POST.

<form method="POST"></form>
Автозаполнение полей формы

Атрибут autocomplete управляет автозаполнением формы, значение которого по умолчанию равно on. На практике это означает, что следует прописывать атрибут autocomplete со значением off, если нужно отключить автозаполнение форм. Как это работает? На самом деле ваш браузер запоминает все данные, которые вы раньше вводили в формы на других сайтах и затем подставляет их при повторном вводе данных в поля формы. Но нужно понимать, при отключенном автозаполнении в параметрах браузера, не получится управлять автозаполнением с помощью атрибута autocomplete.

<form action="send_form.php" name="first_form" autocomplete="off"></form>

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


Fieldset & legend

Тег fieldset группирует все элементы внутри формы, обрамляя их общей обводкой по контуру. Тег legend — это встроенный заголовок в обрамляющий контур. Данные теги облегчают работу с большими формами, деля форму на тематические зоны. Например:

<form action="#" name="big">
  <fieldset>
    <legend>Имя и фамилия</legend>
      <input type="text"><br>
      <input type="text"><br>
      <input type="submit"><br>
  </fieldset>
  <fieldset>
    <legend>Сообщение</legend>
      <textarea rows="10" cols="45" name="text"></textarea><br>
      <input type="submit"><br>
  </fieldset>
</form>


Тег label

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

// указать атрибутам for и id одинаковые значения
<label for="firstname">Имя</label>
<input>

// обернуть поле и значение метки тегом label
<label>
    Фамилия
    <input type="text">
</label>



Тег textarea

Элемент формы textarea предназначен для ввода большого текста. Размер поля регулируется такими атрибутами, как rows (ряды) и cols (колонки). Пройдемся по атрибутам данного тега.

  • autofocus автоматически устанавливает фокус
  • disabled делает поле недоступным для ввода данных
  • placeholder добавляет подсказку для пользователя, которая исчезнет при вводе данных в поле
  • maxlength устанавливает максимальное число символов
  • required делает поле обязательным для заполнения
<textarea rows="15" cols="55" autofocus placeholder="добавьте уточнения.." maxlength="50"></textarea><br>

Тег select

Тег select (выбора) представляет собой выпадающий список с опциями выбора.

<select>
    <option value="черный">черный</option>
    <option value="белый">белый</option>
</select>

  • Создано 23.03.2020 10:40:32
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Пример формы HTML, элементы формы

Что такое форма

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

Так как формы связаны с работой сервера, при изучении этой темы некоторые вещи могут быть пока непонятны. Но изучить формы всё равно нужно. Во перывх, потому что отдельные элементы формы могут существовать и без отправки на сервер. А данные в них могут быть использованы при работе различных скриптов. Во вторых, если Вы будете дальше развиваться в области создания сайтов, то Вам нужно будет знать, по крайней мере, один серверный язык, например PHP. И когда Вы будете его изучать, Вам нужно будет знать HTML, чтобы не отвлекаться на это.

Создание формы

HTML Форма создаётся с помощью тэга <form>. Сам этот тэг не выводит на страницу никаких полей для ввода, кнопок и вообще ничего. Для этого существуют другие тэги. А тэг <form> объединяет в их в одну форму и отправляет данные из них на сервер.

Рассмотрим несколько важных атрибутов тэга <form>. Форме можно задать имя. Это делается с помощью атрибута name. Имя формы должно быть уникальным. Оно используется для нахождения формы при работе скриптов.

Атрибут action указывает файл, который запускается на сервере и получает данные из формы. Значением атрибута является путь к файлу.

Атрибут method устанавливает метод запроса. Может принимать значения:

method=»get»

method=»post»

Пример HTML формы:

+

8
9
10

<form action="myfile.php" method="post">

</form>

Внутри тэга <form> размещаются элементы формы. Элементы формы — это различные поля для ввода, кнопки и другие способы, с помощью которых пользователь вводит информацию. Для создания элементов формы используются разные тэги. Рассмотрим их подробно.

Тэг <input>

Тэг <input> может выглядеть на странице по-разному в зависимости от типа. В том числе он может создавать разные поля для ввода. Типов тэга <input> достаточно много, поэтому он рассматривается в отдельной теме. А пока мы для примера создадим его на странице. Добавим его внутрь тэга <form>.

8
9
10

<form action="myfile.php" method="post">
<input name="login">
</form>

Атрибут name очень важен. Имя элемента формы передаётся на сервер вместе со значением. Данные отправляются на сервер в следующем виде:

имя = значение

Если в приведённом примере пользователь введёт в поле для ввода — Andrey, то на сервер будут отправлены данные в виде:

login=Andrey

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

Тэг <textarea>

Тэг <textarea> создаёт многострочное поле для ввода текста. От тэга <input> он отличается тем, что имеет размер в несколько строк. Если вводимый текст не помещается в поле, то у него появляется полоса прокрутки. В некоторых браузерах полоса прокрутки есть сразу. С помощью CSS появление прокрутки можно изменить. Добавим <textarea> в форму:

10

<textarea name="inform"></textarea>

Атрибут name имеет тот же смысл, что и у тэга <input>.

Полю для ввода можно задать размеры. Для этого есть атрибут cols, который устанавливает ширину поля в символах и атрибут rows, который устанавливает высоту поля в строках. Вместо этого можно использовать CSS. Как и любому блоку, тэгу <textarea> можно задать ширину и высоту.

Установим тэгу <textarea> размеры. Он будет выглядеть так:

10

<textarea name="inform" cols="30" rows="10"></textarea>

Тэг <textarea> является парным. Внутрь него можно пометсить текст, который сразу будет находится в поле для ввода. Пользователь при желании может его удалить.

Пример:

10

<textarea name="inform" cols="30" rows="10">Текст</textarea>

У тэга <textarea> есть и другие атрибуты, которые используются не часто. Их Вы можете найти в справочниках.

Тэг <select>

Тэг <select> создаёт список, в котором пользователь выбирает один из пунктов. Каждый пункт создаётся с помощью тэга <option>. Пример:

11
12
13
14

<select name="punkt">
  <option value="p1">Первый пункт</option>
  <option value="p2">Второй пункт</option>
</select>

У тега <select> есть атрибут name, который используется так же, как у других элементов формы. Имя элемента отправляется в виде данных на сервер. А значение берётся из атрибута value того пункта, который выбрал пользователь. Если в приведённом примере пользователь выберет первый пункт, то на сервер отправятся данные в таком виде:

punkt=p1

Если у какого-то пункта списка есть атрибут selected, то этот пункт является выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать в тэге.

Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью атрибута size. При этом внешний вид списка зависит от его высоты. Если список имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки, то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта. Её также можно изменить с помощью CSS.

Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.

11

<select name="punkt" size="2">

Другие атрибуты тэгов <select> и <option> Вы можете найти в справочниках.

Тэг <label>

Тэг <label> можно использовать для каких-то пояснений внутри формы. Для примера добавим пояснение к тэгу <input>, который мы создавали ранее.

9

<label>Login:</label><input name="login">

Но в таком виде это просто текстовый тэг. Основная функция тэга <label> состоит в том, чтобы связывать пояснение с элементом формы. В этом случае нажатие на текст пояснения соответствует нажатию на элемент формы. Это используется тогда, когда элемент формы имеет маленький размер и нажимать на него неудобно. Чтобы связать элемент формы с текстом, его нужно поместить внутрь тэга <label>. Изменим 9 строку так, чтобы тэг <input> был связан с пояснением:

9

<label>Login:<input name="login"></label>

Нажмите на странице на слово «Login», поле для ввода окажется в фокусе.

Отправка формы

Чтобы отправить данные на сервер, пользователь должен нажать на кнопку с типом submit. Для её создания можно добавить в форму тэг <input> и установить ему тип submit.

Добавим в форму кнопку отправки данных на сервер:

15

<input type="submit" value="Отправить">

Атрибут value содержит текст, который отображается на кнопке.

При нажатии на кнопку, на сервере запускается файл, который указан в атрибуте action тэга <form>. Этот файл получает данные из формы.

Автофокус

Любому элементу формы можно установить атрибут autofocus. Ему не нужно указывать значение, он просто указывается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе после загрузки страницы. Атрибут работает не во всех браузерах.

Создание HTML форм. Тег form

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:

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

Пример: Простая HTML-форма

  • Попробуй сам »

Моя первая форма:
Имя:
Фамилия:


Простая форма

Элемент

Формы вставляются на веб-страницы посредством элемента . Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент .
Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
Большинство атрибутов элемента влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method . Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

Элемент

Практически все поля для формы создается с помощью элемента (от англ. input — ввод). Внешний вид элемента меняются в зависимости от значения его атрибута type :

Вот некоторые значения атрибута type :

Ввод текста и пароля

Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type . Для добавления однострочного поля ввода текста в форму следует внутри элемента прописать атрибут type со значением text:

Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

Пример создания формы с полем для ввода пароля:

Пример: Поле ввода пароля

  • Попробуй сам »

Ваш логин:

Пароль:



Вместе с этим атрибутом можно использовать атрибут maxlenght , значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size . По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size , рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value . Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

  • Попробуй сам »

Сколько Вам лет?

  1. младше 18
  2. от 18 до 24
  3. от 25 до 35
  4. более 35


Сколько Вам лет?

  1. младше 18
  2. от 18 до 24
  3. от 25 до 35
  4. более 35

Флажки (checkbox)

Элемент типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name , однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

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

Пример: Использование переключателей

  • Попробуй сам »
  1. Джаз
  2. Блюз
  3. Рок
  4. Шансон
  5. Кантри



Атрибут action.

Главным для элемента является атрибут action , который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру. Другими словами в атрибуте action указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:

Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php . Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение.php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action . Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action=»».

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST . Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET . Рассмотрим применение каждого из них.

Метод POST

Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET , у него нет ограничений по количеству передаваемых символов.

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET , ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET , давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

т.е. замените POST на GET .
Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин , и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:

File_name.html?firstname=Вася&lastname=Пупкин

Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&) .
Этот метод нужно использовать, если вы не передаете больших объемов информации.
Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

Группировка элементов формы

Элементы формы, связанные по смыслу, можно сгруппировать между тегами и . Браузер отобразит в виде рамки вокруг группы элементов формы. Внешний вид рамки может быть изменен с помощью каскадных таблиц стилей (CSS).
Чтобы добавить заголовок для каждой группы, понадобится элемент , который задает встраиваемый в рамку текст заголовка группы.

Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы.

Синтаксис тега

Тег

Пояснения к примеру

Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега

.

Атрибуты и свойства тега

1. Атрибут accept-charset=»Кодировка» — определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.

2. Атрибут action=»URL» — адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.

3. Атрибут autocomplete=»on/off» — задает или отключает автозаполнение формы. Может принимать два значения:

  • on — включить автозаполнение;
  • off — выключить автозаполнение;

4. Атрибут enctype=»параметр» — задает способ кодирования данных. Может принимать следующие значения:

  • application/x-www-form-urlencoded — вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
  • multipart/form-data — данные не кодируются
  • text/plain — пробелы заменяются знаком +, буквы и другие символы не кодируются.

5. Атрибут method=»POST/GET» — задает метод отправки. Может принимать два значения:

  • GET — передача данных в адресной строке (есть ограничение по объёму отправки данных)
  • POST — посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

6. Атрибут name=»имя» — задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.

7. Атрибут novalidate — отменяет встроенную проверку данных формы на корректность ввода.

8. Атрибут target=»параметр» — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:

  • _blank — загружает страницу в новое окно браузера
  • _self — загружает страницу в текущее окно
  • _parent — загружает страницу во фрейм-родитель
  • _top — отменяет все фреймы и загружает страницу в полном окне браузера

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

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

Рассказать о формах в Самоучителе, посвященному HTML, достаточно трудно. Причина очень простая: создать форму HTML гораздо проще, чем ту «точку внешнего мира», в которую HTML форма будет посылать информацию. В качестве такой «точки» в большинстве случаев выступает программа, написанная на Перл или Си.

Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает «общепринятый интерфейс шлюзов». Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.

В настоящее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).

HTML формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной] . Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

Как устроена HTML форма

Форма открывается тегом

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

Тег

может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:

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

Определяет, каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET . Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET .

Определяет, каким образом данные из формы HTML будут закодированы для передачи обработчику. Если значение атрибута не установлено, по умолчанию предполагается ENCTYPE=application/x-www-form-urlencoded .

Простейшая HTML форма

Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто:

Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается «сабмит» с ударением на втором слоге, от английского «подавать»), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в теге

.

Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE=»[Надпись]» (читается «вэлью» с ударением на первом слоге, от английского «значение»), например:

Теперь мы знаем достаточно для того, чтобы написать простейшую HTML форму (пример 11). Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.

Пример 11

HTML| Атрибут действия — GeeksforGeeks

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

.
Синтаксис: 
 

  

Значения атрибута: 
URL: Используется для указания URL-адреса документа, куда данные должны быть отправлены после отправки формы. .
Возможные значения URL: 
 

  • Абсолютный URL: Указывает на ссылку на другой веб-сайт.Например: www.gfg.org
  • относительный URL: Используется для указания на файл на веб-странице. Например: www.geeksforgeeks.org

Пример 1: Этот пример иллюстрирует использование атрибута действия.

HTML

< HTML >

< голова >

< название >

HTML действие Атрибут

название >

головка >

< тела >

< h2 > GeeksforGeeks h2 >

< h3 > HTML действие Атрибут h3 >

 

     < форма действие = 900 44" тест.php "

: = " post "

= " Пользователи " >

< метки для = "имя пользователя" >

Имя пользователя:

метка >

< вход Тип = "Текст"

"Имя пользователя"

ID = "Имя пользователя" >

< BR >

         < 900 44 BR >

< = "Пароль" >

Пароль:

этикетки >

< = "Пароль"

4 = "Пароль" >

форма > +

< уш > +

< кнопка OnClick = "myGeeks ()" >

         Отправить

     кнопки >

<

< < >

< B > После отправки данные формы будут отправлены

       в файл «test.PHP "Страница на сервере. B >

>

HTML >

Выходы :


Browser Browsers: Браузер, поддерживаемый HTML Attribute , перечислены ниже:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Атрибут действия формы HTML


Атрибут действия тега FORM предоставляет URL-адрес программы (которая находится на сервере), которая получает информацию из формы и обрабатывает его.Этот URL-адрес также называется URL-адресом действия формы. Большинство серверов хранят эти программы обработки форм в корзине, известной как Common. Двоичные файлы интерфейса шлюза (cgi-bin)

Пример атрибута HTML-формы

Ниже приведен пример использования атрибута действия в теге FORM.

 <ФОРМА action="http://codescracker.com/cgi-bin/update"> 

Здесь обновляется имя программы, обрабатывающей форму, которая помещается в каталог CGI-BIN.Этот каталог находится на сайте codecracker.com. домен

Пример

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

Давайте создадим веб-страницу, скажем, formaction.html , чтобы понять использование атрибута действия. Вот исходный код formaction.html

 

<голова>
   Пример атрибута действия формы HTML

<тело>
   
      Имя: 
Фамилия:

Здесь мы установили для атрибута действия тега FORM значение action.асп .

Вам также необходимо создать HTML-страницу с именем action.html для перенаправления после отправки формы. Вот исходный код для файл action.html .



 

<голова>
   Форма отправлена

<тело>
    

Форма успешно отправлена.

<ч/>

Вернуться к учебнику

Атрибут действия формы HTML

Здесь мы включили ссылку атрибута действия HTML-формы. Вы можете это исключить.

При открытии файла formaction.html выходные данные отображаются на веб-странице, как показано на этом рисунке.

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

Это отправит форму и перенаправит вас на страницу action.html , как показано на этом рисунке.

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

Онлайн-тест HTML




« Предыдущий урок Следующее руководство »



Полное руководство по тегам форм HTML

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

Тег HTML используется для создания формы.

Тег

Форма по сути является контейнером для ввода.

Следующий код показывает базовую структуру формы:

<форма>

Здесь находятся элементы ввода

Есть два атрибута тега формы, с которыми мы должны быть знакомы:

  • Атрибут действия указывает на серверную часть нашей веб-страницы, которая обрабатывает отправку формы
  • Атрибут метода используется для загрузки данных.Наиболее часто используемые атрибуты — это методы GET и POST
  • .

Примечание. Форма не будет работать, пока не будет создана серверная часть.

Курс Full Stack Java Developer
В сотрудничестве с HIRIST и HackerEarthПОСМОТРЕТЬ КУРС

Элемент

HTML является основным элементом формы. Он может отображаться разными способами, в зависимости от его атрибутов.

Существует несколько типов входов. Вот некоторые из важных: 

Тип ввода Текст

определяет однострочное поле ввода текста.

Вот как приведенный выше HTML-код будет отображаться в браузере:

Тип ввода Пароль

определяет поле пароля.

Это даст следующий результат:

Тип ввода Отправить

определяет кнопку для отправки данных формы на страницу сервера.

Это приведет к следующему результату.

Тип входа Радио

определяет переключатель. Радиокнопка используется, когда нужно выбрать только один вариант из нескольких предложенных вариантов.

Это даст следующий результат:

Бесплатный курс: основы программирования
Изучите основы программированияЗарегистрируйтесь сейчас

Флажок типа ввода

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

Это даст следующий результат:

Элемент

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

Ваш адрес email не будет опубликован.