Curso HTML 8.4 Botones de envío y reseteo (button, input type=’submit’)

2. <button type='submit'>

Con <button> podemos incluir contenido HTML (iconos, imágenes, etiquetas <span>…) dentro del botón. En HTML5, el valor por defecto de type es 'submit' si no se especifica.

• Puede contener HTML: 🛒 Comprar, <img src='icono.svg'>.
• Se puede estilizar más fácilmente (clases, pseudoelementos, etc.).
• Los mismos atributos de formulario (formaction, formmethod, etc.) se aplican.

3. <input type='reset'> y <button type='reset'>

Restablecen los valores de los controles a su estado inicial al cargarse la página. No envían nada al servidor; simplemente limpian los datos del formulario.

4. Ejemplos básicos

  <label for='usuario'>Usuario:</label>
  <input id='usuario' name='usuario' required><br>

  <label for='clave'>Contraseña:</label>
  <input id='clave' name='clave' type='password' required><br>

  <input type='submit' value='Acceder'>
  <input type='reset' value='Limpiar campos'>
</form>
  

  <label for='email'>Email:</label>
  <input id='email' name='email' type='email' required><br>

  <button type='submit'>
    <img src='icono-enviar.svg' alt='' aria-hidden='true'>
    <span>Enviar Correo</span>
  </button>

  <button type='reset'>Borrar Formulario</button>
</form>
  

5. Atributos de tipo <button>

• type: 'submit' (envío), 'reset' (limpiar), 'button' (no hace acción por defecto).
• name y value: al enviar, envían name=value.
• Los atributos form* de HTML5 funcionan igual que en <input>.

6. Envío con comportamiento personalizado

Podemos usar varios botones de envío en un mismo formulario, cada uno con formaction distinto:

  <label for='dato'>Dato:</label>
  <input id='dato' name='dato'><br>

  <input type='submit' value='Guardar' formaction='/guardar'>
  <input type='submit' value='Enviar por email'
         formaction='/mail' formmethod='post' formenctype='multipart/form-data'
         formtarget='_blank'>
</form>
  

7. Consideraciones de accesibilidad

• Usar aria-label o alt en imágenes incluidas.
• Proporcionar texto claro en el botón (value o contenido interno).
• Evitar botones vacíos o solo con iconos sin descripción.

8. Diferencias clave entre <input> y <button>

9. Buenas prácticas

• Especificar siempre type en <button> para evitar comportamientos indeseados.
• Usar formnovalidate en botones de envío que deban omitir la validación HTML5.
• Agrupar botones en un contenedor <div class='acciones'> para facilitar estilos y accesibilidad.

Con esto, tienes un panorama completo y profundo sobre cómo usar botones de envío y reseteo en tus formularios HTML, su sintaxis, atributos avanzados de HTML5 y recomendaciones prácticas para garantizar accesibilidad y un comportamiento consistente.