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 | Полный список всех тегов и атрибутов по алфавиту

 

 

Справочник тегов и атрибутов 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 для начинающих - справочник тегов и атрибутов

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

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

*

ПОДПИШИСЬ!

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

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

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> может содержать один или более следующих элементов формы:

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

Атрибуты

АтрибутЗначениеОписание
acceptfile_typeНе поддерживается в HTML5.
Определяет разделенный запятыми список типов файлов, которые принимает сервер (который может быть представлен через загрузку файлов).
accept-charsetcharacter_setОпределяет кодировку, используемую в представленной форме (значением по умолчанию является зарезервированная строка «unknown», которая указывает, что кодировка соответствует кодировке документа, содержащего элемент <form>).
actionURLОпределяет адрес, куда отправляется форма (по умолчанию действие установлено на текущую страницу).
autocompleteon
off
Указывает может ли браузер автоматически заполнять элементы формы (по умолчанию — включен). Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее (если не отключено настройками браузера).
enctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
Определяет способ кодирования данных формы при их отправке. Значение по умолчанию application/x-www-form-urlencoded.
methodget
post
Атрибут определяет какой метод HTTP (get или post) используется при передаче формы. Метод get используется по умолчанию.
nametextОпределяет имя формы, которое используется для идентификации (задает имя для формы).
novalidatenovalidateУказывает, что проверка данных на корректность, введенных пользователем в форму не производится.
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>Не поддерживается. Определяет выровненный текст

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

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