Справочник HTML на E, F

теги, атрибуты и их значения

☚ В начало | Справочник HTML

Теги на буквы E, F:
<em>

Тег <em>


Тег <em> делает акцент на фрагменте текста, придавая ему особый смысл. Браузеры выделяют содержимое <em> курсивом.

Такое же начертание есть и у элемента <i>, но в отличие от <em>, он не несёт особого смысла, а используется для удобства пользователей.


Атрибуты

Для элемента доступны глобальные атрибуты.


Пример

<p>Пёс <em>обожает</em> сахарную косточку.</p>

Результат

Пёс обожает сахарную косточку.



<embed>

Тег <embed>


Тег <embed> служит для вставки на страницу объектов в сторонних форматах, типа PDF, видео, аудио или устаревших роликов Adobe Flash.

Сам тег <embed> явно устарел, а с его задачами лучше справляются схожие теги <object> или <iframe>.


Атрибуты

АтрибутФункцияЗначение
heightВысота.Целое положительное число в пикселях или процентах.
srcПуть к файлу.URL
typeMIME-тип объекта.MIME-тип.
widthШирина.Целое положительное число в пикселях или процентах.

Для элемента доступны глобальные атрибуты.


Синтаксис

<embed src="doc.pdf" type="application/pdf">


<fieldset>

Тег <fieldset>


Тег <fieldset> группирует элементы формы (<input>, <textarea>, <select> и др.), что делает её более понятной, например, когда один блок — для ввода текста, а другой — для списка с флажками.

Браузеры отображают содержимое элемента <fieldset> в рамке. А с помощью тега <legend> внутри <fieldset> можно задать заголовок для группы.


Атрибуты

АтрибутФункцияЗначение
disabledБлокирует поля формы в группе.Атрибут без значения (по умолчанию выключен).
formСвязывает группу с формой, когда элемент не располагается внутри <form>.Идентичен значению атрибута id элемента <form>.
nameУникальное имя группы.Имя.

Для элемента доступны глобальные атрибуты.


Пример

<form>
  <fieldset>
    <legend>Что нужно делать при виде зелёного человечка?</legend>
      <label><input type="radio" name="answer">Звонить в полицию</label>
      <label><input type="radio" name="answer">Обращаться к психиатру</label>
      <label><input type="radio" name="answer">Переходить улицу</label>
      <input type="reset">
  </fieldset>
</form>

Результат

Что нужно делать при виде зелёного человечка?



<figcaption>

Тег <figcaption>


Тег <figcaption> содержит описание для <figure>, в котором он обязательно должен быть первым или последним потомком этого элемента.

Разрешается использовать только один тег <figcaption> внутри <figure>. Подпись к картинке в <figcaption> должна отличаться от описания из атрибута alt.


Атрибуты

Нет.


Синтаксис

<figure>
    <img src="image.png" alt="..">
    <figcaption>подпись</figcaption>
</figure>


<figure>

Тег <figure>


Тег <figure> используют для вёрстки изображений, если его содержимое является автономным — имеет смысл в отрыве от текущего местоположения на странице, и содержит подпись в теге <figcaption>.

Применяется для иллюстраций, рисунков, чертежей, схем, графиков и фрагментов кода, а в подписи к ним даются пояснения.


Атрибуты

Для элемента доступны глобальные атрибуты.


Синтаксис

<figure>
    <img src="image.png" alt="..">
    <figcaption>подпись</figcaption>
</figure>


<footer>

Тег <footer>


Тег <footer> — это подвал сайта, в нём обычно указывают название компании, ссылки на разделы сайта, контактную и правовую информацию.

Тег <footer> может быть не только у всего сайта целиком, но и у отдельного раздела. <footer> нельзя вкладывать в теги <address>, <header> или другой <footer>, внутри него не должно быть элемента <main>.


Атрибуты

Для элемента доступны глобальные атрибуты.


Синтаксис

<body>
  <header>
      <!-- Шапка -->  
  </header>
  <main>
      <!-- Основное содержимое -->  
  </main>
  
  <footer>
      <!-- Подвал -->  
  </footer>
</body>


<form>

Тег <form>


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

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

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


Атрибуты

АтрибутФункцияЗначение
accept-charsetУстанавливает кодировку, в которой сервер принимает данные.Кодировка: Windows-1251, UTF-8 и др. Можно указать несколько кодировок, разделять их пробелами.
actionАдрес скрипта, который обрабатывает данные формы.URL
autocompleteВключает автозаполнение полей формы.on — включает автозаполнение формы (по умолчанию).
off — отключает автозаполнение. Используют для отмены сохранения в браузере важных данных (паролей, банковских карт) или уникальных данных (капча).
enctypeСпособ кодирования данных формы.application/x-www-form-urlencoded — вместо пробелов ставится "+", символы вроде кириллицы кодируются их шестнадцатеричными значениями (%D1%A0%D5%Хрен%Поймёшь..).
multipart/form-data — данные не кодируются, применяется при отправке через форму файлов.
text/plain — пробелы меняются на "+", остальные символы не кодируются.
methodМетод протокола HTTP.get — ответы пользователя дописываются к URL после вопросительного знака в формате «имя=значение» и разделяются между собой амперсандом. Например: site.ru/form?name=Denis&email=name@ya.ru. У метода GET есть ограничение: URL не должен превышать 3000 символов (по умолчанию).
post — данные из формы отправляются на сервер без ограничений по объёму.
dialog — если форма располагается внутри тега <dialog>, то при отправке данных диалоговое окно закрывается.
nameУникальное имя формы.Имя.
novalidateОтменяет встроенную проверку данных формы на корректность ввода.Атрибут без значения.
relОтношение между текущим и целевым документом, на который указывает форма.external — указывает, что целевой документ не является часть данного сайта.
help — ссылка на справочную систему.

Открыть все значения…license — описание лицензии на авторские права.
next — целевой документ является следующей частью группы документов.
nofollow — поисковая система не передаёт вес по этой ссылке.
noopener — блокирует доступ новой вкладке к вашей странице.
noreferrer — скрывает адрес вашей страницы от сайта, на который ведёт ссылка.
opener — открывает доступ новой вкладке к вашей странице.
prev — целевой документ является предыдущей частью группы документов.
search — поиск по сайту или текущему документу.

*Можно задать несколько значений через пробел.
targetИмя окна или фрейма, куда обработчик будет загружать возвращаемый результат._blank — загружает страницу в новой вкладке браузера;
_self — загружает страницу в текущую вкладку (по умолчанию);
_parent — загружает страницу в родительском окне, которое содержит фрейм;
_top — покидает фрейм и загружает страницу в полном окне браузера;
имя_фрейма — (заданное атрибутом name элемента <iframe>) открывает связанный документ в этом фрейме.

Для элемента доступны глобальные атрибуты.


Пример 1

<form action="" method="get">
    <label for="name">Ваше имя:
    <input type="text" name="name" required>
    </label>
    <label for="email">Ваш email:
    <input type="email" name="email" required>
    </label>
  <button type="submit">Отправить</button>
</form>

Результат




Пример 2

<form action="" method="post">
  <fieldset>
    <legend>Как человеку не спать 7 дней?</legend><br>
    <label><input type="radio" name="level">Проявить волю</label>
    <label><input type="radio" name="level">Ходить по кругу</label>
    <label><input type="radio" name="level">Спать по ночам</label>
  </fieldset>
</form>

Результат

Как человеку не спать 7 дней?


Популярное

Полезное

Получить книгу

Мы здесь

Поделиться материалом с друзьями:

Вверх