Los botones son útiles en formularios para enviarlos, reestablecerlos o para ejecutar funciones personalizadas. Pueden ser insertados usando el tag HTML input (submit, reset e image) o el tag HTML button (botones con contenido).
Este tipo de botones envía automáticamente el formulario al ser presionados. Son insertados usando el tag HTML input con el valor "submit" para el atributo "type".
Este tipo de botones reestablecen los controles de un formulario a sus valores iniciales al ser presionados. Son insertados usando el tag HTML input con el valor "reset" para el atributo "type".
Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia de que lo los botones de imagen son mostrados visualmente con la imagen apuntada en el atributo "src". Estos botones además envían las coordinadas donde el click ha ocurrido (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas con el formulario como "boton1.x" y "boton1.y"). Son insertados usando el tag HTML input con el valor "image" para el atributo "type".
Los botones con contenido pueden ser usados como botones de envío o de reestablecimiento, o pueden no tener ninguna acción preestablecida (dependiendo del valor del atributo "type"), pero sí permiten a los autores insertar contenido dentro de ellos. Esto dignifica que un trozo de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <p><button type="button"> El <b>tag HTML button</b><br /> permite contenido.<br /> </button></p> </form> |
La entrada de archivos puede ser utilizada para subir archivos al servidor. El control muestra una caja de texto donde el usuario debe especificar la ubicación del archivo (que será procesada localmente por el navegador) que será enviado hacia el servidor. De esta forma, los autores pueden pedir a los visitantes el envío de archivos mediante la página. El control usualmente muestra un botón para elegir el archivo visualmente.
Nota que para formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag HTML form.
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php" enctype="multipart/form-data"> <p><input name="imagen" type="file" /></p> </form> |
Las etiquetas de los elementos pueden hacer que tu página se vea mejor y agregar una pequeña funcionalidad para navegadores visuales (cuando un visitante hace click en la etiqueta la acción es transmitida al control asociado), pero seguramente tendrán mucho sentido para personas con discapacidades o navegadores no visuales. Una etiqueta establece una relación entre un control y un trozo de texto (que se supone ha de dar un "título" para el control).
Las etiquetas pueden ser insertadas usando el tag HTML label y son asociadas al control mediante el atributo "for". Para lograr esto, el valor del atributo "for" del tag HTML label debe coincidir con el valor del atributo "id" del control.
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"><div> <label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br /> <label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br /> Género:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br /> <input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label> </div></form> |
Todos los elementos de un formulario pueden también ser agrupados temáticamente con el tag HTML fieldset. Este tag contiene a un grupo de controles que se relacionan unos con otros de alguna forma (por ejemplo, información personal, información laboral, información financiera, intereses, etc.).
El título para cada grupo de elementos puede establecerse con el tag HTML legend que debe ser definido justo a continuación del tag de apertura del fieldset, y proveer un título descriptivo para el grupo de controles.
| Código | Visualización |
|---|---|
|
<form method="post" action="manejador.php"> <fieldset> <legend>Información personal</legend> Nombre: <input type="text" name="nombre" /><br /> Apellido: <input type="text" name="apellido" /><br /> Dirección: <input type="text" name="pdireccion" /><br /> Teléfono: <input type="text" name="ptelefono" /> </fieldset> <fieldset> <legend>Información laboral</legend> Dirección: <input type="text" name="ldireccion" /><br /> Teléfono: <input type="text" name="ltelefono" /> </fieldset> </form> |
El uso de estas agrupaciones es amplio y depende de cada formulario específico, pero puede ser muy útil para los visitantes al llenar formularios largos (especialmente para navegadores no visuales).