Definición y Uso
Para los elementos de botón, el type atributo especifica el tipo de botón.
Para los elementos de entrada, el type atributo especifica el tipo de <input> elemento para mostrar.
Para los elementos de menú, el type atributo especifica el tipo de menú.
Para empotrar, enlace, objeto, la escritura, la fuente y elementos de estilo, que atributo type especifica el tipo de medio de Internet (anteriormente conocido como tipo MIME).
Se aplica a
El type atributo se puede usar en los siguientes elementos:
| Elementos | Atributo |
|---|---|
| <button> | type |
| <embed> | type |
| <input> | type |
| <link> | type |
| <menu> | type |
| <object> | type |
| <script> | type |
| <source> | type |
| <style> | type |
Ejemplos
Button Ejemplo
Dos elementos de botón que actúan como un botón y un botón de reinicio (en forma) que presenten:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
Inténtalo tú mismo " Embed Ejemplo
Una animación flash integrada con un tipo de papel especificado:
<embed src="helloworld.swf"
type="application/vnd.adobe.flash-movie">
Inténtalo tú mismo " Input Ejemplo
Un formulario HTML con dos tipos diferentes de entrada; texto y presentar:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Inténtalo tú mismo " Link Ejemplo
En el siguiente ejemplo, el type atributo indica que el documento vinculado es una hoja de estilo externa:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
Inténtalo tú mismo " Menu Ejemplo
Un menú contextual:
<menu type="context" id="mymenu">
<menuitem label="Refresh"
onclick="window.location.reload();" icon="ico_reload.png">
</menuitem>
<menu label="Share on...">
<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="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu> Inténtalo tú mismo " Object Ejemplo
Un <object> elemento con un tipo de papel especificado:
<object width="400" height="400" data="helloworld.swf"
type="application/vnd.adobe.flash-movie"></object>
Inténtalo tú mismo " Script Ejemplo
Una secuencia de comandos con el type de atributo especificado:
<script type="text/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Inténtalo tú mismo " Source Ejemplo
El uso del type atributo:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Inténtalo tú mismo " Style Ejemplo
Utilice el type atributo para especificar el tipo de soporte de <style> etiqueta:
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
Inténtalo tú mismo " Soporte para el navegador
El type atributo tiene el siguiente soporte de los navegadores para cada elemento:
| Elemento | |||||
|---|---|---|---|---|---|
| button | Sí | Sí | Sí | Sí | Sí |
| embed | Sí | Sí | Sí | Sí | Sí |
| input | Sí | Sí | Sí | Sí | Sí |
| link | Sí | Sí | Sí | Sí | Sí |
| menu | No soportado | No soportado | 8.0 (Sólo type = "contexto") | No soportado | No soportado |
| object | Sí | Sí | Sí | Sí | Sí |
| script | Sí | Sí | Sí | Sí | Sí |
| source | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
| style | Sí | Sí | Sí | Sí | Sí |