Атрибут type уточняет, что именно записано в теге: какое поле создать, что сделает кнопка, как читать скрипт, какой нумерацией вывести список. Единого смысла у него нет: действие и допустимые значения зависят от тега, в котором он прописан. Чаще всего type встречается у <input>, <button>, <script>, <link> и <ol>.
В этой статье
- Что такое атрибут type в HTML
- Для каких тегов нужен атрибут type
- Значения атрибута type у input: все типы полей
- Что будет, если атрибут type не указан или написан неверно
- Как изменить type у input через JavaScript
- Атрибут type у button: submit, reset и button
- Атрибут type у script: module, importmap и блок данных
- Атрибут type у ol: нумерация буквами и римскими цифрами
- type у link, source, a, embed и object: MIME-тип файла
- Устаревший атрибут type: ul, li, style, menu, area
- Частые ошибки с атрибутом type
- Шпаргалка по атрибуту type
Что такое атрибут type в HTML
Слово type переводится как «тип», и в каждом теге оно отвечает за своё. У <input> атрибут выбирает вид поля (текст, пароль, флажок, дата), у <button> действие при нажатии, у <script> способ обработки содержимого, у <ol> стиль номеров. У <link>, <source>, <embed> и <object> в type записывают MIME-тип файла: это условное название вида файла, например text/css для стилей или image/png для картинки.
Записывают type одинаково везде: в открывающем теге, значение в кавычках. Регистр букв не важен, поэтому type="EMAIL" и type="email" браузер понимает одинаково. Ниже четыре примера type, и результат у каждого свой.
<input type="checkbox">
<input type="color" value="#2f6fde">
<ol type="I">
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>
<form>
<input value="Текст">
<button type="reset">Очистить</button>
</form>Каждая карточка показывает запись и результат. Последнюю проверьте сами: измените текст и нажмите кнопку, поле вернётся к исходному.
Для каких тегов нужен атрибут type
В стандарте HTML type есть у девяти тегов. Значения у каждого свои, и пользоваться ими нужно по правилам именно этого тега. В таблице собрано, что задаёт type и как его записать.
| Тег | Что задаёт type | Допустимые значения | Пример записи |
|---|---|---|---|
<input> | Вид поля ввода | 22 значения, по умолчанию text (раздел ниже) | <input type="email" name="mail"> |
<button> | Действие кнопки | submit (по умолчанию), reset, button | <button type="button">Открыть</button> |
<ol> | Стиль номеров списка | 1 (по умолчанию), a, A, i, I | <ol type="I"> |
<script> | Вид содержимого | не указан или JavaScript, module, importmap, speculationrules; любое другое значение делает тег блоком данных | <script type="module" src="app.js"></script> |
<link> | MIME-тип файла по адресу из href | text/css для стилей, image/png для значка сайта | <link rel="stylesheet" type="text/css" href="style.css"> |
<source> | MIME-тип файла | image/webp, video/mp4, audio/mpeg | <source type="image/webp" srcset="photo.webp"> |
<a> | Подсказка о типе файла по ссылке | MIME-тип, например application/pdf | <a href="price.pdf" type="application/pdf">Прайс</a> |
<embed> | MIME-тип встраиваемого файла | application/pdf | <embed type="application/pdf" src="doc.pdf"> |
<object> | MIME-тип встраиваемого файла | application/pdf | <object type="application/pdf" data="doc.pdf"></object> |
У <select>, <textarea>, <label>, <img> и остальных тегов атрибута type в стандарте нет, браузер его не использует. Многострочное поле создаёт тег <textarea>, выпадающий список тег <select>, и записывать для них type="textarea" не нужно.
Значения атрибута type у input: все типы полей
Начинать с тега <input> удобнее всего: у него больше всего значений, ровно 22. Выберите любое в списке. Кадр создаёт настоящее поле, показывает запись и коротко объясняет, чем этот вид отличается от остальных.
<input type="text" name="name">
<input type="email" name="mail">
<input type="date" name="birthday">В списке все 22 значения. Под полем показана запись и описание выбранного вида.
Все значения собраны в таблице вместе с записью, которую можно скопировать. Описания учитывают, чем вид поля отличается от обычного текстового.
| Значение | Что создаёт | Пример записи |
|---|---|---|
text | Однострочное текстовое поле. Так браузер читает поле, если type не указан. | <input type="text"> |
password | Поле для пароля: символы скрыты точками. В форму текст уходит как есть, без шифрования. | <input type="password"> |
email | Поле для адреса почты. При отправке формы браузер проверяет, что в тексте есть @, а на телефоне показывает клавиатуру с этим знаком. | <input type="email"> |
tel | Поле для телефона. Формат браузер не проверяет, зато на телефоне открывается цифровая клавиатура. | <input type="tel"> |
url | Поле для адреса сайта. Браузер проверяет, что адрес начинается с такой части, как https://. | <input type="url"> |
search | Поле поиска. Выглядит как текстовое, а в некоторых браузерах в нём появляется крестик очистки. | <input type="search"> |
number | Поле для числа со стрелками. Принимает только число, границы задают атрибуты min и max. | <input type="number" min="1" max="10"> |
range | Ползунок. Если value не указан, ползунок находится посередине, и в форму уходит число 50. | <input type="range" min="0" max="100"> |
color | Выбор цвета. Значение всегда записывается как #rrggbb, по умолчанию это #000000. | <input type="color"> |
date | Выбор даты: день, месяц и год. В форму значение уходит в виде 2026-10-11. | <input type="date"> |
datetime-local | Выбор даты и времени без часового пояса. | <input type="datetime-local"> |
month | Выбор месяца и года. | <input type="month"> |
week | Выбор номера недели и года. | <input type="week"> |
time | Ввод времени: часы и минуты. | <input type="time"> |
checkbox | Флажок: можно отметить или снять. Если value не прописан, в форму уходит слово on. | <input type="checkbox" name="agree"> |
radio | Переключатель. Поля с одинаковым name образуют группу, в которой отмечено только одно. | <input type="radio" name="pay" value="card"> |
file | Кнопка выбора файла. Значение скриптом задать нельзя, его выбирает только пользователь. | <input type="file"> |
hidden | Скрытое поле: на странице его не видно, но значение уходит вместе с формой. | <input type="hidden" name="id" value="25"> |
image | Картинка, которая работает как кнопка отправки формы. Нужны атрибуты src и alt. | <input type="image" src="go.png" alt="Найти"> |
submit | Кнопка отправки формы. | <input type="submit"> |
reset | Кнопка, которая возвращает все поля формы к начальным значениям. | <input type="reset"> |
button | Кнопка без действия по умолчанию: что она делает, решает скрипт. | <input type="button"> |
Выбирайте самое точное значение. Поле с type="email" вместо type="text" даёт проверку адреса и нужную клавиатуру на телефоне без единой строки скрипта. Подробный разбор видов полей есть в уроке «Поля ввода: input и его типы».
Что будет, если атрибут type не указан или написан неверно
Если type нет, он пустой или содержит неизвестное слово, браузер не показывает ошибку, а создаёт обычное текстовое поле. Поэтому опечатка в слове email остаётся незамеченной, пока вы не проверите форму. Кадр ниже читает свойство type у каждого поля и показывает, как браузер понял запись.
<input>
<input type="EMAIL">
<input type=" email">
<input type="emial">
<input type="datetime">
<input type="textarea">
<input type="">Красным выделены записи, которые браузер заменил на text: их шесть из семи. Только EMAIL понят как email, регистр букв значения не меняет.
Из этого следуют три правила. Регистр букв не важен. Пробелы по краям значение не очищают, поэтому " email" и "email" разные записи. Слов, которых нет в стандарте, например datetime, string, integer, boolean, textarea или select, браузер не знает и всегда создаёт текстовое поле: вместо datetime нужно писать datetime-local.
Как изменить type у input через JavaScript
Атрибут type можно менять скриптом: свойство type у поля читает и меняет значение атрибута. Классический пример - кнопка «Показать пароль», которая переключает поле между password и text.
Показать и скрыть пароль
<input id="pw" type="password" value="Qwerty-2026">
<button id="tg" type="button">Показать</button>
<script>
const pw = document.getElementById('pw');
document.getElementById('tg').addEventListener('click', () => {
pw.type = pw.type === 'password' ? 'text' : 'password';
});
</script>Нажмите кнопку: текст в поле остаётся прежним, меняется только его вид и значение type под полем.
Что происходит с текстом при смене type
Меняя type у заполненного поля, помните: новое значение может не принять старый текст. Если в поле написано abc и вы переключите его на number, браузер очистит поле, потому что слово не является числом. Обратно текст уже не вернётся. У type="file" значение скриптом вообще нельзя задать: такая попытка вызывает ошибку.
const f = document.getElementById('f');
f.value = 'abc';
f.type = 'number'; // f.value теперь пустая строка
f.type = 'text'; // f.value по-прежнему пустая строкаНажмите «type = number»: поле очистится, а возврат к text текст не восстановит. Вернуть abc можно последней кнопкой.
Атрибут type у button: submit, reset и button
У тега <button> три значения. Если type не прописан, работает submit: кнопка внутри <form> отправляет форму. Из-за этого забытый type - частая причина того, что страница «сама перезагружается» после нажатия кнопки, которая должна была только запустить скрипт.
| Значение | Что делает кнопка в форме | Пример записи |
|---|---|---|
submit | Отправляет форму. Это значение по умолчанию. | <button type="submit">Отправить</button> |
reset | Возвращает все поля формы к начальным значениям. | <button type="reset">Очистить</button> |
button | Сама ничего не делает, нужна для скрипта. | <button type="button">Открыть меню</button> |
<form>
<input value="Привет">
<button>Без type</button>
<button type="button">type=button</button>
<button type="reset">type=reset</button>
<button type="submit">type=submit</button>
</form>Измените текст и нажмите каждую кнопку. «Без type» и submit отправляют форму (счётчик растёт), button не делает ничего, а reset возвращает в поле слово «Привет».
Пустое или неверное значение читается как submit, как и отсутствие атрибута. Вне формы кнопка ничего не отправляет, но её можно привязать к форме атрибутом form. Аналогично работает и <input type="submit">: подробности и сравнение с <button> есть в уроке «Кнопки: button vs input type=submit».
Атрибут type у script: module, importmap и блок данных
В теге <script> атрибут type сообщает браузеру, что находится внутри: код, который нужно выполнить, или данные, которые трогать не нужно. Для обычного скрипта type не нужен вообще: без него браузер и так читает содержимое как JavaScript, а запись type="text/javascript" считается лишней.
| Значение | Что делает браузер | Пример записи |
|---|---|---|
| не указан, пустая строка или JavaScript MIME-тип | Выполняет как обычный скрипт. | <script src="app.js"></script> |
module | Выполняет как модуль: внутри можно писать import и export. Загрузка откладывается сама, поэтому defer и charset не нужны. | <script type="module" src="app.js"></script> |
importmap | Читает JSON с таблицей: какому названию модуля в import соответствует какой файл. | <script type="importmap">{"imports": {"lib": "/lib.js"}}</script> |
speculationrules | Читает JSON с правилами предзагрузки страниц. Работает не во всех браузерах. | <script type="speculationrules">{"prefetch": []}</script> |
| любое другое значение: application/json, text/plain, text/template | Не выполняет. Тег становится блоком данных, а атрибут src игнорируется. | <script type="application/json" id="cfg">{"n": 42}</script> |
<script>window.a = 1</script>
<script type="text/javascript">window.b = 1</script>
<script type="module">window.c = 1</script>
<script type="application/json">{"n": 42}</script>
<script type="text/plain">window.e = 1</script>Нажмите «Добавить» в каждой строке. Скрипты без type, с text/javascript и module выполнились, а json и plain нет. Данные из json при этом читаются: они остаются в теге.
Блок данных удобен, чтобы передать странице настройки: JSON из такого тега читается через textContent, как в кадре выше. По той же причине не работает скрипт с type="text/babel", если на странице не подключена библиотека, которая его ищет: для браузера это просто данные. Адрес внешнего скрипта задаёт атрибут src.
Атрибут type у ol: нумерация буквами и римскими цифрами
У тега <ol> type выбирает, чем нумеровать пункты: цифрами, буквами или римскими цифрами. Значений пять, и любое другое слово браузер заменяет обычными цифрами.
| Значение | Нумерация | Пример записи |
|---|---|---|
1 | 1, 2, 3 (по умолчанию) | <ol type="1"> |
a | a, b, c | <ol type="a"> |
A | A, B, C | <ol type="A"> |
i | i, ii, iii | <ol type="i"> |
I | I, II, III | <ol type="I"> |
<ol type="A" start="5">
<li>Заготовка</li>
<li>Проверка</li>
<li>Публикация</li>
</ol>Выберите type и укажите start: меняются и запись, и список. Значение z список не принимает и показывает цифры. С буквами start=27 даёт нумерацию aa, ab, ac.
Если буквы или римские цифры нужны только для внешнего вида, оформляйте список CSS-свойством list-style-type со значениями upper-roman и lower-alpha. Атрибут type лучше оставить для случаев, когда номер важен как часть смысла: например, на пункт ссылаются в тексте словами «см. пункт B».
type у link, source, a, embed и object: MIME-тип файла
У этих тегов в type записывают MIME-тип файла. Формат всегда один: «вид/подвид», например text/css, image/webp, video/mp4 или application/pdf.
link: файл стилей с неверным type не применится
У тега <link> type нужен не всегда: для стилей его можно не писать, браузер и так считает файл стилями. Но если вы его прописали, значение должно быть верным. Слово, которое не означает CSS, заставляет браузер пропустить файл. Как записывать сам тип подключаемого файла, показывает атрибут rel.
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/stylesheet" href="style.css">Зелёный фон дают подключённые стили. Запись type="text/stylesheet" ошибочна: такого MIME-типа нет, и файл не применился.
source: браузер выбирает первый подходящий тип
Внутри <picture>, <video> и <audio> теги <source> перечисляют файлы разных форматов, а type позволяет браузеру пропустить формат, который он не умеет показывать, и даже не скачивать такой файл. Выбирается первый подходящий вариант, а запасной выход - обычный <img>.
<picture>
<source type="image/webp" srcset="photo.webp">
<source type="image/png" srcset="photo.png">
<img src="photo.jpg" alt="Фото">
</picture>В первой карточке тип image/x-nope браузер не поддерживает: источник пропущен, показан запасной зелёный файл. Во второй image/png подходит, поэтому взят красный файл.
a, embed и object
У <a> type - только подсказка о том, какой файл находится по адресу. Браузер ничего не блокирует: ссылка откроется как обычно, даже если тип указан неверно. У <embed> и <object> MIME-тип важнее: по нему браузер понимает, чем показывать встроенный файл. Если тип <object> не подходит, браузер показывает запасное содержимое внутри тега.
<a href="price.pdf" type="application/pdf">Прайс-лист (PDF)</a>
<embed type="application/pdf" src="price.pdf">
<object type="image/x-nope" data="photo.png">
<img src="photo.jpg" alt="Фото">
</object>В первой карточке type подходит, и показан файл из data. Во второй тип image/x-nope не поддерживается, поэтому показано содержимое внутри тега.
Устаревший атрибут type: ul, li, style, menu, area
У пяти тегов type раньше был, а теперь считается устаревшим. Браузеры многое из этого по-прежнему понимают, но писать такой код не нужно. В таблице указано, что делал атрибут и чем его заменить.
| Тег | Что делал type | Чем заменить | Статус |
|---|---|---|---|
<ul> | Вид маркера: disc, circle или square | CSS-свойство list-style-type | устарел |
<li> | Вид маркера одного пункта | CSS-свойство list-style-type у li | устарел |
<style> | Вид стилей, обычно text/css | Ничего не писать: без type браузер читает содержимое как CSS | устарел |
<menu> | Вид меню: контекстное или панель инструментов | Ничем: сейчас тег menu работает как обычный список | устарел |
<area> | Тип документа по адресу из href | Ничего не писать, подсказка не нужна | устарел |
<ul type="square">
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>
<ul style="list-style-type: square">
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>Оба списка выглядят одинаково: браузеры пока понимают устаревший type, но записывать его не нужно.
Частые ошибки с атрибутом type
Большинство проблем с type не вызывают ошибок в консоли, поэтому их находят только по странному поведению. Вот самые частые случаи.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
<button>Открыть</button> без type внутри формы | Нажатие отправляет форму, страница перезагружается | Прописать type="button" |
type="emial" с опечаткой | Браузер молча создаёт текстовое поле, адрес не проверяется | Исправить слово по таблице значений |
type=" email" с пробелом | Пробел не отбрасывается, поле становится text | Убрать пробел |
type="textarea" или type="select" у input | Получается обычное текстовое поле | Использовать теги textarea и select |
type="datetime" | Такого значения нет, поле становится text | Записать datetime-local |
type="number" для телефона, индекса или номера карты | Поле принимает только число, и такие данные неудобно вводить | Использовать tel или text |
Переключить заполненное поле на number | Текст, который не является числом, пропадает без возврата | Сохранить значение в переменную до смены type |
Задать value у type="file" скриптом | Скрипт получает ошибку | Файл выбирает только пользователь |
type="text/javascript" у каждого script | Работает, но запись лишняя | Убрать type |
type="application/json" у скрипта с кодом | Код не выполняется: тег стал блоком данных | Убрать type или записать module |
type="text/stylesheet" у link | Файл стилей не применяется | Убрать type или записать text/css |
type="module" вместе с defer | Модуль и так загружается с откладыванием, defer ничего не меняет | Оставить только type="module" |
type у ul и li | Атрибут устарел | CSS-свойство list-style-type |
<a type="application/pdf"> как защита от другого файла | Это подсказка: ничего не проверяется и не блокируется | Проверять тип файла на сервере |
Шпаргалка по атрибуту type
Если нужно быстро вспомнить, что прописать, смотрите сюда. Столбец «Тег» ведёт на отдельную страницу справочника.
| Что нужно | Что прописать | Тег |
|---|---|---|
| Поле для почты | <input type="email"> | <input> |
| Поле для пароля | <input type="password"> | <input> |
| Флажок и переключатель | type="checkbox" и type="radio" | <input> |
| Выбор даты | <input type="date"> | <input> |
| Кнопка отправки формы | <button type="submit"> | <button> |
| Кнопка, которая только запускает скрипт | <button type="button"> | <button> |
| Модуль JavaScript | <script type="module" src="app.js"></script> | <script> |
| Данные в странице | <script type="application/json"> | <script> |
| Нумерация римскими цифрами | <ol type="I"> | <ol> |
| Запасной формат картинки | <source type="image/webp" srcset="a.webp"> | <source> |
| Файл стилей | <link rel="stylesheet" href="style.css"> (type не нужен) | <link> |
