Botones de envío de formularios

Por último, y no por ello menos importante, tenemos los botones de envío de formulario. Si un formulario carece de estos botones, el usuario sólo puede enviarlo si pulsa ENTER en el último campo del formulario. No obstante, siempre es aconsejable incluir un botón explícitamente para que el usuario pueda pulsarlo y enviar el formulario sin confusión y de forma clara.

Tenemos varios tipos de botones que actúan sobre el formulario:

Tipo de botón de control	Etiqueta a utilizar	Ejemplo
Botón de envío de formulario	<input type="submit">
Botón de envío con imagen	<input type="image">
Botón de borrar formulario	<input type="reset">
Botón sin funcionalidad	<input type="button"> o <button>	Botón

Botón normal

El botón <input type="submit"> sirve para enviar el formulario una vez el usuario ha rellenado todos sus campos y pulsa en este botón. El texto por defecto del botón será Enviar (o equivalente según el idioma). Podemos modificar el texto del botón mediante el atributo value.

<form name="formulario" method="post" action="/send.php">
  <!-- Datos del formulario -->
  Usuario: <input type="text" name="usuario" />
  <!-- Botón de envío de formulario -->
  <input type="submit" value="Enviar formulario" />
</form>

Botón con imagen

El botón <input type="image"> es un botón que tiene la misma funcionalidad que el botón anterior, pero es un híbrido entre el botón <input type="submit"> y una etiqueta de imagen <img>, puesto que también posee los atributos src, alt, width y height para indicar una imagen que actuará de botón:

<form name="formulario" method="post" action="/send.php">
  <!-- Datos del formulario -->
  Usuario: <input type="text" name="usuario" />
  <!-- Botón de envío de formulario con imagen -->
  <input type="image" src="enviar.png" alt="Enviar" width="80" height="28" />
</form>

Botón de borrar (reset)

El botón <input type="reset"> nos ofrece la posibilidad de disponer de un botón que al pulsarse borre completamente el formulario y reestablece todos sus campos de entrada de datos a sus valores por defecto iniciales. Es muy útil si queremos que el usuario disponga de la posibilidad de borrar todos los campos del formulario fácilmente y no tener que hacerlo uno por uno.

<form name="formulario" method="post" action="/send.php">
  <!-- Datos del formulario -->
  Usuario: <input type="text" name="usuario" />
  <!-- Botón de envío de formulario -->
  <input type="submit" value="Enviar formulario" />
  <!-- Botón de reseteo de formulario -->
  <input type="reset" value="Borrar formulario" />
</form>

Cuidado al incluir el botón de reseteo al lado del botón de envío de formulario. Quizás sería una buena opción separarlos notablemente para evitar que el usuario lo pulse sin querer.

Botón alternativo

Los botones de envío de formulario habituales funcionan en base a los atributos action, enctype, method, target y novalidate de la etiqueta <form> que los contiene.

Sin embargo, es posible crear botones de envío alternativos que tengan un comportamiento de envío diferente a los botones por defecto. Para ello, tenemos que crear un botón de envío <input type="submit"> o <input type="image"> e incluir los atributos formaction, formenctype, formmethod, formtarget y formnovalidate respectivamente, según nos interese, ya que sobreescribirán el comportamiento por defecto del formulario:

<form name="formulario" method="post" action="/send.php">
  <!-- Datos del formulario -->
  Usuario: <input type="text" name="usuario" />
  <!-- Botón por defecto, hace caso a atributos de <form> -->
  <input type="submit" value="Enviar" />
  <!-- Botones con datos de envío alterados -->
  <input type="submit" value="Enviar al dpto. marketing" formaction="/send-mkt.php" />
  <input type="submit" value="Enviar al dpto. informática" formaction="/send-sat.php" />
</form>

Botón personalizado

Por último, tenemos el botón <input type="button"> o la etiqueta <button>, que en ambos casos añade un botón sin ninguna funcionalidad por defecto. Podemos redefinir la funcionalidad de este botón, pero necesitaríamos Javascript para dotarle de una funcionalidad concreta, por lo que no podríamos hacer mucho sin este lenguaje.

A continuación un pequeño ejemplo muy básico:

<button onClick="alert('¡Hola, señor!')">Saludar</button>