САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

HTML Атрибут type



Определение и использование

Для элементов button, атрибут type указывает тип кнопки.

Для элементов input, атрибут type указывает тип элемента ввода для отображения.

Для элементов menu, атрибут type указывает тип меню.

Для элементов embed, link, object, script, source и style, атрибут type указывает тип носителя Интернета (ранее известный как тип MIME).


Применение

Атрибут type может использоваться для следующих элементов:

Элемент Атрибут
<button> type
<embed> type
<input> type
<link> type
<menu> type
<object> type
<script> type
<source> type
<style> type

Примеры

Пример Button

Два элемента button, которые действуют как одна кнопка отправки и одна кнопка сброса (в форме):

<form action="/action_page.php" method="get">
  Имя: <input type="text" name="fname"><br>
  Фамилия: <input type="text" name="lname"><br>
  <button type="submit" value="Отправить">Отправить</button>
  <button type="reset" value="Сброс">Сброс</button>
</form>
Попробуйте сами »

Пример Embed

Встроенная flash анимация с указанным типом носителя:

<embed src="helloworld.swf" type="application/vnd.adobe.flash-movie">
Попробуйте сами »

Пример Input

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

<form action="/action_page.php">
 Пользователь: <input type="text" name="usrname"><br>
 <input type="submit" value="Отправить">
</form>
Попробуйте сами »

Пример Link

В следующем примере атрибут type указывает, что связанный документ является внешней таблицей стилей:

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Попробуйте сами »

Пример Menu

Контекстное меню:

<menu type="context" id="mymenu">
  <menuitem label="Обновить" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Поделись...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Отправить страницу на электронную почту"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
Попробуйте сами »

Пример Object

Элемент <object> с указанным типом носителя:

<object width="400" height="400" data="helloworld.swf" type="application/vnd.adobe.flash-movie"></object>
Попробуйте сами »

Пример Script

Сценарий с указанным атрибутом type:

<script type="text/javascript">
document.getElementById("demo").innerHTML = "Привет JavaScript!";
</script>
Попробуйте сами »

Пример Source

Использование атрибута type:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент audio.
</audio>
Попробуйте сами »

Пример Style

Атрибут type используется для указания типа носителя тега <style>:

<style type="text/css">
h1 {color:red;}
p {color:blue;}

</style>
Попробуйте сами »

Поддержка браузеров

Атрибут type имеет следующую поддержку браузера для каждого элемента:

Элемент
button Да Да Да Да Да
embed Да Да Да Да Да
input Да Да Да Да Да
link Да Да Да Да Да
menu Не поддерживает Не поддерживает 8.0
(only type="context")
Не поддерживает Не поддерживает
object Да Да Да Да Да
script Да Да Да Да Да
source 4.0 9.0 3.5 4.0 10.5
style Да Да Да Да Да