El Atributo TYPE

El atributo type en HTML es fundamental para definir el comportamiento o tipo de contenido de un elemento. Su uso varía según la etiqueta en la que se aplica, lo que permite personalizar formularios, scripts, estilos y más. A continuación, se detalla su uso en diferentes contextos:

1. Atributo type en <input>

Define el tipo de campo de entrada en formularios. Es esencial para validación, accesibilidad y experiencia del usuario.

Tipos comunes de <input>:

Ejemplo completo:

<form>
  <input type="email" placeholder="Correo" required>
  <input type="password" placeholder="Contraseña" required>
  <input type="date">
  <input type="submit" value="Registrarse">
</form>

2. Atributo type en <script> y <style>

Especifica el lenguaje del script o estilo.

En <script>:

• text/javascript (valor predeterminado).

• module: Para usar módulos ES6.

<script type="text/javascript">
  console.log("Hola, mundo");
</script>

<script type="module" src="app.js"></script>

En <style>:

• text/css (valor predeterminado).

<style type="text/css">
  body { font-family: Arial; }
</style>

3. Atributo type en <link>

Indica el tipo de recurso enlazado (usado con rel).

Ejemplos:

4. Atributo type en <button>

Controla el comportamiento del botón en formularios.

Ejemplo:

<button type="button" onclick="alert('Hola')">Saludar</button>
<button type="reset">Reiniciar</button>
<button type="submit">Enviar</button>

5. Otros usos del atributo type

• En <ol>: Define el tipo de numeración (type="1", "A", "a", "I", "i").

  html

  Copy

  <ol type="A">
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
  </ol>

   

• Run HTML

• En <embed> o <object>: Especifica el tipo MIME del recurso incrustado.

  html

  Copy

  <embed type="video/mp4" src="video.mp4">

   

• Run HTML

6. Buenas prácticas

1. Usa el tipo correcto en <input>: Mejora la validación y experiencia en móviles (ej.: type="email" abre el teclado adecuado).

2. Evita redundancias: En <script> y <style>, el tipo predeterminado (text/javascript y text/css) puede omitirse.

3. Prioriza accesibilidad: Usa type="button" en botones que no envíen formularios para evitar comportamientos inesperados.

Conclusión

El atributo type es clave para:

• Definir el comportamiento de elementos como <input>, <button>, y <script>.

• Garantizar validación y accesibilidad en formularios.

• Especificar tipos de contenido en recursos enlazados.

Ejemplo integrado:

<form>
  <input type="text" placeholder="Nombre" required>
  <input type="email" placeholder="Correo" required>
  <input type="date" required>
  <button type="submit">Enviar</button>
</form>

<link rel="stylesheet" href="estilos.css">
<script type="module" src="app.js"></script>

Con este tutorial, podrás utilizar el atributo type efectivamente en tus proyectos HTML.