Trabajo con Formularios

Los formularios en HTML son la herramienta con la que permitimos al usuario recoger datos para ser enviados al servidor, y allí ser precesados. Es la herramienta que permite la interacción con el usuario intercambiando datos. Para ello, usa un tipo de etiquetas específicas que están preparadas para recoger información por parte del usuario. Estas etiquetas generan los campos habituales para trabajar con formularios, como los campos de texto, las listas desplegables, los botones de opción, las casillas de verificación, y las áreas de texto, entre otros. Como vamos a ver a continuación, el número de etiquetas HTML para generar estos campos es realmente reducido, lo que convierte a los formularios HTML en instrumentos fáciles de usar y configurar.

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

Etiquetas para recoger información

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

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:

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

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"><span>Maculino</span><br>
		<input type="radio" name="genero_user" value="F" id="genero_user_m"><span>Femenino</span>
	</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:

Datos Personales
Masculino
Femenino
Datos sobre el curso

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

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:

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.

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

?Pulsa en el campo para desplegar un datalist con opciones
Escala