- html

Тег form в html — описание

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

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method. Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST, потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET.

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type. А именно:

submit: отправляет данные формы на сервер;
reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
button: не выполняет никаких действий;
menu: выводит меню.

fieldset: группирует наборы элементов управления по определенному критерию;
input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:

hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
text: элемент управления, используемый для ввода фрагмента текста одной строкой;
search: используется для ввода поисковой строки;
tel: элемент управления тега form, используемый для предоставления номера телефона;
url: текстовое поле, используемое для ввода одного абсолютного URL-адреса;
email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
password: текстовое поле для ввода паролей, в котором символы скрыты точками;
datetime: элемент управления для ввода даты и времени;
date: элемент управления для ввода определенной даты;
month: элемент управления для ввода определенного месяца;
week: элемент управления для ввода определенной недели;
time: элемент управления для ввода о времени;
number: элемент управления для ввода определенного числа;
range: для ввода одного или двух чисел в указанном диапазоне;
color: для ввода цвета;
checkbox: для ввода логического значения (истина / ложь);
radio: элемент управления, используемый для выбора одного из нескольких вариантов;
file: элемент управления, используемый для загрузки файлов на сервер;
submit: кнопка для отправки данных HTML тега form;
image: то же самое, что submit, но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
reset: кнопка, используемая для сброса значений элементов управления формы;
button: кнопка без назначенного действия по умолчанию.

keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
label: используется для вывода подписей для элементов управления формы;
object: объект представления и отображения вложенного контента;
output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
select: элемент управления для выбора одного или нескольких вариантов из списка;
textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
img: используется для вывода изображения.

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

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

Атрибуты

Атрибут	Значение	Описание
accept-charset	character_set	Указывает кодировки символов, которые будут использоваться для отправки формы
action	URL	Указывает, куда отправлять данные формы при отправке формы
autocomplete	onoff	Указывает, должна ли форма иметь автозаполнение включено или выключено
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Указывает, как данные формы должны быть закодированы при отправке их на сервер (только для method=»post»)
method	get post	Указывает метод HTTP, используемый при отправке данных формы
name	text	Указывает имя формы
novalidate	novalidate	Указывает, что форма не должна проверяться при отправке
rel	externalhelplicensenextnofollownoopener noreferreropenerprevsearch	Указывает связь между связанным ресурсом и текущим документом
target	_blank _self _parent _top	Указывает, где будет отображаться ответ, полученный после отправки формы

Задание №1

Описание задачи:

Заверните заголовки в правильные <h> тэги.

Главный заголовок — <h1> Подзаголовок — <h2> Второй и Третий — <h3>Текст нужно оформить как параграф — <p>

1.Главный заголовок Параграф, который рассказывает об основной идее сайта или приложения. Параграф, который рассказывает об основной идее сайта или приложения. Параграф, который рассказывает об основной идее сайта или приложения 1.1. подзаголовок Параграф, который относится к подзаголовку. Параграф, который относится к подзаголовку. Параграф, который относится к подзаголовку. 1.1.1. второй подзаголовок Параграф, который относится ко второму подзаголовку. Параграф, который относится ко второму подзаголовку. Параграф, который относится ко второму подзаголовку. 1.1.2. третий подзаголовок Параграф, который относится к третьему подзаголовку. Параграф, который относится к третьему подзаголовку. Параграф, который относится к третьему подзаголовку.

Attributes

Attribute	Value	Description
accept-charset	character_set	Specifies the character encodings that are to be used for the form submission
action	URL	Specifies where to send the form-data when a form is submitted
autocomplete	onoff	Specifies whether a form should have autocomplete on or off
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how the form-data should be encoded when submitting it to the server (only for method=»post»)
method	get post	Specifies the HTTP method to use when sending form-data
name	text	Specifies the name of a form
novalidate	novalidate	Specifies that the form should not be validated when submitted
rel	externalhelplicensenextnofollownoopener noreferreropenerprevsearch	Specifies the relationship between a linked resource and the current document
target	_blank _self _parent _top	Specifies where to display the response that is received after submitting the form

Какими бывают теги?

Большинство HTML-тегов являются парными: есть открывающий (например, <html>) и закрывающий тег, который от открывающего отличает слеш () после первой угловой скобки (например, </html>). Всё, что находится внутри пары тегов, называется их содержимым.

<Открывающий_тег>Содержимое</Закрывающий_тег>

<b>Помещённый внутри этих тегов текст становится жирным</b>

Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — <br>. Он устанавливает перенос текста на следующую строку.

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

Любой тег состоит из:

Открывающей угловой скобки (<).
Специального слова (имени тега). Например, hr, iframe, b.
Закрывающей угловой скобки (>).

Еще примеры

Пример

HTML форма с флажками:

<form action=»/action_page.php» method=»get»> <input
type=»checkbox» name=»vehicle1″ value=»Bike»> <label
for=»vehicle1″> У меня есть велосипед</label><br> <input type=»checkbox»
name=»vehicle2″ value=»Car»>
<label for=»vehicle2″> У меня есть машина</label><br>
<input type=»checkbox» name=»vehicle3″ value=»Boat» checked>
<label for=»vehicle3″> У меня есть лодка</label><br><br>
<input type=»submit» value=»Submit»>
</form>

Пример

HTML форма с радиокнопками:

<form action=»/action_page.php» method=»get»> <input type=»radio»
id=»male» name=»gender» value=»male»> <label
for=»male»>Мужской</label><br> <input type=»radio» id=»female»
name=»gender» value=»female» checked=»checked»> <label
for=»female»>Женский</label><br> <input type=»radio» id=»other»
name=»gender» value=»other»> <label for=»other»>Другое</label><br><br>
<input type=»submit» value=»Submit»></form>

Параметр TARGET

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

После того, как обработчик формы получает данные, он возвращает результат
в виде ШТМЛ-объекта. Вы можете определить окно, в которое будет загружаться
итоговая web-страница. Для этого используется параметр target,
в качестве его значения используется имя окна или фрейма. Если параметр target
не установлен, возвращаемый результат показывается в текущем окне.

Аргументы

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

_blank: Загружает страницу в новое окно браузера.
_self: Загружает страницу в текущее окно.
_parent: Загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр
работает как _self.
_top: Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов
нет, то этот параметр работает как _self.

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

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 — посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

Более подробное описание методов передачи через GET и POST читайте в уроках по PHP: использование методов GET и POST.

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

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

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

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

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

Ссылка на следующий урок: Урок 9. HTML тег div — подробное описание с примерами

More Examples

Example

An HTML form with checkboxes:

Example

An HTML form with radiobuttons:

<form action=»/action_page.php» method=»get»>
<input type=»radio» id=»html» name=»fav_language» value=»HTML»> <label
for=»html»>HTML</label><br> <input type=»radio» id=»css» name=»fav_language»
value=»CSS» checked=»checked»> <label for=»css»>CSS</label><br>
<input type=»radio» id=»javascript» name=»fav_language» value=»JavaScript»>
<label for=»javascript»>JavaScript</label><br><br> <input
type=»submit» value=»Submit»></form>

Задание №7

Описание задачи:

Отформатировать текст как на рисунке, используя теги для форматирования текста. Текст завернуть в тег <p>

Образец:

Требования:HTML — жирным, но не <b>Интернете — курсив, но не <i>помощью — подстрочныйобрабатывается — надстрочныйэкране в привычном для человека — уменьшен шрифт

Этот текст можно скопировать и вставить в окно редактора:

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

See the Pen
Форматирование by Alla (@AllaJan)
on CodePen.

Примеры

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

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

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

<form action="../../form-result.php" method="post" target="_blank">
 <p>Username: <input type="text" name="user"></p>
 <p>Password: <input type="password" name="pass"></p>
 <p><input type="submit" value="Send data"></p>
</form>

Во втором примере мы добавим в тег form новые элементы управления (пару переключателей и три чекбокса). Мы также добавим кнопку reset, чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.

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

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Full name: <input type="text" name="fullname"></label></p>
  <p>Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p><label>Address: <input type="text" name="address"></label></p>
  <p>Interests:
    <label><input type="checkbox" name="books"> Books</label>
    <label><input type="checkbox" name="movies"> Movies</label>
    <label><input type="checkbox" name="videogames"> Videogames</label>
  </p>
  <p><input type="submit" value="Send data"> <input type="reset" value="Reset form"></p>
</form>

В следующем примере мы немного изменим предыдущий HTML тег form форму, чтобы добавить некоторые из новых элементов управления HTML5: выбора даты, поле ввода номера телефона и выбор цвета. Кроме этого мы сгруппируем элементы управления с помощью fieldset.

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

Обратите внимание, что мы используем для атрибута method значение «GET» просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&…».

<form action="../../form-result.php" method="get" target="_blank">
  <fieldset>
    <legend>Basic information</legend>
    <p><label>Full name: <input type="text" name="fullname"></label></p>
    <p><label>Birth date: <input type="date" name="birthdate"></label></p>
    <p>Gender:
      <label><input type="radio" name="gender" value="male"> Male</label>
      <label><input type="radio" name="gender" value="female"> Female</label>
    </p>
    <p><label>Address: <input type="text" name="address"></label></p>
    <p><label>Phone number: <input type="tel" name="phone"></label></p>
  </fieldset>
  <fieldset>
    <legend>Extra information</legend>
    <p>Interests:
      <label><input type="checkbox" name="books"> Books</label>
      <label><input type="checkbox" name="movies"> Movies</label>
      <label><input type="checkbox" name="videogames"> Videogames</label>
    </p>
    <p><label>Favorite color: <input type="color" name="favoritecolor"></label></p>
  </fieldset>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

И, наконец, мы создадим тег form с возможностью загрузки файла

В этом примере нам нужно обратить внимание на пару атрибутов: method, который может принимать только значение «POST«, так как это единственный метод, который может передавать двоичные данные. И enctype, который должен иметь значение «multipart/form-data«

Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>File: <input type="file" name="ufile"></label> <input type="submit" value="Send data"></p>
</form>

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

HTML Теги

<!—…—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

Параметр METHOD

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Аргументы

Значение параметра method не зависит от регистра.
Различают два метода — GET и POST. Существуют и другие способы, но они пока мало используются.

GET: Этот метод является одним из самых распространенных и предназначен для получения
требуемой информации и передачи данных в адресной строке. Пары «имя=значение»
присоединяются в этом случае к адресу после вопросительного знака и разделяются
между собой амперсандом (символ &). Удобство использования метода GET
заключается в том, что адрес со всеми параметрами можно использовать неоднократно,
сохранив его, например, в «Избранное» браузера, а также менять
значения параметров прямо в адресной строке.
POST: Метод POST посылает на сервер данные в запросе браузера. Это позволяет отправлять
большее количество данных, чем доступно методу GET, поскольку у него установлено
ограничение в 4 Кб. Большие объемы данных используются в форумах, почтовых
службах, заполнении базы данных и т.д

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Тест с вопросами и интерактивными задачами по HTML

Для проверки своих знаний можно попробовать оценочный тест. В первом блоке идут 50 вопросов с вариантами ответов. Каждый вопрос оценивается в 1 балл. На ответ даётся 1 попытка.

Во втором блоке — интерактивные задачи с возможностью перетаскивания элементов, заполнения пропусков. В такой форме удобно не только на практике проверить свои знания, но и закрепить их. Даётся 3 попытки на каждый вопрос в случае ошибки.

По завершении вы получите суммарный балл и условно результат пройден/не пройден (80% баллов из возможных 120). Кроме того, будет возможность посмотреть на статистику своих результатов и увидеть правильные ответы.

Читайте больше по теме:

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>