Form paginado: atributos class
Añadir atributo class al código HTML
En esta fase vamos a colocar los atributos class que veamos necesarios para dar un buen aspecto a nuestra página.
Si miras la página con el navegador verás que nada está en su sitio según el diseño que buscamos. Pues cada cosa que no está en su lugar se pondrá en él mediante estilos css
Puedes asignar atributos class en los bloques que veas necesario para colocarlo adecuadamene y con el formto necesaro.
Nuestro primer bloque es el contenedor article al que le voy a agregar un atributo class = main. Va a ser el contenedor del formulario, será el bloque referencia para dimensiones y posicionamientos de los elementos contenidos, podríamos ponerle un sombreado o un fondo.
En suma main debe tener un atributo class, y como nombre le doy precisamente main
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario de registro</title>
</head>
<body>
<main class="main">
<heade class="indice">
<div class="linea">
<div>o</div>
<div>o</div>
<div>o</div>
</div>
<div class="textos">
<div>Credenciales</div>
<div>Datos</div>
<div>Social</div>
<div>
</header>
</body>
</html>
Luego tenemos el bloque con las etiquetas y botones que señalan el grado de progreso al rellenar las diferentes secciones del formulario. Este bloque será un header como contenedor le doy la clase indice, y el componente para la linea será linea y para el texto de cada apartado la clase será textos.
Formulario
Pasamos al resto del formulario. El propio elemento form en principio no requiere de ningún atributo class si su contenedor va a tener el fondo, sombreados, bordes....
Si has visto la página construída hasta ahora, podrás comprobar que todas las secciones del formulario son visibles y no es lo que queremos, se busca que cada vez solo se vea una sola sección.
Por otra parte dentro de las secciones los campos deben disponerse para que se vean ordenados y con el estilo según el diseño
Por tanto está claro que las secciones deben tener alguna clase definida. Como son todas iguales se necesita una clase para su aspecto, pero solo una será visible, luego hace falta otra clase para indicar la que es visible.
Así que en principio tendríamos que colocar una única clase a cada sección.
Pero podemos ahorrar código, dándole una clase al form: form-pag y luego usamos el selector for-pag section para referirnos a las secciones.
Solo la sección visible tendrá una clase propia: active
<form action="procesardatos.php" method="post" class="form-pag" novalidate>
<section class="active">
<!-- inputs para credenciales -->
</section>
<section>
<!-- inputs para datos -->
</section>
<section>
<!-- inputs para social -->
</section>
</form>
Los bloques de controles del formulario (inputs para datos) se van a seleccionar por el nombre de la etiqueta label o input. El único bloque que le voy a poner la clase es al dedicado a los avisos o mensjaes de error (aviso).
También colocamos un atributo class a input. Esta clase la añadimos para identificar cualquier tipo de control del formualrio: input, textarea, select...[ Es una modificación realizada al desarrollar el código Javascript de la pagina´].
<div>
<label>Nombre</label>
<input class="campo" type="text" name="nombre" id="nombre" required>
<div class="aviso">Mensaje de aviso</div>
</div>
Esta clase la repetimos en todos los bloques de controles
Finalmente tenemos el bloque de botones, donde hace falta posicionar ocultar, colorear, hacer algún hover.
Pero en lugar de ponerle una clase a cada botón le daremos formato mediante el selector compuesto: form-pag nav button, ahoramos código y es igual de efectivo sin efectos colaterales alguno. El HTML queda menos recargado y más fácil de entender.
Los botones los vamos a tner que diferenciar por eso le añado un id para identificar a cada botón por separado: anterior, siguiente, enviar.
Ya tenemos la página con las clases colocadas. El código HTML del proyecto queda:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario de registro: el CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="formpag.css" rel="stylesheet" type="text/css">
</head>
<body>
<main class="main">
<header class="indice">
<div class="linea">
<div class="active"></div>
<div></div>
<div></div>
</div>
<div class="textos">
<div class="active">Credenciales</div>
<div>Datos</div>
<div>Social</div>
</div>
</header>
<form action="procesardatos.php" method="post" class="form-pag">
<section class="active">
<div>
<label>Nombre</label>
<input class="campo" type="text" name="nombre" id="nombre" required>
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Alias</label>
<input class="campo" type="text" name="alias" id="alias" required>
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Password</label>
<input class="campo" type="password" name="password" id="password" required>
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>email</label>
<input class="campo" type="email" name="email" id="email" required>
<div class="aviso">Mensaje de aviso</div>
</div>
</section>
<section>
<div>
<label>Calle</label>
<input class="campo" type="text" name="calle" id="calle" required>
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Ciudad</label>
<input class="campo" type="text" name="ciudad" id="ciudad" required>
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>CP</label>
<input class="campo" type="text" name="codpostal" id="codpostal" required>
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Teléfono</label>
<input class="campo" type="tel" name="telefono" id="telefono" required>
<div class="aviso">Mensaje de aviso</div>
</div>
</section>
<section>
<div>
<label>Web</label>
<input class="campo" type="text" name="web" id="web">
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Facebook</label>
<input class="campo" type="text" name="facebook" id="facebook">
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Twitter</label>
<input class="campo" type="text" name="twitter" id="twitter">
<div class="aviso">Mensaje de aviso</div>
</div>
<div>
<label>Instagram</label>
<input class="campo" type="tel" name="instagram" id="instagram">
<div class="aviso">Mensaje de aviso</div>
</div>
</section>
<nav>
<button type="button" id="anterior" >Anterior</button>
<button type="button" id="siguiente" class="visible">Siguiente</button>
<button type="submit" id="enviar">Enviar</button>
</nav>
</form>
</main>
</body>
</html>
Comentarios
Esta es la primera modificación del código HTML de la página.
Realmente podríamos haber ido colocando los atributos class al mismo tiempo que se crea el documento por primera vez.
Eso es cuestión de práctica, pero de todas formas es fácil que más adelante sea necesario volver a reescribir el código HTML.
He procurado usar el menor número posible de clases, es decir, optimizar las clases usadas en aras de un código reducido pero comprensible.
En las clases aplicables a los apartados del formulario, las section, en lugar de escribir un atributo class en cada etiqueta section las identificarés como form-pag .section, que hace referenia perfecta a las sections dentro del formulario.
Igual ocurre en el caso del bloque de botones, en esta ocasión el elemento se refiere como form-pag nav
Esto es posible siempre y cuando no cambiemos las etiquetas section o nav dentro del formulario. Si lo hacemos habría que retocar el archivo CSS.
En CSS las etiquetas HTML se pueden usar como selectores. A veces el atributo class no es necesario.