Escrito por Eugenia Molinero
En todos los sitios web existen acciones que ejecuta el usuario que se resuelven mediante formularios: hacer una búsqueda, completar encuestas, realizar consultas, enviar un adjunto, etc. Y el caso más habitual es el formulario de contacto que permite enviar un mensaje sin necesidad de salir del sitio.
En este apunte describiremos la etiqueta <form> y otras etiquetas que permiten crear algunos elementos de formularios.
Es importante aclarar que mediante HTML podemos crear formularios y sus elementos (campos de texto, botones, etc.), pero para procesar la información y ejecutar el envío se requiere de otros lenguajes como PHP o ASP.
Esta etiqueta incluye todos los contenidos del formulario, ya sean campos de texto, botones o checkboxes. Es una etiqueta de bloque por lo tanto la podemos afectar desde css como a cualquier caja contenedora.
Tiene dos atributos obligatorios. El primero es el atributo "action" que define la ruta al archivo que procesará los datos. El segundo es el atributo "method" que representa el método para enviar el archivo. Aquí tenemos dos valores posibles: "post" para formularios que envían mayor cantidad de información (por ejemplo los formularios de contacto), y el valor "get" lo utilizan formularios que procesan menos información y devuelven algunos datos (por ejemplo, los campos de búsqueda).
La etiqueta básica de formulario queda asi:
<form action="la url del archivo PHP que procesará los datos" method="post">
...acá todos los elementos del formulario
</form>Esta etiqueta define a la mayoría de los elementos o controles de formulario.
<input type=" " name=" ">Este atributo indica el tipo de elemento que estamos incluyendo. Los más habituales son "text", "email", "number". En su apariencia muestran campos de texto, sólo que admiten distinto tipo de contenido. También existen otros valores como "date", "radio", checkbox".
Le asigna un nombre a ese campo y resulta fundamental para el funcionamiento y el procesamiento de los datos. No debemos confundirnos el name con el texto que se ve en la página como título del campo.
Este atributo permite escribir una sugerencia dentro del input, por ejemplo "Juan Perez" donde el usuario debería escribir su nombre y apellido. El navegador muestra este texto en color gris claro y desaparece en el momento en que se coloca el cursor dentro del campo.
Es válido a partir de html5 e indica la obligatoriedad de completar ese campo. Si el usuario no lo completa y trata de enviar, el navegador le mostrará una advertencia. La obligación de completar el campo no es visible sólo por poner este atributo, será necesario indicarlo a través de un asterisco.
<input type="text" name="nombre" placeholder="Juan Perez" required>El ejemplo anterior se vería así:
Esta etiqueta define un campo especial donde el usuario puede escribir un texto más extenso, por ejemplo una consulta. Tiene etiqueta de cierre. Dentro de ambas etiquetas se puede escribir un texto predefinido y editable para que el usuario envíe. Este texto no es equivalente al placeholeder -que también puede aplicarse a esta etiqueta- sino que sirve para dejar redactada una consulta posible.<textarea>Solicito información acerca de tal producto.</textarea>
El ejemplo anterior se vería así:
Esta etiqueta establece el título o consigna de cada campo de formulario. Una de las ventajas de esta etiqueta es que aumenta la accesibilidad sobre los campos, ya que si uno hace click cerca de esta consigna igualmente colocará el cursor dentro del campo de texto listo para empezar a escribir. La forma más sencilla de vincular al <label> con el campo que identifica, es encerrándolo de esta manera:<label>Nombre: <input type="text" name=" "></label>
El botón de envío también es un elemento de formulario que se define con la etiqueta <input>. El type es "submit" y le agregamos el atributo "value" que se completa con el texto que queremos que se vea en el botón. Por ejemplo:<input type="submit" value="Enviar consulta">
Este <input> no necesita ser encerrado por la etiqueta <label>. Se vería así:
Luego del preparar la estructura en HTML de todo el formulario es necesario agregar estilos CSS utilizando selectores de etiqueta, de clase o id y luego resolver el envío con lenguaje PHP o ASP.
