HTML: Formularios - Parte 1

Un formulario web (en inglés web form) permite al usuario introducir datos para que sean enviados a un servidor web para que sean procesados.

Usamos formularios cuando ingresamos nuestros datos al registrarnos en un sitio web, al realizar búsquedas con un buscador, al realizar compras electrónicas. En fin los formularios están presente en prácticamente en todos los sitios web.

La intención de usar un formulario es proporcionar una forma en que nuestros usuarios puedan ingresar datos a nuestro sitio web. Los formularios actúan tanto del lado cliente (cuando el usuario ingresa los datos), como del lado servidor (cuando los datos son enviados para ser procesados o almacenados).

Etiquetas para formularios

Form

Es la etiqueta que contiene el formulario. Todo lo que se desea enviar al servidor debe estar entre las etiquetas <form> y </form>. Atributos:

• action: Es un atributo requerido en la etiqueta <form>. En "action" podemos especificar la "url" o ruta destino que va a procesar el formulario. Se puede utulizar una ruta absoluta o una ruta relativa.
• method: Es un atributo opcional. Especifica el método de envío del formulario. Puede tener dos opciones que son "GET" que es la opción por defecto de no especificarla y "POST". 
• GET: Cuando especificamos "GET", los datos son enviados al servidor unas parejas del tipo "nombre = valor" que se agregan a la url y son visibles. Esta forma de envío está limitada, cuyo límite depende del navegador usado o del sistema operativo del servidor. Usamos GET cuando la información no es importante y en formularios básicos o sencillos.
• POST: De esta forma, los datos no son visibles y se envían de una forma más segura. Por otro lado no hay limitaciones en el tamaño del envío, por lo que inclusive pueden ser enviados archivos. 
• accept-charset: Para especificar una lista de juegos de caracteres separados por comas. Los más usados son UTF-8 e ISO-8859-1 (alfabeto latino).
• enctype: Especifica el tipo de codificación.
• application/x-www-form-urlencoded: los espacios son reemplazados con signos más ("+") y los caracteres especiales son convertidos a valores HEX. Este es el valor por defecto.
• multipart/form-data: no se aplica ninguna codificación. Este valor es necesario para la subida de archivos.
• text/plain: solo los espacios son reemplazados por signos más ("+").

Input

Con <Input> podemos definir los diferentes campos de entrada de datos con los que va a contar nuestro formulario. La etiqueta <input> no tiene etiqueta de cierre. Por lo que su formato será de la siguiente forma: 

<input ....   />

Atributos de <Input>:

• name: Es el nombre del campo que va a recibir los datos ingresados por el usuario. Para campos independientes debe ser único dentro del formulario. En el caso de campos tipo "checkbox" o "radio", todos los componentes del mismo grupo deben compartir el mismo valor de "name".
• type: Define el tipo de entrada de datos. Puede tomar los siguientes valores:
• text: define un control para ingresar texto en una sola línea. Si se omite el atributo "type", por defecto se asume que el control es de tipo "text".
• checkbox: define un control de tipo casilla de verificación.
• radio: define un control de tipo casilla de opciones.
• file: muestra un botón que abrirá una ventana para que el usuario seleccione la ubicación y el archivo que se desea enviar. Es importante acotar que si deseamos permitir el envío de archivos a través de un formulario el atributo "enctype" de la etiqueta "form" debe ser iniciado a "multipart/form-data".
• password: define un control para entrada de contraseñas. Lo que se ingrese se muestra enmascarado. Todos los atributos que aplican para los campos tipo "text" funcionan con campos de este tipo.
• hidden: define un control oculto. En este tipo de controles el usuario no puede ingresar datos. Es útil para mantener valores de estado o ciertos valores útiles durante la ejecución del formulario. En los campos de este tipo sólo son útiles los atributos "name" y "value".
• button: mostrará un botón para realizar alguna acción. La utilidad de este control la podemos apreciar con el uso de JavaScript. para definir eventos intrusivos (código dentro de la página html) o no-intrusivos (ejecución de funciones en librerías externas).
• submit: por defecto mostrará un botón con el texto "Enviar" (depende del idioma del equipo cliente) que al seleccionarlo, ejecutará el envío del formulario según lo indicado en los atributos "action" y "method" de la etiqueta "form".
• image: mostrará un botón con una imagen que al seleccionarla, ejecutará el envío del formulario según el método indicado. Se desaconseja su uso y se recomienda sea sustituido por elementos de CSS.
• reset: mostrará un botón especial que al seleccionarlo, borrando los datos que haya ingresado el usuario; reiniciará el formulario.
• disabled: Este atributo deshabilita el campo. El campo se muestra; pero no puede ser utilizado ni modificado por el usuario. Para cumplir con estándares se debe colocar lo siguiente: disabled = "disabled".
• readonly: Parecido a "disabled". Con "readonly" indicamos que el contenido del campo se puede copiar para ser pegado en otro lugar.>
• value: Dependiendo del campo o control puede tener varios significados. 
• Para campos tipo "text" o "password", se almacena el valor que el campo tiene en algún momento y será desplegado en pantalla.
• Para botones tipo "checkbox" o "radio" especifica el valor que tendrá cuando éste haya sido seleccionado. Por defecto es "on".
• Para los botones, submit y reset, se utiliza para indicar el texto que será mostrado en el botón.
• Para campos tipo "hidden", "value" va a contener un valor que será enviado al servidor; pero que no se desea que el usuario vea.
• maxlength: Funciona con los campos tipo "text". En este atributo se puede indicar la cantidad máxima de caracteres que el usuario puede ingresar en el control. El valor debe ser un número entero.
• size: Es el tamaño del rectángulo o área de entrada de datos que se despliega en la pantalla. Por defecto es 20 caracteres. Se desaconseja se uso para ser reemplazado por las hojas de estilos (CSS).
• checked: Este atributo aplica para campos tipo "checkbox" y "radio". Indica que el campo está seleccionado. Para los controles que incluyan varias opciones del tipo "checkbox" cada una de ellas es independiente de la otra; de tal manera que todas pueden estar seleccionadas, algunas o ninguna. En el caso de controles tipo "radio" sólo una de las opciones del grupo puede ser seleccionada. Al seleccionar una se desmarcará la opción que tenía la marca.
• accept: Este atributo funciona para controles tipo "file" y determina el tipo de archivo que se permite seleccionar. No está implementado en todos los navegadores.
• alt: Se utiliza para botones tipo "image" para indicar un texto alternativo.
• alt: Se utiliza para botones tipo "image" para indicar la ruta de la imagen.

Consejos

• Todas los campos que desees enviar al servidor deben estar entre las etiquetas <form></form>. Los que no estén se desplegarán y funcionarán; pero no serán enviados.
• En una definición de campo "input" siempre colocar el atributo "type". Ejemplo: <input type="text" ...>
• Siempre colocar un botón "submit" para enviar el formulario. Ejemplo: <input type="submit" ...>
• Separar estructura y contenidos de los estilos. Todo lo relacionado con la parte visual del control dejarlo en la definición de CSS. Esto facilitará el mantenimiento de la página web.

Para mayor información y ejemplos consulte el siguiente video.