Html теги и атрибуты справочник с примерами – Полный список тегов и атрибутов HTML5. Фишки html в мире сайтостроения. Website.MirLive.com

HTML теги

Теги это строительные блоки в HTML. Все что можно увидеть на веб-странице и с чем можно взаимодействовать реализовано при помощи тегов HTML.

Теги имеют следующий формат: <имя_тега атрибут1=»значение» атрибут2=»значение»>данные</имя_тега> (например, <a href=’something.html’ title=’something’>Ссылка</a>) или <имя_тега атрибут1=»значение» атрибут2=»значение» /> (например, <input type=»text» name=»bob» />).

В данном справочнике содержится информация обо всех тегах HTML 4.01 и HTML5 с описанием, примерами и атрибутами.

<!—…—>	Вставляет комментарии
body	Определяет тело HTML документа
br	Вставляет разрыв строки
DOCTYPE	Декларация типа HTML документа
h2-h6	Определяют HTML заголовки
hr	Определяет тематический разрыв контента
html	Определяет, что это HTML-документ
p	Определяет текстовый параграф
title	Определяет титульный заголовок страницы

abbr	Определяет аббревиатуру
acronym	Определяет акроним
address	Определяет информацию об авторе статьи или документа
b	Определяет жирное начертание текста
bdi	Изолирует текст от изменения направления вывода
bdo	Устанавливает направление вывода текста
big	Увеличивает размер текста
blockquote	Определяет цитату внутри документа
center	Используется для выравнивания текста по центру
cite	Определяет название работы, цитату или сноску на другой документ
code	Определяет программный код
del	Определяет удаленный текст
dfn	Определяет первое появление нового термина
em	Определяет акцентированный текст
font	Определяет характеристики шрифта текст
i	Устанавливает начертание текста курсивом
ins	Определяет новый добавленный текст
kbd	Определяет текст, набранный на клавиатуре
mark	Определяет выделенный текст
meter	Определяет оценочный индикатор
pre	Определяет заранее форматированный текст
progress	Определяет индикатор прогресса выполнения задачи
q	Определяет короткую цитату внутри документа
rp	Определяет текст для вывода в браузерах, не поддерживающих элемент <ruby>
rt	Определяет небольшую аннотацию к тексту
ruby	Предназначен для добавления небольшой аннотации
s	Определяет нерелевантный текст
samp	Определяет текст, который является результатом вывода компьютерной программы
small	Уменьшает размер текста
strike	Определяет перечеркнутый текст
strong	Определяет важный текст
sub	Определяет текст в виде нижнего индекса
sup	Определяет текст в виде верхнего индекса
time	Определяет дату/время
tt	Определяет телетайпный текст
u	Определяет подчеркнутый текст
var	Определяет переменную компьютерной программы
wbr	Определяет место для переноса строки в тексте

button	Определяет кнопку формы
datalist	Определяет предопределенные варианты значений для элемента <input>
fieldset	Используется для группирования родственных элементов формы
form	Используется для создания HTML форм
input	Определяет поле ввода HTML формы
keygen	Определяет поле-генератор ключей
label	Определяет метку для элемента <input>
legend	Определяет заголовок для элемента <fieldset>
optgroup	Используется для группирования родственных вариантов выбора
option	Определяет отдельные пункты в выпадающем списке выбора
output	Представляет результаты вычислительных операций
select	Используется для создания выпадающего списка
textarea	Определяет многострочное текстовое поле ввода

frame	Определяет фрейм внутри фреймовой структуры
frameset	Определяет фреймовую структуру
iframe	Определяет встроенный фрейм
noframes	Определяет информацию, которая выводится, когда нет поддержки фреймов

area	Определяет активные области в карте-изображении
canvas	Определяет область, в которой можно рисовать при помощи скриптов
figcaption	Определяет подпись к элементу <figure>
figure	Используется для группирования различных самодостаточных элементов
img	Вставляет изображение
map	Определяет карту-изображение

audio	Позволяет в браузере проигрывать звуковые файлы
source	Определяет медиа ресурс для медиа элементов
track	Определяет текстовую дорожку для медиа элементов
video	Позволяет в браузере проигрывать видео файлы

a	Определяет гипертекстовую ссылку
link	Определяет ссылку на внешний ресурс
nav	Определяет набор ссылок навигации

dd	Используется для создания определения термина в списке определений
dir	Определяет список директорий (системных папок)
dl	Создает список определений
dt	Создает термин в списке определений
li	Создает элемент списка
menu	Определяет список/меню команд
menuitem	Определяет команду/пункт меню
ol	Создает упорядоченный (нумерованный) список
ul	Создает неупорядоченный (маркированный) список

caption	Определяет пояснительный заголовок таблицы
col	Определяет свойства для каждого столбца таблицы
colgroup	Определяет группу из одного или более столбцов таблицы для форматирования
table	Определяет HTML таблицу
tbody	Группирует основное содержимое HTML таблицы
td	Определяет стандартную ячейку HTML таблицы
tfoot	Группирует содержимое нижнего колонтитула HTML таблицы
th	Определяет заголовочную ячейку HTML таблицы
thead	Группирует содержимое верхнего колонтитула HTML таблицы
tr	Определяет строку HTML таблицы

article	Определяет автономный контент
aside	Определяет блок сбоку от основного контента
details	Определяет дополнительную информацию
dialog	Создает диалоговое окно
div	Определяет блок кода HTML документа
footer	Определяет «подвал» документа или раздела
header	Определяет «шапку» документа или раздела
main	Определяет основное содержимое документа
section	Определяет раздел документа
span	Используется для группирования строчных элементов
style	Определяет CSS стили на уровне веб-страницы
summary	Определяет заголовок для элемента <details>

base	Определяет базовые URL для ссылок на странице
basefont	Определяет цвет, размер и шрифт текста по умолчанию
head	Является контейнером для всех головных элементов документа
meta	Определяет мета-информацию о HTML документе

applet	Вставляет в код страницы Java апплет
embed	Определяет контейнер для внешнего приложения
noscript	Определяет контент, который будет отображаться, если браузер не поддерживает скрипты
object	Вставляет в код страницы программный объект
param	Определяет параметры для программных объектов
script	Определяет скрипты, исполняемые на стороне пользователя

HTML Атрибуты

---

---

Атрибуты содержат дополнительную информацию об элементах HTML.

---

• Все HTML элементы могут иметь атрибуты
• Атрибуты содержат дополнительную информацию об элементе
• Атрибуты указываются в открывающем теге
• Атрибутами обычно бывают парными имя/значение: name="value"

---

Атрибут lang

Язык документа может быть объявлен в теге <html>

Язык объявляется с помощью атрибута lang.

Объявить язык важно для специальных приложений (программ чтения с экрана) и поисковых систем:

Первые две буквы указывают язык en. Если есть диалект, использовать еще две буквы US).

---

Атрибут title

Атрибут title добавляется к элементу <p>. Значение атрибута title отображается в виде всплывающей подсказки при наведении указателя мыши на параграф:

Пример

<p title=»Я подсказка»>
При наведении мыши на параграф, отобразится атрибут title в качестве подсказки.
</p>

Редактор кода »

---

Атрибут href

HTML-ссылки определяются с помощью тега <a>. Адрес ссылки указан в атрибуте href:

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

---

Размер атрибута

HTML изображения, определенны с помощью тега <img>.

Имя файла источника src, размер изображения width и height — это все атрибуты:

Размер изображения указывается в пикселах: width="104" значит 104 пикселей по ширине экрана.

Вы узнаете больше о картинки и теге <img> позже в этом учебнике.

---

Атрибут alt

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

Значение атрибута может быть чтением с экрана. Таким образом, кто-то «видит», а слепой человек может»слышать» альтернативный текст на веб-сайте.

---

Мы рекомендуем: использовать строчные атрибуты

Стандарт HTML5 не требует строчные буквы в именах атрибутов.

Атрибут title может быть написан с прописными или строчными буквами, title или TITLE.

W3C в HTML рекомендует нижний регистр, а XHTML более строгие типы документов требует строчная буквы.

На SchoolsW3 мы всегда используем строчные буквы атрибутов.

---

Мы предлагаем: кавычки для значений атрибутов

Стандарт HTML5 не требует кавычек вокруг значений атрибутов.

Атрибуты href, могут быть написаны как:

W3C в HTML рекомендует кавычки, а XHTML более строгие типы документов требует кавычки.

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

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

---

Одинарные или двойные кавычки?

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

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

<p title=’John «ShotGun» Nelson’>

Или наоборот:

<p title=»John ‘ShotGun’ Nelson»>

---

Краткое содержание

• Все HTML элементы могут иметь атрибуты
• Атрибут title предоставляет дополнительные информацию «подсказки»
• Атрибут href содержит адрес ссылки
• Атрибуты width и height предоставить информацию о размере изображений
• атрибут alt содержит текст для чтения с экрана
• На SchoolsW3 мы всегда использовать строчные имена атрибутов
• На SchoolsW3 мы всегда используем для значения атрибутов двойные кавычки

---

HTML Упражнения

Проверте себя с помощью упражнений

Упражнение:

Добавить «всплывающую подсказку» к нижеприведенному абзацу с текстом «О SchoolsW3».

<p =»О SchoolsW3″> О SchoolsW3 сайт веб-разработчика.</p>

Отправить ответ »

Начните упражнения

---

Атрибуты HTML

Ниже приведен алфавитный список некоторых атрибутов часто используются в HTML:

Атрибуты	Описание
alt	Указывает альтернативный текст для изображения, когда изображение не может быть отображено
disabled	Указывает, что элемент input должен быть отключен
href	Задает URL-адрес (веб-адрес) по ссылке
id	Задает уникальный идентификатор для элемента
src	Задает URL-адрес (веб-адрес) для изображения
style	Задает встроенный стиль CSS для элемента
title	Определяет дополнительную информацию об элементе (отображается как всплывающая подсказка)

Полный список всех атрибутов для каждого элемента HTML, в: Справочник HTML-атрибутов.

---

HTML для начинающих — справочник тегов и атрибутов

Справочник тегов и атрибутов HTML | Таблица

 

Справочник тегов и атрибутов HTML | Полный список всех тегов и атрибутов по алфавиту

 

 

Справочник тегов и атрибутов HTML | Таблица

Теги (тэги) название	Краткое описание тегов
A	A
<a>	Используется для создания ссылок и якорей.
<abbr>	Применяется для вставки аббревиатуры. По умолчанию пунктирное подчеркивание.
<acronym>
<address>
<applet>
<area>
B	B
<b>
<base>
<basefont>
<bdo>
<bgsound>
<big>
<body>
<blink>
<blockquote>
<br>
<button>
C	C
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<comment>
D	D
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
E	E
<em>
<embed>
F	F
<fieldset>
<font>
<form>
<frame>
<frameset>
H	H
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<hr>
<html>
I	I
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
K	K
<kbd>
L	L
<label>	Используется для создания ссылок и якорей.
<li>	Используется для создания ссылок и якорей.
<link>	Используется для создания ссылок и якорей.
M	M
<map>
<marquee>	Используется для создания бегущей строки на странице
<meta>
N	N

 

Устаревшие теги и атрибуты html

 

Устаревшие теги и атрибуты в html | Список

Теги и атрибуты название	Краткое описание тегов и атрибутов

Устаревшие теги и атрибуты в html | Список

Новые теги html5 — для чего нужны и примеры использования

Новые теги html5 | Список и описание

Будь вместе с Я Блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

*

ПОДПИШИСЬ!

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.

Поделиться в соцсетях

HTML Справочник тегов по категории

= новый в HTML5.

Тег	Описание
<!DOCTYPE>	Определяет тип документа
<html>	Определяет документ в HTML
<head>	Определяет информацию о документе
<title>	Определяет название для документа
<body>	Определяет тело документа
<h2> до <h6>	Определяет заголовки
<p>	Определяет параграф
<br>	Вставляет разрыв строки
<hr>	Определяет тематическое изменение в содержании
<!—…—>	Определяет комментарий
Тег	Описание
<acronym>	Не поддерживается в HTML5. Лучше используйте <abbr>. Определяет акроним
<abbr>	Определяет аббревиатуру или акроним
<address>	Определяет контактную информацию для автора/владельца из документа/статьи
<b>	Определяет полужирный текст
<bdi>	Изолирует часть текста, которая может быть отформатирована в другом направлении, от другого текста за его пределами
<bdo>	Переопределяет текущее направление текста
<big>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет большой текст
<blockquote>	Определяет раздел, заключенный в кавычки из другого источника
<center>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет центрированный текст
<cite>	Определяет название из работы
<code>	Определяет часть из компьютерного кода
<del>	Определяет текст, который был удален из документа
<dfn>	Представляет определяющий экземпляр термина
<em>	Определяет подчеркнутый текст
<font>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет шрифт, цвет и размер текста
<i>	Определяет часть текста альтернативным голосом или настроением
<ins>	Определяет текст, вставленный в документ
<kbd>	Определяет ввод с клавиатуры
<mark>	Определяет выделенный / выделенный текст
<meter>	Определяет скалярное измерение в известном диапазоне (датчик)
<pre>	Определяет форматированный текст
<progress>	Представляет ход выполнения задачи
<q>	Определяет короткую цитату
<rp>	Определяет, что показывать в браузерах, которые не поддерживают аннотации ruby
<rt>	Определяет объяснение/произношение символов (для Восточно-Азиатской типографии)
<ruby>	Определяет аннотацию ruby (для Восточно-Азиатской типографии)
<s>	Определяет текст, который больше не является правильным
<samp>	Определяет пример вывода из компьютерной программы
<small>	Определяет меньший текст
<strike>	Не поддерживается в HTML5. Лучше используйте <del> или <s>. Определяет зачеркнутый текст
<strong>	Определяет строгий текст
<sub>	Определяет подстрочный текст
<sup>	Определяет надстрочный текст
<template>	Определяет шаблон
<time>	Определяет дату/время
<tt>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет текст телетайпа
<u>	Определяет текст, который должен стилистически отличаться от обычного текста
<var>	Определяет переменную
<wbr>	Определяет возможный разрыв строки
Тег	Описание
<form>	Определяет форму HTML для пользовательского ввода
<input>	Определяет ввод управления
<textarea>	Определяет многострочный ввод (текстовое поле)
<button>	Определяет кликабельную кнопку
<select>	Определяет раскрывающийся список
<optgroup>	Определяет группу связанных параметров в раскрывающемся списке
<option>	Определяет параметр в раскрывающемся списке
<label>	Определяет метку для элемента <input>
<fieldset>	Группирует связанные элементы в форме
<legend>	Определяет заголовок для элемента <fieldset>
<datalist>	Задает список предопределенных параметров для элементов управления вводом
<output>	Определяет результат вычисления
Тег	Описание
<frame>	Не поддерживается в HTML5. Определяет окно (фрейм) в наборе кадров
<frameset>	Не поддерживается в HTML5. Определяет набор фреймов
<noframes>	Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, не поддерживающих фреймы
<iframe>	Определяет встроенный фрейм
Тег	Описание
<img>	Определяет изображение
<map>	Определяет клиентскую карту изображений
<area>	Определяет область внутри изображения карты
<canvas>	Используется для рисования графики по ходу, с помощью скриптов (обычно код JavaScript )
<figcaption>	Определяет заголовок для элемента <figure>
<figure>	Задает автономное содержимое
<picture>	Определяет контейнер для нескольких ресурсов изображений
<svg>	Определяет контейнер для графики SVG
Тег	Описание
<audio>	Определяет звук контента
<source>	Определяет несколько ресурсов мультимедиа для элементов медиа (<video>, <audio> и <picture>)
<track>	Определяет текстовые дорожки для элементов медиа (<video> и <audio>)
<video>	Определяет видео или фильм
Тег	Описание
<a>	Определяет гиперссылку
<link>	Определяет связь между документом и внешним ресурсом (наиболее часто используемым для связи с таблицами стилей)
<nav>	Определяет навигацию ссылок
Тег	Описание
<ul>	Определяет неупорядоченный список
<ol>	Определяет упорядоченный список
<li>	Определяет элемент списка
<dir>	Не поддерживается в HTML5. Лучше используйте <ul>. Определяет каталог списка
<dl>	Определяет описание списка
<dt>	Определяет термин/имя в списке описания
<dd>	Определяет описание термина/имени в списке описания
<menu>	Определяет список/меню команд
<menuitem>	Определяет команду/меню, которые пользователь может вызвать из всплывающего меню
Тег	Описание
<table>	Определяет таблицу
<caption>	Определяет заголовок в таблицы
<th>	Определяет заголовк ячейки в таблице
<tr>	Определяет строку в таблице
<td>	Определяет ячейку в таблице
<thead>	Группирует содержимое заголовка в таблице
<tbody>	Группирует содержимое тела в таблице
<tfoot>	Группирует содержание нижнего колонтитула в таблице
<col>	Задает свойства столбца для каждого столбца в элементе <colgroup>
<colgroup>	Задает группу из одного или нескольких столбцов в таблице для форматирования
Тег	Описание
<style>	Определяет информацию о стиле документа
<div>	Определяет контейнер в документе
<span>	Определяет промежуток в документе
<header>	Определяет заголовок документа или раздела
<footer>	Определяет нижний колонтитул для документа или раздела
<main>	Определяет основное содержание документа
<section>	Определяет раздел в документе
<article>	Определение статьи
<aside>	Определяет содержимое из содержимого страницы
<details>	Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<dialog>	Определяет диалоговое окно или окно
<summary>	Определяет видимый заголовок элемента <details>
<data>	Связывает данный контент с машиночитаемым переводом
Тег	Описание
<head>	Определяет информацию о документе
<meta>	Определяет метаданные о документе HTML
<base>	Задает базовый URL/цель для всех относительных URL адресов в документе
<basefont>	Не поддерживается в HTML5. Лучше используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе
Тег	Описание
<script>	Определяет клиентский сценарий
<noscript>	Определяет альтернативное содержимое для пользователей, не поддерживающих клиентские сценарии
<applet>	Не поддерживается в HTML5. Лучше используйте <embed> или <object>. Определяет встроенный апплет
<embed>	Определяет контейнер для внешнего (не-HTML) приложения
<object>	Определяет внедренный объект
<param>	Определяет параметр для объекта

Учебник HTML 5. Статья «Атрибуты»

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

W3C (Консорциум Всемирной паутины) рекомендует использование нижнего регистра, как в тегах, так и в написании атрибутов. Атрибуты, как правило, записываются таким образом: имя = «значение». В элементе допускается использовать несколько атрибутов в любом порядке, но при этом необходимо разделять их пробелом (только пробелом и больше никак).

---

Как мы с Вами поняли, на примере тега <img>, рассмотренного в предыдущей статье, некоторые теги используются только совместно с атрибутами (бесполезны сами по себе). Еще один нюанс использования атрибутов заключается в том, что если для тега явным образом не задан атрибут, то это значит, что значение этого атрибута установлено по умолчанию браузером пользователя.

---

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

<p title = 'Валерий "ББПЕ" Сюткин'>текст параграфа </p> <!-- значение атрибута в одинарных, кавычки в тексте двойные -->

или наоборот:

<p title = "Валерий 'ББПЕ' Сюткин">текст параграфа </p> <!-- значение атрибута в двойных, кавычки в тексте одинарные -->

Давайте рассмотрим пример в котором используем атрибут title к тегу <p>, благодаря которому при наведении на параграф мышью, значение атрибута будет отображаться в виде всплывающей подсказки:

<!DOCTYPE html> 
<html>
	<head>
		<title>Пример использования атрибута title</title>
	</head>
	<body>
		<p title = "Валерий 'ББПЕ'
		Сюткин">Российский певец и музыкант, автор текстов песен для рок-н-ролл группы «Браво».<br> 
		Заслуженный артист России, профессор кафедры вокала и художественный руководитель эстрадного отделения МГГУ имени М. А. Шолохова.</p> 
	</body>
</html> 

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

Рис. 11 Пример использования атрибута title к тегу <p>.

Атрибут lang

Давайте теперь поговорим о таком атрибуте как lang, основная его функция это определить язык содержимого внутри элемента. Например, атрибут lang, применённый к тегу <html> указывает язык содержимого веб-страницы (для всего текста на странице).

---

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

---

Атрибут имеет следующий синтаксис:

lang = "Код языка"

Код языка, подразумевает собой сокращенное наименование, состоящее из двух букв которые определяют язык содержимого. Если у языка есть диалект, то через дефис добавляют еще две буквы (например, США lang =»en-us»).

Пример использования атрибута в мультиязычном документе:

<!DOCTYPE html> 
<html lang =  "ru"> <!-- указывает язык содержимого веб-страницы -->
	<head>
		<title>Пример использования атрибута lang</title>
	</head>
	<body>
		<p lang =  "es"> ¿Por qué necesita una traducción? </p> <!-- Этот параграф интерпретируется как испанский -->
		<p>И дальше по тексту интерпретация языка продолжается на русском <p> 
	</body>
</html> 

В этом примере основной язык документа является русский («ru»), а один абзац объявлен на испанском языке («es»).

Полный перечень кодов вы можете найти в разделе «Коды языков».

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

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

Атрибут	Значение
dir	Определяет направление текста содержимого элемента.
id	Определяет уникальный идентификатор для элемента. Атрибут должен использоваться только один раз в конкретном HTML документе.
lang	Определяет язык содержимого в элементе.
style	Задает встроенный CSS стиль для элемента.
title	Указывает дополнительную текстовую подсказку о содержимом при наведении курсора на элемент.

---

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив с текстовым файлом и изображениями:


• Используя полученные знания составьте следующий мультиязычный документ HTML:

Практическое задание № 3.

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

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

HTML теги

Значение и применение

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

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

---

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

---

Элемент имеет следующий синтаксис:

<form>
элементы формы
</form>

Элемент <input> является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу.

Элемент <form> может содержать один или более следующих элементов формы:

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

Атрибуты

Атрибут	Значение	Описание
accept	file_type	Не поддерживается в HTML5. Определяет разделенный запятыми список типов файлов, которые принимает сервер (который может быть представлен через загрузку файлов).
accept-charset	character_set	Определяет кодировку, используемую в представленной форме (значением по умолчанию является зарезервированная строка «unknown», которая указывает, что кодировка соответствует кодировке документа, содержащего элемент <form>).
action	URL	Определяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу).
autocomplete	on off	Указывает может ли браузер автоматически заполнять элементы формы (по умолчанию — включен). Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее (если не отключено настройками браузера).
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	Определяет способ кодирования данных формы при их отправке. Значение по умолчанию application/x-www-form-urlencoded.
method	get post	Атрибут определяет какой метод HTTP (get или post) используется при передаче формы. Метод get используется по умолчанию.
name	text	Определяет имя формы, которое используется для идентификации (задает имя для формы).
novalidate	novalidate	Указывает, что проверка данных на корректность, введенных пользователем в форму не производится.
target	_blank _self _parent _top framename	При помощи атрибута мы задаём браузеру, где показать ответ, полученный после отправки формы (вкладка, текущее окно, или фрейм). По умолчанию установлено значение _self — отображает ответ в текущем окне.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML форм</title>
	</head>
	<body>
		<form>
			Имя: <input type = "text"  name = "firstname" value =  "Введите имя"> <br> <br>
			Фамилия: <input type = "text" name = "lastname" value =  "Введите фамилию"> <br> <br>
			Мужчина <input  type = "radio" name = "sex" value =  "male" checked>
			Женщина <input type = "radio" name = "sex" value =  "female"> <br> <br>
			О себе: <br>
			<input type = "checkbox" name = "type1" value = "low">Меньше 18<br>
			<input type = "checkbox" name = "type2" value = "2old">От 18 до 35<br>
			<input type = "checkbox" name = "type3" value = "high">Больше 35<br>
			<input type = "checkbox" name = "type4" value = "busy">Женат /-а<br>
			<input type = "checkbox" name = "type5" value = "cat">Есть кошка<br>
			<br>
			<input type = "submit" name = "submit" value = "отправить">
		</form>
	</body>
</html>

И так по порядку, что мы сделали в этом примере:

• Разместили два однострочных текстовых поля (<input type = «text»>) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента <input> этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
• Разместили две радиокнопки (<input type = «radio»>) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных.
Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male). Он применяется только для полей <input type = «checkbox»> и <input type = «radio»>, в противном случае он игнорируется.
• Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
• Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы (<input type = «submit»>).

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

Пример использования HTML форм (элемент <form>).

Отличия HTML 4.01 от HTML 5

В HTML5 добавлены два новых атрибута: autocomplete и novalidate, атрибут accept был удалён.

Значение CSS по умолчанию

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

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Полный список тегов и атрибутов HTML5. Фишки html в мире сайтостроения. Website.MirLive.com

Тег	Краткое описание
<comment>	Определяет комментарий
<DOCTYPE>	Определяет тип документа
<a>	Определяет гиперссылки
<abbr>	Определяет аббревиатуру
<acronym>	Не поддерживается. Определяет акроним
<address>	Определяет элемент с адресом
<applet>	Не поддерживается. Определяет апплет
<area>	Определяет область внутри изображения карты
<article>	Определяет статью
<aside>	Определяет контент в стороне от основного контента страницы
<audio>	Определяет аудио контент
<b>	Определяет жирный текст
<base>	Определяет базовый URL для всех относительных ссылок на странице
<basefont>	Не поддерживается. Используетя вместо CSS для задания шрифта
<bdo>	Определяет направление отображения текста
<big>	Не поддерживается. Определяет большой текст
<blockquote>	Определяет длинную цитату
<body>	Определяет элемент тела документа
<br>	Вставка одного разрыва строки
<button>	Определяет кнопку
<canvas>	Определяет графики
<caption>	Определяет заголовок (подпись) таблицы
<center>	Не поддерживается. Определяет текст по центру
<cite>	Определяет цитату или сноску на материал
<code>	Определяет, что текст является программным кодом
<col>	Определяет атрибуты для столбцов таблицы
<colgroup>	Определяет групп столбцов таблицы
<command>	Определяет командную кнопку
<datagrid>	Определяет данные в упорядоченный список
<datalist>	Определяет выпадающий список
<datatemplate>	Определяет шаблон данных
<dd>	Определяет описание определения
<del>	Определяет удаленный текст
<details>	Определяет детали элемента
<dialog>	Определяет диалог (разговор)
<dir>	Не поддерживается. Определяет список директорий
<div>	Определяет секцию (блок) в документе
<dfn>	Определяет определение термина
<dl>	Определяет список определений
<dt>	Определяет определение термина в списке
<em>	Определяет выделенный текст
<embed>	Определяет внешний интерактивный контент или плагин
<eventsource>	Определяет цель события, отправляемого по серверу
<fieldset>	Определяет сгруппированный набор полей формы
<figure>	Определяет группу медиа-контента, и их подписи
<font>	Устаревший. Определяет шрифт текста, размер и цвет
<footer>	Определяет нижний колонтитул для раздела или страницы
<form>	Определяет форму
<frame>	Не поддерживается. Определяет фрейм
<frameset>	Не поддерживается. Определяет набор фреймов
<h2> по <h6>	Определяет заголовок с 1 по 6 заголовок
<head>	Определяет информацию о документе
<header>	Определяет область заголовка раздела или страницы
<hr>	Определяет горизонтальную линию
<html>	Определяет html документ
<i>	Определяет курсив
<iframe>	Определяет встроенный фрейм
<img>	Определяет изображение
<input>	Определяет поле ввода
<ins>	Определяет вставленный (обновленный) текст
<isindex>	Не поддерживается. Определяет поисковый индекс в документе
<kbd>	Определяет текст, набранный на клавиатуре
<label>	Определяет метку для элемента формы
<legend>	Определяет заголовок группы элементов формы
<li>	Определяет элемент списка
<link>	Определяет ссылку на ресурс
<mark>	Определяет выделенный текст
<map>	Определяет изображение карты
<menu>	Определяет список меню
<meta>	Определяет мета-информацию
<meter>	Определяет измерения в течение заранее определенного диапазона
<nav>	Определяет навигационные ссылки
<nest>	Определяет вложенную точку в шаблоне данных
<noframes>	Не поддерживается. Определяет секцию, не поддерживающую фрейм
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт)
<object>	Определяет внедренный объект
<ol>	Определяет упорядоченный список
<optgroup>	Определяет группу вариантов в раскрывающемся списке
<option>	Определяет вариант в раскрывающемся списке
<output>	Определяет некоторые виды результата
<p>	Определяет параграф (абзац)
<param>	Определяет параметр для объекта
<pre>	Определяет выровненный (форматированный) текст
<progress>	Определяет ход выполнения задачи любого рода
<q>	Определяет краткую цитату
<rule>	Определяет правила для обновления шаблонов
<s>	Не поддерживается. Определяет зачеркнутый текст
<samp>	Определяет образец программного кода
<script>	Определяет сценарий (скрипт)
<section>	Определяет раздел (секцию)
<select>	Определяет список для выбора
<small>	Определяет мелкий текст
<source>	Определяет медиа-ресурсы
<span>	Определяет раздел в документе
<strike>	Не поддерживается. Определяет зачеркнутый текст
<strong>	Определяет выделенный жирный текст
<style>	Определяет определение стиля
<sub>	Определяет индексным текст
<sup>	Определяет надстрочным текст
<table>	Определяет таблицу
<tbody>	Определяет тело таблицы
<td>	Определяет ячейку таблицы
<textarea>	Определяет область ввода текста
<tfoot>	Определяет колонтитул таблицы
<th>	Определяет заголовок ячейки таблицы
<thead>	Определяет заголовок таблицы
<time>	Определяет дату/время
<title>	Определяет название документа
<tr>	Определяет строку таблицы
<tt>	Не поддерживается. Определяет телетайп текст
<u>	Не поддерживается. Определяет подчеркнутый текст
<ul>	Определяет неупорядоченный список
<var>	Определяет переменную
<video>	Определяет видео
<xmp>	Не поддерживается. Определяет выровненный текст