Form paginado: HTML inicial
Primera versión con HTML
Aqui comenzamos a introducir solo el código HTML de la página. Voy a ir mostranado cada parte de la página en detalle. Al final se agrupa todo en un documento único.
Lo primero es lo habitual: crear la estructura básica de la página (html, head, body) comenzamos a escribir el código HTML Como va a ser responsive, incluyo el meta relativo al view port.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Formulario de registro</title>
</head>
<body>
</body>
</html>
Todo el formulario se va a encerrar en un bloque main, pues va a ser el contenido prinicpal de la página.
En la parte superior de la página aparece una zona que muestra la sección del formulario en la que estamos. Estos elementos los colocamos en un bloque header que contendrá dos bloques
- Línea de progreso con los botones redondos, marcas
- Los textos con el nombre de la sección que se esté rellenando.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Formulario de registro</title>
</head>
<body>
<main>
<header>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>Credenciales</div>
<div>Datos</div>
<div>Social</div>
</div>
</header>
</body>
</html>
La linea de progreso está formada por tres partes, una para cada etiqueta y se usa para colocar en ellas las marcas circulares. Las dejamos vacías, dentro no se escribirá nada. Esos bloques serán las marcas (los circulos en el índice)
Comenzamos con el formulario en sí, que tiene los campos agrupados en tres partes : credenciales, domicilo, social.
Escribimos la habitual etiqueta form y comenzamos con el contenido. Como action pongo procesardatos.php, ya nos preocuremos al final de como escribirlo.
Como vamos a utilizar un script para validar los campos le añado el atributo novalidate, esto nos da libertad para usar nuestra propia validación o usar la validación por defecto
Como hay tres grupos de campos pues cada grupo los pongo en un bloque section.
<form action="procesardatos.php" method="post" novalidate>
<section>
<!-- inputs para credenciales -->
</section>
<section>
<!-- inputs para datos -->
</section>
<section>
<!-- inputs para social -->
</section>
</form>
Cada campo o control del formulario se agrupa en un bloque div conteniendo label, control y un div (para mostrar mensajes de error). Est último bloque no es impresciendible si el campo input no puede producir error (campo no obligatorio y contenido libre).
Por ejemplo el input para nombre sería este bloque colocado dentro de la section primera.:
<div>
<label>Nombre</label>
<input type="text" name="nombre" id="nombre" required>
<div>Mensaje de aviso</div>
</div>
El control pueden ser de cualquier tipo de campo de formularios: input, select, options o ratios, textarea.
Por bloques las secciones quedan:
Credenciales
<section>
<div>
<label>Nombre</label>
<input type="text" name="nombre" id="nombre" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Alias</label>
<input type="text" name="alias" id="alias" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Password</label>
<input type="password" name="password" id="password" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>email</label>
<input type="email" name="email" id="email" required>
<div>Mensaje de aviso</div>
</div>
</section>
Domicilio
<section>
<div>
<label>Calle</label>
<input type="text" name="calle" id="calle" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Ciudad</label>
<input type="text" name="ciudad" id="ciudad" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>CP</label>
<input type="text" name="codpostal" id="codpostal" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Teléfono</label>
<input type="tel" name="telefono" id="telefono" required>
<div>Mensaje de aviso</div>
</div>
</section>
Social
<section>
<div>
<label>Web</label>
<input type="text" name="web" id="web">
<div>Mensaje de aviso</div>
</div>
<div>
<label>Facebook</label>
<input type="text" name="facebook" id="facebook">
<div>Mensaje de aviso</div>
</div>
<div>
<label>Twitter</label>
<input type="text" name="twitter" id="twitter">
<div>Mensaje de aviso</div>
</div>
<div>
<label>Instagram</label>
<input type="tel" name="instagram" id="instagram">
<div>Mensaje de aviso</div>
</div>
</section>
Pero aún nos quedan los botones para cambiar de apartado del formularios. Lo vamos a colocar al final, bajo las secciones y antes de cerrar el form. Como son botones de navegación usamos un elemento nav
<nav>
<button>Previa</button>
<button>Siguiente</button>
<button type="submit">Enviar</button>
</nav>
Ya solo qeuda cerrar el bloque form, el bloque main, y cerrar la página.
Todo junto es esto:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Formulario de registro</title>
</head>
<body>
<main>
<header>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>Credenciales</div>
<div>Datos</div>
<div>Social</div>
<div>
</header>
<form action="procesardatos.php" method="post">
<section>
<div>
<label>Nombre</label>
<input type="text" name="nombre" id="nombre" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Alias</label>
<input type="text" name="alias" id="alias" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Password</label>
<input type="password" name="password" id="password" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>email</label>
<input type="email" name="email" id="email" required>
<div>Mensaje de aviso</div>
</div>
</section>
<section>
<div>
<label>Calle</label>
<input type="text" name="calle" id="calle" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Ciudad</label>
<input type="text" name="ciudad" id="ciudad" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>CP</label>
<input type="text" name="codpostal" id="codpostal" required>
<div>Mensaje de aviso</div>
</div>
<div>
<label>Teléfono</label>
<input type="tel" name="telefono" id="telefono" required>
<div>Mensaje de aviso</div>
</div>
</section>
<section>
<div>
<label>Web</label>
<input type="text" name="web" id="web">
<div>Mensaje de aviso</div>
</div>
<div>
<label>Facebook</label>
<input type="text" name="facebook" id="facebook">
<div>Mensaje de aviso</div>
</div>
<div>
<label>Twitter</label>
<input type="text" name="twitter" id="twitter">
<div>Mensaje de aviso</div>
</div>
<div>
<label>Instagram</label>
<input type="tel" name="instagram" id="instagram">
<div>Mensaje de aviso</div>
</div>
</section>
<nav>
<button>Previa</button>
<button>Siguiente</button>
<button type="submit">Enviar</button>
</nav>
</form>
</main>
</body>
</html>
Comentarios
Esta es la primera versión de la página sin estilos y solo para colocar el contenido.
Al escribir una página web estas lineas del primer bloque son siempre iguales. Puedes tener un archivo que solo contenga esas lineas y usarlo para copiar esas lineas y pegarlas en tu nueva página.
La experiencia va a irnos diciendo como colocar los elementos para no necesitar más modificaciones.
Pero es muy habitual que el empezar a vestir la página con los estilos CSS hagamos algún que otro cambio
Incluso al colocar los scripts todavía puede haber algún retoque al código HTML.
Observarás que la sección head es muy simple, no añdo por simplicidad las etiquetas meta que pueden ser muy variadas y varian en función de donde se use la página.