Proyecto ASIR

Estilos aplicados a formularios

Nuevos campos

<form id="nuevoscampos">

	<label>Correo electrónico: </label><input type="email" 
	required="required"/>
	
	<label>Web personal: </label><input type="url" 
	placeholder="http://..."/>
	
	<label>Teléfono: </label><input type="text" pattern="[0-9]{9}"/>
	
	<label>Fecha de nacimiento: </label><input type="date"/>
	
	<label>Hora actual: </label><input type="time"/>
	
	<label>Nº de semana del año: </label><input type="week">
	
	<label>Año de nacimiento: </label><input type="number" 
	min="1900" max="2014" step="1" value="1984" id="edad"/>
					
	<label for="edad2">Indique su edad: </label><input type="range" 
	min="18" max="100" step="2" value="48" id="edad2" 
	oninput="document.getElementById('valor').textContent=value">
	<output id="valor">0</output>
					
	<label>¿Qué sistema operativo utiliza? </label><input id="os" 
	type="text" list="OS"><datalist id="OS">
		<option value="Mac OS">
		<option value="Windows">
		<option value="Linux"> 
		</datalist>
					
	<label>¿Cuál es tu color favorito?: </label><input type="color">
	<input type="submit" id="enviar" value="Enviar" />
</form>
				

Las pseudo-clases para formularios

Vamos a ver algunos ejemplos de las nuevas pseudo-clases: :enabled, :disabled , :checked y :focus.

	#acepto:checked+label { 
		background-color: gold; 
		font-weight: bold; 
	} 
	#hombre:checked+label, #mujer:checked+label { 
		font-style: italic; 
	} 
	:enabled { 
		background-color: lightgreen; 
	} 
	:disabled { 
		background-color: lightcoral; 
	}
	input:focus { 
		outline: solid 3px green; 
		outline-offset: 2px; 
	}
				

También podemos utilizar las clases :required y :optional.

	#input:required { 
		background-color: lightcoral; 
	}
	 
	#input:optional { 
		background-color: lightgoldenrodyellow; 
	} 

	#input#enviar { 
		background: none; 
	}				
				

Validación para formularios

Vamos a modificar el diseño de la validación de los formularios con los estilos CSS3.

	input:focus:invalid { 
		background: url('../img/x.png') no-repeat 98% center; 
	} 

	input:focus:valid { 
		background: url('../img/ok.png') no-repeat 98% center; 
	}

	input:focus:valid:not(#enviar) { 
		background: url('../img/ok.png') no-repeat 98% center; 
	}
				

Disponemos de otras dos pseudo-clases para validar los números y las fechas. La pseudo-clase :in-range se aplica a los valores que se encuentran dentro de los límites definidos y la pseudo-clase :out-of-range se aplica a los valores que excedan de esos límites.

	input#edad:out-of-range { 
			background-color: pink; 
	} 

	input#edad:in-range { 
			background-color: green; 
	}