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

Atributos básicos de formularios

El elemento input cambia su presentación dependiendo de el atributo type que tengamos definido. La lista de valores para type antes de HTML5 es esta:

• textEs el valor más habitual, y presenta un campo de texto para que el usuario escriba en él. Su límite es de 255 caracteres
• passwordPresenta un campo de texto en el que al escribir reemplaza las letras por astericos u otro caracter
• checkboxPresenta una casilla de verificación
• radioConvierte el input en un botón de opción a seleccionar entre varios
• hiddenOculta un elemento input para enviar datos al servidor sin que estos se muestren en pantalla
• submitConvierte el input en un botón para enviar el formulario
• resetHace que un button limpie todos los campos rellenos del formulario
• buttonDeja a un button sin comportamiento predeterminado

Además del atributo type tenemos otros atributos que son necesarios para poder trabajar con el formulario. Son estos:

• nameEs el atributo que identifica a cada campo del formulario, y que es usado para enviar los datos en la forma name=value
• valueEs el valor asociado a un campo, y será necesario definirlo cuando el type no sea de texto
• selectedIndica que sea preseleccionado un elemento de una lista
• checkedHace que un checkbox aparezca como seleccionado inicialmente, cuando se carga el documento
• disabledHace que un elemento esté desactivado y no pueda no modificarse ni enviarse al servidor.
• readonlyConvierte al elemento en de sólo lectura, el usuario no lo puede cambiar pero sí es enviado.
• multiplePermite seleccionar más de un elemento en una lista de tipo select.

Ejemplo

El siguiente código nos devolverá el formulario que vemos debajo de él:

<form action="datos.php" method="post">
<fieldset>
<legend>Datos Personales</legend>
<div class="fila-form">
<label for="nom_user">Escribe tu nombre</label>
<input type="text" name="nom_user" id="nom_user"></div>
<div class="fila-form">
	<label for="apell_user">Tus apellidos</label>
	<input type="text" name="apell_user" id="apell_user" value="Tus apellidos">
</div>
<div class="fila-form">
	<label for="mail_user">Email</label>
	<input type="text" name="mail_user" id="mail_user" placeholder="correo@dominio.com">
	</div>
	<div class="fila-form">
		<label for="genero_user">Género:</label>
		<input type="radio" name="genero_user" value="M" id="genero_user_h">
		<label for="genero_user_h">Maculino</label><br>
		<input type="radio" name="genero_user" value="F" id="genero_user_m">
		<label for="genero_user_m">Femenino</label>
	</div>
	</fieldset>
	<fieldset>
	<legend>Datos sobre el curso</legend>
	<div class="fila-form">
		<label for="tema_user">Selecciona uno o varios temas:</label>
		<select name="tema_user" id="tema_user" multiple="multiple">
			<option value="front">Desarrollo Web - FrontEnd</option>
			<option value="back">Desarrollo Web - BackEnd</option>
			<option value="cms">Desarrollo con CMS</option>
			<option value="grafico">Diseño Gráfico</option>
		</select>
	</div>
	<div class="fila-form">
		<label for="nivel_user">Selecciona tu nivel usuario:</label>
		<select name="nivel_user" id="nivel_user">
			<option value="1">Nivel Principiante</option>
			<option value="2" selected="selected">Nivel Medio</option>
			<option value="3">Nivel Avanzado</option>
			<option value="4">Profesional</option>
		</select>
	</div>
	<div class="fila-form">
		<label for="horario_user">Selecciona el horario preferido</label>
		<select name="horario_user">
			<optgroup label="Mañanas">
				<option value="1">De 09:00 a 12:00</option>
				<option value="2">De 12:00 a 15:00</option>
			</optgroup>
			<optgroup label="tardes">
				<option value="3">De 15:00 a 18:00</option>
				<option value="4">De 18:00 a 21:00</option>
			</optgroup>
			<option value="0">Indiferente</option>
		</select>
	</div>
	</fieldset>
	<div class="fila-form">
		<label for="coment_user">Comentario</label>
		<textarea name="coment_user" id="coment_user">Escribe aquí tu comentario...</textarea>
	</div>
	<div class="fila-form">
		<label for="publi_user">
		<input type="checkbox" name="publi_user" id="publi_user" value="1">
		<span>Sí quiero recibir mucho spam</span>
		</label>
	</div>
	<div class="fila-form">
		<button type="reset">Borrar Datos</button>
	</div>
	<div class="fila-form">
	<input type="submit" name="env_user" id="env_user" value="Regístrate">
	</div>
</form>	
			

Formulario:

Este es el CSS utilizado

.formularios {
	background-color: whitesmoke;
	font-family: monospace;
	color: darkgray;
	padding: 10px;
}
fieldset {
	border: 1px solid;
	padding: 0 1rem;
	margin: 1rem 0;
}
.fila-form {
	margin: 30px 0;
	border-bottom: 1px dashed darkgrey;
	padding-bottom: 20px;
}
.fila-form label {
	display: inline-block;
	width: 30%;
	background-color: darkgrey;
	text-align: right;
	margin-right: 2%;
	padding: 5px;
	color: white;
}
.fila-form input {
	width: 60%;
	font-family: georgia;
	color: darkgrey;
	padding: 5px 2px;
	border-radius: 5px;
	border: none;
}
#genero input {
	width: inherit;
	margin-right: .5rem;
}
input#genero_user_m {
	margin-left: 33.5%;
}
textarea {
	width: 60%;
	height: 130px;
	margin-left: 36%;
}
#comentario {
	position: relative;
}
#comentario label {
	position: absolute;
	top: 0;
	left: 11px;
}
#spam label {
	width: 93%;
	margin: 0 2%;
	text-align: left;
}
#spam input {
	width: 5%;
}
#env_user {
	display: block;
	margin: auto;
	border: 2px solid;
	font-weight: bold;
	font-size: 1.3rem;
	letter-spacing: 3px;
}
			

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