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 | Да | Да | Да | Да | Да |
