lunes, 19 de mayo de 2014

Las pseudo-clases para los formularios



1. Las funcionalidades de las pseudo-clases

CSS3 introduce novedades muy interesantes con las pseudo-clases específicas para los elementos de los formularios. Vamos a poder aplicar estilos diferentes a los elementos activos de un formulario, los elementos deshabilitados y los elementos seleccionados. De este modo el usuario verá lo que ha hecho y qué elementos están habilitados o deshabilitados.

Veamos esas nuevas pseudo-clases: :enabled, :disabled y :checked.


2. El formulario y los estilos CSS

A continuación tenemos un formulario con dos campos de inserción de datos: el primer campo, que permite insertar el nombre, está habilitado (enabled); el segundo campo, que sirve para insertar la edad, está deshabilitado (disabled).

Luego tenemos dos botones de opción para el sexo (hombre o mujer).

Y, por último, una casilla de selección.

Vamos ahora a diferenciar visualmente los elementos del formulario en función del estado: habilitado, deshabilitado o seleccionado.

Este es el código HTML del formulario:

<form id="form1" method="#" action="#">
<p>
<label for="nombre">Su nombre y apellidos: </label>
<input type="text" id="nombre" />
</p>
<p>
<label for="edad">Su edad: </label>
<input type="text" id="edad" disabled="disabled"/>
</p>
<p>
<input type="radio" name="sexo" id="hombre" value="hombre" />
<label for="hombre">hombre</label><br/>
<input type="radio" name="sexo" id="mujer" value="mujer" />
<label for="mujer">mujer</label>
</p>
<p>
<input type="checkbox" id="acepto" />
<label for="acepto">Acepto las condiciones de uso.</label>
</p>
</form>

Y estos son los estilos CSS:

#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;
}

El primer selector se dirige a la etiqueta (label) de la casilla de selección (#acepto) y se aplicará cuando esta aparezca seleccionada (checked). Claro está, nos gustaría resaltar la etiqueta de la casilla, y no la casilla, por lo que hemos usado un selector adyacente.

El segundo selector se dirige al botón de opción seleccionado.

Los otros dos estilos añaden, simplemente, un fondo de color en función del estado del campo.


3. Resultado

Así se visualizará el formulario cuando el usuario no haya realizado ninguna acción:


El usuario podrá introducir un valor en el primer campo activo (con fondo verde), pero no en el segundo, que se encuentra deshabilitado (fondo rojo):


El usuario ha seleccionado un botón de opción, así que su etiqueta aparece en cursiva:


El usuario ha activado la casilla de selección, así que la etiqueta aparece en negrita con un fondo dorado:



4. Otra pseudo-clase

Existe otro estado para los botones de opción y las casillas de selección, se trata del estado intermedio: :indeterminate . Este estado indica que el elemento no está ni seleccionado, ni no seleccionado.


5. Los campos obligatorios y facultativos

Usted puede cambiar el diseño de los campos obligatorios y facultativos. Utilice para ello las pseudo-clases :required y :optional.

Los campos obligatorios, que requieren que se haya insertado un valor, deben presentar el atributo boleano required. Los que no sean obligatorios, serán por defecto facultativos, sin que haga falta precisarlo.

Veamos un ejemplo de formulario:

<form id="form1" method="#" action="#">
<p>
<label for="nombre">Su nombre y apellidos: </label>
<input type="text" name="nombre" id="nombre" required />
</p>
<p>
<label for="edad">Su edad: </label>
<input type="text" name="edad" id="edad" />
</p>
<p>
<input type="submit" id="enviar" value="Enviar" />
</p>
</form>

Y estos son los estilos CSS:

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

Y el resultado visual obtenido:



6. El formato de :focus

La pseudo-clase :focus permite resaltar el campo que se esté usando en ese momento con un borde, outline. Los estilos CSS3 introducen una nueva propiedad, outline-offset, que corresponde a la distancia entre el límite de la caja y el límite del borde.

Veamos un ejemplo muy sencillo:

input:focus {
outline: solid 3px green;
outline-offset: 2px;
}

Y el resultado visual:



Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada