Ejercicios - Maquetación formulario 2
Enunciado
Crea una página web con un formulario que tenga el mismo aspecto que la siguiente imagen:
En la imagen animada se muestra:
- El efecto que se debe configurar cuando el cursor del ratón se sitúe encima de una línea del formulario.
- El efecto que se debe configurar cuando un control del formulario reciba el foco del teclado.
Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu solución no se parezca a la solución que te proporcionamos.
Solución
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de formulario maquetado</title>
<style type="text/css">
/* Características generales de la página */
body {
font-size: 14px;
font-family: Arial, sans-serif;
background: #AAA;
}
/* El contenedor define la zona principal de contenido */
#contenedor {
background: #FFF;
margin: 1em auto;
padding: 1em;
width: 768px;
}
/* El formulario está definido como una lista */
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
border-top: 1px solid #CCC;
margin: 1em 0;
padding: 1em;
width: auto;
overflow: hidden;
}
/* El formulario se organiza en dos columnas, el título y los controles */
ul li label.titulo {
float: left;
width: 150px;
text-align: right;
}
ul li div.controles {
margin-left: 160px;
}
/* El último elemento del formulario es el botón "Registrarse" */
ul li.botones {
border-top: 2px solid #CCC;
clear: both;
float: none;
padding: 1em 0;
text-align: right;
width: 100%;
}
ul li.botones input {
font-size: 18px;
}
/* El título de los elementos de la lista */
ul li label.titulo {
font-weight: bold;
}
ul li div span {
float: left;
padding: 0.3em 0;
}
ul li div span.completo {
width: 100%;
}
ul li div span.mitad {
width: 50%;
}
ul li div span.tercio {
width: 33%;
}
ul li div span.dostercios {
width: 66%;
}
/* Como se define display: block, se muestra en la línea siguiente */
ul li div span label {
display: block;
font-size: 12px;
color: #333;
}
/* Configuración de los controles del formulario */
ul li input {
padding: 0.2em;
}
input#apellido1, input#apellido2, input#direccion, input#email {
width: 260px;
}
input#codigopostal {
width: 80px;
}
select#provincia {
width: 90px;
}
select#pais {
width: 150px;
}
input#telefonofijo, input#telefonomovil {
width: 135px;
}
/* Cambia el color cuando se sitúa el cursor del ratón */
ul li:hover {
background-color: #FF9;
}
ul li.botones:hover {
background-color: transparent;
}
/* Destaca el control cuando recibe el foco */
ul li input, ul li select {
border: 2px solid transparent;
border-bottom: 2px solid black;
}
ul li.botones input {
border: 2px solid #CCC;
}
ul li input:focus, ul li select:focus {
border: 2px solid #F00;
}
</style>
</head>
<body>
<div id="contenedor">
<h1>Formulario de registro</h1>
<form method="post" action="#">
<ul>
<li>
<label class="titulo" for="nombre">Nombre y apellidos</label>
<div class="controles">
<span class="completo">
<input id="nombre" name="nombre" value="" />
<label for="nombre">Nombre</label>
</span>
<span class="completo">
<input id="apellido1" name="apellido1" value="" />
<label for="apellido1">Primer apellido</label>
</span>
<span class="completo">
<input id="apellido2" name="apellido2" value="" />
<label for="apellido2">Segundo apellido</label>
</span>
</div>
</li>
<li>
<label class="titulo" for="direccion">Dirección</label>
<div class="controles">
<span class="completo">
<input id="direccion" name="direccion" value="" />
<label for="direccion">Calle, número, piso, puerta</label>
</span>
<span class="tercio">
<input id="codigopostal" name="codigopostal" value="" />
<label for="codigopostal">Código postal</label>
</span>
<span class="dostercios">
<input id="municipio" name="municipio" value="" />
<label for="municipio">Municipio</label>
</span>
<span class="tercio">
<select id="provincia" name="provincia">
<option value=""></option>
<option value="provincia1">Provincia 1</option>
<option value="provincia2">Provincia 2</option>
<option value="provincia3">Provincia 3</option>
</select>
<label for="provincia">Provincia</label>
</span>
<span class="dostercios">
<select id="pais" name="pais">
<option value=""></option>
<option value="pais1">País 1</option>
<option value="pais2">País 2</option>
<option value="pais3">País 3</option>
</select>
<label for="pais">País</label>
</span>
</div>
</li>
<li>
<label class="titulo" for="email">Email</label>
<div class="controles">
<span class="completo">
<input id="email" name="email" value="" />
</span>
</div>
</li>
<li>
<label class="titulo" for="telefonofijo">Teléfono</label>
<div class="controles">
<span class="mitad">
<input id="telefonofijo" name="telefonofijo" value="" />
<label for="telefonofijo">Fijo</label>
</span>
<span class="mitad">
<input id="telefonomovil" name="telefonomovil" value="" />
<label for="telefonomovil">Móvil</label>
</span>
</div>
</li>
<li class="botones">
<input id="alta" type="submit" value="Registrarse" />
</li>
</ul>
</form>
</div>
</body>
</html>