Ver índice de contenidos del libro

16.12. Solución ejercicio 12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Ejercicio 12 - Formulario de alta</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/* Formatear el formulario a dos columnas */
body {
  font: 13px/1.6 Tahoma, sans-serif;
  background: #F5F5F5;
}
 
.izquierda {
  float: left;
  clear: left;
}
 
.derecha {
  float: right;
  clear: right;
}
 
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#contenedor {
  background: #FFF;
  border: 1px solid silver;
  margin: 1em auto;
  padding: 1em;
  width: 768px;
}
 
span.requerido {
  font-size: 1.3em;
  font-weight: bold;
  color: #C00;
}
 
h2 {
  font: normal 2em arial, sans-serif;
  margin: 0;
}
 
ul li.botones {
  border-top: 2px solid #CCC;
  clear: both;
  float: none;
  padding: 1em 0;
  margin-top: 1em;
  text-align: right;
  width: 100%;
}
 
ul li.botones input {
  font-size: 1.3em;
}
 
ul li {
  margin: 0.5em 0;
  padding: 0.5em;
  width: 46%;
}
 
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%;
}
 
ul li div span label {
  display: block;
  font: normal 0.8em arial, sans-serif;
  color: #333;
}
 
ul li p.ayuda {
  display: none;
}
 
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;
}
 
/* Cambiar el color en el :hover y resaltar los campos en el :focus */
ul li:hover {
  background-color: #FF9;
}
 
ul li.botones:hover {
  background-color: transparent;
}
 
ul li input:focus {
  border: 2px solid #E6B700;
}
 
/* Formatear el formulario a una columna */
ul li.izquierda, ul li.derecha {
  float: none;
  width: auto;
}
 
ul li {
  overflow: hidden;
}
 
ul li label.titulo {
  float: left;
  width: 150px;
}
 
ul li div {
  margin-left: 160px;
}
 
/* Aspecto final del formulario con los mensajes de ayuda */
h2 {
  margin-bottom: 0.3em;
}
 
ul li {
  border-top: 1px solid #CCC;
  margin: 0;
  padding: 1em;
}
 
ul li.botones {
  margin: 0;
}
 
ul li label.titulo {
  text-align: right;
  width: 100px;
}
 
ul li div {
  margin-left: 110px;
  overflow: hidden;
}
 
ul li {
  position: relative;
}
 
ul li:hover p.ayuda {
  display: block;
  margin: 0.3em;
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
}
</style>
</head>
 
<body>
<div id="contenedor">
 
<h2>Formulario de alta</h2>
 
<form method="post" action="#">
<ul>
<li class="izquierda">
  <label class="titulo" for="nombre">Nombre y apellidos <span class="requerido">*</span></label>
  <div>
    <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>
 
  <p class="ayuda">No te olvides de escribir también tu segundo apellido</p>
</li>
 
<li class="derecha">
  <label class="titulo" for="direccion">Dirección <span class="requerido">*</span></label>
 
  <div>
    <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>
 
  <p class="ayuda">El código postal es imprescindible para poder recibir los pedidos</p>
</li>
 
<li class="izquierda">
  <label class="titulo" for="email">Email</label>
 
  <div>
    <span class="completo">
      <input id="email" name="email" value="" />
    </span>
  </div>
 
  <p class="ayuda">Asegúrate de que sea válido</p>
</li>
 
<li class="derecha">
  <label class="titulo" for="telefonofijo">Teléfono <span class="requerido">*</span></label>
 
  <div>
    <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>
 
  <p class="ayuda">Sin prefijo de país y sin espacios en blanco</p>
</li>
 
<li class="botones">
  <input id="alta" type="submit" value="Darme de alta &rarr;" />
</li>
 
</ul>
</form>
 
</div>
</body>
</html>

Descargar solución completa