Trabajo con Formularios

Estructura del formulario

Todos los elementos del formulario con los que recogemos la información deben estar contenidos entre las etiquetas <form>. Y esta etiqueta debe tener al menos dos atributos definidos para poder enviar los datos. El primero es el atributo action, que indica la ruta del archivo que precesará la información. Esto es así, porque el navegador no puede procesar la información enviada por el formulario, más allá de comprobar mediante una serie de reglas de validación, si los datos cumplen las condiciones para ser enviados al servidor. Es el servidor el que tiene que estar preparado para recibir los datos y procesarlos mediante algún tipo de script. La tarea del navegador consiste en recopilar los datos y organizarlos para su envío al servidor. Y, como hemos dicho, validar los datos antes de ser mandados para comprobar que cumplen las condiciones para ser enviados. Volviendo al atributo action, si estamos trabajando sobre un servidor con lenguaje php, podría ser algo así como "datos.php".

El segundo atributo necesario en la etiqueta form es method, que sirve para indicar la forma en que son enviados los datos. Puede tener dos valores, get y post. El primero indica que los datos se envíen por la URL en el navegador, y el segundo hace que sean enviados como un mensaje adjunto a la url. Dependiendo del tipo de datos recurriremos a un método u otro, aunque por lo general se usa el método post (que es más privado).

Hay un tercer atributo importante en la etiqueta form, que sirve para definir como se codifican los datos para ser enviados al servidor. Es el atributo enctype, y puede tomar los valores siguientes

• application/x-www-form-urlencoded: codifica todos los caracteres antes de ser enviados. Los caracteres especiales son codificados en valores ASCII HEX.Este es el valor por defecto si no se especifica este atributo
• text/plain: No codifica ningún caracter especial. Formato de texto plano, los datos se envían tal cual se escriben
• multipart/form-data: Tampoco codifica los caracteres. Este valor es obligatorio cuando en el formulario incluimos algún archivo mediante un input de tipo file.

Etiquetas para recoger información

Hasta la llegada de HTML5 las etiquetas de formulario estaban bastante restringidas, reduciendose a estas:

• input Es la más general de ellas e indica que vamos a introducir un dato. Se complementa con el atributo type para cambiar su presentación
• textarea Sirve para introducir texto de una extensión mayor de 255 caracteres, que es el límite del campo input
• select Sirve para presentar un campo de selección de elementos
• optgroupPermite agrupar elementos option dentro de un select
• option Define cada uno de los elementos dentro de un select o un optgroup
• button Introduce un botón al que asignarle una acción
• label Añade una etiqueta a cada elemento para ser identificados en el navegador, asociando cada campo del formulario con un texto descriptivo
• fieldsetNo es un campo de formulario propiamente, puesto que no recoge ningún tipo de dato. Sirve para agrupar visualmente campos en el formulario, con el fin de organizar la información

Elementos de formularios en HTML5

Con HTML5 aumenta el número de elementos disponibles para trabajar con los formularios. Ahora tenemos más type para los elementos input, nuevos atributos para las etiquetas, y nuevas etiquetas HTML.

Tipos de input nuevos

• emailEs un campo de texto que espera recibir una dirección de e-mail válida. Si el navegador no valida el dato el formulario no será enviado
• searchUn campo de texto asociado a un buscador, donde se introduce el texto a buscar. No hace nada en especial más que indicar su función al navegador
• urlParecido al campo email, espera recibir una url absoluta y devolverá un error de validación si no es así
• telPara números de teléfono. No hace nada en especial ni es validado por el navegador, es informativo
• numberEspera recibir sólo números y da un error de validación en caso contrario. Puede recibir los atributos min, max y step
• rangeIncorpora un nuevo tipo de control de formulario que permite seleccionar valores dentro de un rango. También admite los atributos anteriores
• dateTambién genera un nuevo tipo de control de formulario, el conocido como datepicker, que permite seleccionar rápidamente una fecha de un calendario
• weekSimilar al de fecha, pero sólo para seleccionar semanas completas
• monthLo mismo, pero para meses
• timeSimilar a fecha, pero sólo para la hora
• datetimeUn combinado para seleccionar a la vez fecha y hora, incluyendo la zona horaria
• datetime-localComo el anterior, pero sin incluir la zona horaria
• colorIncorpora un nuevo control para seleccionar un color, al estilo del colorpicker

Nuevos atributos en HTML5

Además de los nuevos tipos de input disponibles en HTML5, también tenemos un conjunto de atributos nuevos para los formularios. Esos atributos ofercen mayor control sobre las tareas que debe realizar el formulario sin necesidad de recurrir a javascript, que es la forma en que veníamos haciendolo hasta ahora. Son los siguientes:

• formSirve para vincular un campo a un formulario cuando el campo está fuera de las etiquetas <form> y </form> correspondientes
• listSirve para asociar un elemento datalist a un input
• novalidateLe indica al navegador que no valide el formulario antes de enviarlo
• patternDefine una expresión regular para validar un determinado campo
• forAsocia elementos de formulario entre sí. Normalmente entre label y elementos input
• formnovalidateHace lo mismo que novalidate pero con elementos individuales del formulario
• minEstablece el valor mínimo disponible en un campo number o range
• maxLo mismo que el anterior para el valor máximo
• stepDefine el avance númerico en los campos anteriores
• placeholderDefine un texto de ayuda en el input que desaparece al empezar a escribir en él
• autofocusEstablece el campo que debe estar seleccionado al cargarse el documento. Sólo puede ser un campo del formulario
• requiredDefine un campo como obligatorio para que el formulario sea enviado
• maxlengthEstablece la longitud máxima en caracteres de un elemento
• multiplePermite definir varios valores en un mismo input separados por comas

Nuevas etiquetas HTML

Por último HTML5 incorpora nuevos elementos HTML, aunque su número es menor que en los casos anteriores y en algunos casos, para que el elemento funcione correctamente será necesario combinarlo con código javascript.

• <datalist>Permite definir una lista de valores disponible para un input que serán definidos mediante elementos option
• <output>Representa el resultado de un cálculo que normalmente estará asociado a uno o varios campos del formulario
• <meter>Sirve para definir una escala, representando una medida. Se combina con atributos min, max y step
• <progress>Es similar al anterior, pero muestra una línea de progreso. Requiere javascript para que muestre cambios en los valores

Ejemplo

El siguiente formulario incorpora parte de los elementos definidos arriba. Algunos elementos y atributos, como <meter> y <progress> simplemente están como muestra visual, aunque no tengan una función específica en el formulario de muestra. Este es su código:

	<div class="buscador">
		<label for="busca_res">Buscar</label>
		<input type="search" name="busca_res" form="form_html5">
	</div>
	<div class="form-html5">
		<form method="post" action="datos2.php" class="formularios" id="form_html5" name="form_html5">
			<div class="fila-form">
				<label for="fecha_res">Fecha Inicio</label>
				<input type="date" name="fecha_res" autofocus>
			</div>
			<div class="fila-form">
				<label for="hora_res">Hora Entrada</label>
				<input type="time" name="hora_res">
			</div>
			<div class="fila-form">
				<label for="fyh_res">Fecha y Hora</label>
				<input type="datetime-local" name="fyh_res">
			</div>
			<div class="fila-form">
				<label for="mail_res">Email</label>
				<input type="email" name="mail_res" multiple required>
			</div>
			<div class="fila-form">
				<label for="telf_res">Teléfono</label>
				<input type="tel" name="telf_res" required placeholder="Sólo números sin guiones ni paréntesis" list="telefonos">
			</div>
			<div class="fila-form">
				<label for="dias_res">Días</label>
				<input type="number" name="dias_res" min="5" max="25" step="5">
			</div>
			<div class="fila-form">
				<label for="viajeros_res">Viajeros</label>
				<input type="range" name="viajeros_res" min="2" max="20" step="2" value="8">
			</div>
			<div class="fila-form">
				<label for="color_res">Selecciona un color</label>
				<input type="color" name="color_res">
			</div>
			<datalist id="telefonos">
				<option label="Casa" value="123456"></option>
				<option label="Trabajo" value="987654"></option>
			</datalist>
			<div class="fila-form">
				<progress value="20" max="100"></progress>
			</div>
			<div class="fila-form">
				<meter min="20" max="80" value="50" low="40" high="70" optimum="60">Escala</meter>
			</div>
			<div class="fila-form">
				<button type="submit">Reservar</button>
			</div>
		</form>	
	</div>
			

formulario