Como crear un cuestionario de pedidos con html y footer fijo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cuestionario</title>
<!-- si le incluyo un css en otra web escribimos:
<link rel="stylesheet" href="nombre.css"> o si ponemos el
estilo aquí pondríamos:
<style>
<!-- para dejar fijo el footer basta con dos pasos en css-->
<!--PASO 1 hacemos flex al body-->
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
<!--PASO 2-->
main{
flex-grow: 1;
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<div class="pedidos">
<form action="#">
<h1>PEDIDOS</h1>
<fieldset class="datos">
<legend>Datos Personales: </legend>
<label>Nombre: </label>
<input type="text" autofocus name="nombre" id="id_nombre" required placeholder="Sandra" maxlength="15" />
<br />
<br />
<label>Apellidos:</label>
<input type="text" name="apellidos" id="id_apellidos" required placeholder="Sánchez Núñez" maxlength="30" />
<br />
<br />
<label>Email:</label>
<input type="email" name="emial" id="id_email" placeholder="Introduzca su email" maxlength="20" />
<br />
<br />
<label>Teléfono:</label>
<input type="tel" name="telefono" id="id_tlf" pattern="(6|8|7|9)[0-9]{8}" placeholder="Introduzca su tlf" required maxlength="9" />
</fieldset>
<br />
<fieldset class="datos">
<legend>Descripción del pedido: </legend>
<label>Fecha de recogida: </label>
<input type="date" name="fecha" id="id_fecha" required />
<br />
<br />
<label>Lugar de recogida:</label>
<select name="lugar_recogida">
<option>Centro - Calle Larios nº2 Bajo</option>
<option>Barrio de la Magdalena - Calle Fuente Don Diego nº1 Bajo</option>
<option>La Alameda - Avenida del Diseño Web nº 54 Bajo</option>
<option>Polígono Juncaril - Calle Cervantes nº 54 Bajo</option>
</select>
<br />
<br />
<label>Turno de recogida:</label><br/><br/>
<label><input type="checkbox" id="cbox1" value="manyana" checked />Mañana (8-12h)</label><br>
<label><input type="checkbox" id="cbox2" value="medioD"/>Medio día (12-4h) (8-12h)</label><br>
<label><input type="checkbox" id="cbox3" value="tarde" />Tarde (4-10h)</label><br>
<br />
<br />
<label>Tipo de embalaje:</label>
<select name="embalaje" multiple>
<!-- Formato alternativo con atributo label -->
<optgroup label="Cajas básicas">
<option value="1" label="cFexible">cartón flexible</option>
<option value="2" label="cRigida">cartón rígida</option>
<option value="3" label="cBlanca">cartón blanca</option>
</optgroup>
<optgroup label="Opciones avanzadas">
<option value="4" label="cVentana">Caja con ventana transparente </option>
<option value="5" label="cDecorativa">Caja decorativa con motivos </option>
<option value="6" label="cRegalo">Caja regalo </option>
<option value="7" label="cViaje">Caja viaje con asas </option>
</optgroup>
</select>
<br />
<br />
<label>Pedido:</label>
<textarea name="pedido" maxlength="150" required placeholder="Haz tu pedido"></textarea>
</fieldset>
<input type="submit" class="botones" value="Enviar">
<input type="reset" class="botones" value="Inicializar">
</form>
</div>
</main>
<footer>
<footer>
</body>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Cuestionario</title>
<!-- si le incluyo un css en otra web escribimos:
<link rel="stylesheet" href="nombre.css"> o si ponemos el
estilo aquí pondríamos:
<style>
<!-- para dejar fijo el footer basta con dos pasos en css-->
<!--PASO 1 hacemos flex al body-->
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
<!--PASO 2-->
main{
flex-grow: 1;
}
</style>
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<div class="pedidos">
<form action="#">
<h1>PEDIDOS</h1>
<fieldset class="datos">
<legend>Datos Personales: </legend>
<label>Nombre: </label>
<input type="text" autofocus name="nombre" id="id_nombre" required placeholder="Sandra" maxlength="15" />
<br />
<br />
<label>Apellidos:</label>
<input type="text" name="apellidos" id="id_apellidos" required placeholder="Sánchez Núñez" maxlength="30" />
<br />
<br />
<label>Email:</label>
<input type="email" name="emial" id="id_email" placeholder="Introduzca su email" maxlength="20" />
<br />
<br />
<label>Teléfono:</label>
<input type="tel" name="telefono" id="id_tlf" pattern="(6|8|7|9)[0-9]{8}" placeholder="Introduzca su tlf" required maxlength="9" />
</fieldset>
<br />
<fieldset class="datos">
<legend>Descripción del pedido: </legend>
<label>Fecha de recogida: </label>
<input type="date" name="fecha" id="id_fecha" required />
<br />
<br />
<label>Lugar de recogida:</label>
<select name="lugar_recogida">
<option>Centro - Calle Larios nº2 Bajo</option>
<option>Barrio de la Magdalena - Calle Fuente Don Diego nº1 Bajo</option>
<option>La Alameda - Avenida del Diseño Web nº 54 Bajo</option>
<option>Polígono Juncaril - Calle Cervantes nº 54 Bajo</option>
</select>
<br />
<br />
<label>Turno de recogida:</label><br/><br/>
<label><input type="checkbox" id="cbox1" value="manyana" checked />Mañana (8-12h)</label><br>
<label><input type="checkbox" id="cbox2" value="medioD"/>Medio día (12-4h) (8-12h)</label><br>
<label><input type="checkbox" id="cbox3" value="tarde" />Tarde (4-10h)</label><br>
<br />
<br />
<label>Tipo de embalaje:</label>
<select name="embalaje" multiple>
<!-- Formato alternativo con atributo label -->
<optgroup label="Cajas básicas">
<option value="1" label="cFexible">cartón flexible</option>
<option value="2" label="cRigida">cartón rígida</option>
<option value="3" label="cBlanca">cartón blanca</option>
</optgroup>
<optgroup label="Opciones avanzadas">
<option value="4" label="cVentana">Caja con ventana transparente </option>
<option value="5" label="cDecorativa">Caja decorativa con motivos </option>
<option value="6" label="cRegalo">Caja regalo </option>
<option value="7" label="cViaje">Caja viaje con asas </option>
</optgroup>
</select>
<br />
<br />
<label>Pedido:</label>
<textarea name="pedido" maxlength="150" required placeholder="Haz tu pedido"></textarea>
</fieldset>
<input type="submit" class="botones" value="Enviar">
<input type="reset" class="botones" value="Inicializar">
</form>
</div>
</main>
<footer>
<footer>
</body>
Comentarios
Publicar un comentario