Lección 16. Botones.

La etiqueta button permite crear botones interactivos dentro de un formulario o en cualquier parte de la página.

Nota: A diferencia de los inputs button, la etiqueta <button> puede contener no solo texto, sino tambien iconos o elementos HTML.

Copiar código
<button>Click aquí</button>

Los botones pueden ejecutar diferentes acciones dependiendo del valor asignado al atributo type.

Tipo button._

El valor button crea un botón sin acción por defecto. No envía formularios, no reinicia, no hace nada por sí solo. Se utiliza junto con JavaScript para ejecutar acciones personalizadas.

Copiar código
<button type="button">Hacer algo</button>

Nota: Este botón solo actúa cuando se le programa un evento.

Tipo reset._

Este tipo de botón reinicia todos los valores del formulario a su estado inicial.

Copiar código
<form>
  <input type="text" placeholder="Escribe algo">
  <button type="reset">Reiniciar</button>
</form>

Nota: Al hacer click, los campos vuelven a su estado original.

Tipo submit._

Este es el botón más importante de los formularios. El valor submit envía el formulario al servidor o activa la acción definida en Javascript.

Copiar código
<form>
  <input type="text" placeholder="Usuario">
  <button type="submit">Enviar</button>
</form>

Nota: Al hacer click, el formulario intenta enviarse. Si hay validaciones como required o pattern, estas se aplicarán automáticamente.

Botones con contenido HTML._

La etiqueta button permite incluir iconos, negritas,imágenes o cualquier otro elemento HTML dentro.

Copiar código
<button type="button">
  <b>✔</b> Guardar
</button>

Esto lo hace más flexible que input type="button".

En resumen._