refactorizacion practica 4 de formularios
This commit is contained in:
parent
522c2bc9a0
commit
65c5654cbd
|
|
@ -7,97 +7,124 @@
|
|||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
/*Para evitar los estilos de los autocompletados de los Inputs, pero no va muy bien con el fondo transparente de los mismos*/
|
||||
/* input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1) inset !important;
|
||||
-webkit-text-fill-color: white ;
|
||||
} */
|
||||
|
||||
body{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-image: url("../img/fondo_taller.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: repeat;
|
||||
height: 100vh;
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
padding: 0 0.5em;
|
||||
background-image: url("../img/fondo_taller.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form_flex{
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
max-width: 650px;
|
||||
width: 100%;
|
||||
gap: 2em;
|
||||
/* estilos para contenedores de elementos del formularios */
|
||||
.form_citas {
|
||||
margin: auto;
|
||||
padding: 2em 0 4em;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.form_title{
|
||||
width: 100%;
|
||||
margin-top: 2em;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid rgb(83, 99, 224);
|
||||
border-radius: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.form_title h1 {
|
||||
color: yellow;
|
||||
.form_title {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */
|
||||
padding: 0.2em 0;
|
||||
text-align: center;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.fieldset_std{
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
border: 2px solid rgb(83, 99, 224);
|
||||
border-radius: 0.6em;
|
||||
padding: 1em;
|
||||
color: yellow;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
.form_main {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */
|
||||
padding: 0.3em;
|
||||
color: yellow;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
.form_main > fieldset {
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 10px;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6em;
|
||||
}
|
||||
|
||||
.form_fieldset{
|
||||
border: 2px solid rgb(83, 99, 224);
|
||||
border-radius: 0.6em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6em;
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.responsive_flex{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap:1em;
|
||||
/* Estilos para aplicar a elementos directamente*/
|
||||
.form_main > fieldset legend {
|
||||
margin-left: 1em;
|
||||
padding: 0 0.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.label_std{
|
||||
display: inline-block;
|
||||
width: 5em;
|
||||
color: white;
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: 1px solid white;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
padding: 0.2em 0.5em;
|
||||
padding: 0.2em;
|
||||
flex-grow: 1;
|
||||
font-size: large;
|
||||
background-color: transparent;
|
||||
border: 1px solid white;
|
||||
border-radius: 0.2em;
|
||||
color: white;
|
||||
}
|
||||
input:hover,
|
||||
input:focus {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn{
|
||||
border: 2px solid rgb(83, 99, 224);
|
||||
padding: 0.4em;
|
||||
border-radius: 0.5em;
|
||||
.btn {
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgb(41, 93, 170);
|
||||
}
|
||||
|
||||
@media(max-width: 550px){
|
||||
body{
|
||||
/* Media Queries */
|
||||
@media (max-width: 550px) {
|
||||
body {
|
||||
background-image: url("../img/fondo_vertical_taller.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.responsive_flex{
|
||||
}
|
||||
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
align-items: normal;
|
||||
flex-direction: column;
|
||||
gap:0.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 MiB After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.0 MiB After Width: | Height: | Size: 1.3 MiB |
138
Practicas/Practicas HTML/Formularios/Practica 4/index.html
Normal file
138
Practicas/Practicas HTML/Formularios/Practica 4/index.html
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<title>Practica 4 Formularios</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<form class="form_citas" action="../gracias.html" method="get">
|
||||
|
||||
<div class="form_title">
|
||||
<h1>Pide Cita</h1>
|
||||
</div>
|
||||
|
||||
<div class="form_main">
|
||||
<fieldset>
|
||||
<legend>Datos Cliente</legend>
|
||||
<div class="flex_responsive">
|
||||
<label for="nombre">* Nombre</label>
|
||||
<input type="text" name="nombre" id="nombre" required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="apellidos">* Apellidos</label>
|
||||
<input type="text" name="apellidos" id="apellidos" required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="telefono">* Telefono</label>
|
||||
<input type="tel" name="telefono" id="telefono" required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="email">* Email</label>
|
||||
<input type="email" name="email" id="email" autocomplete="on" required>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Datos de reserva</legend>
|
||||
<h4>* Tarjeta de descuento</h4>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="tarjetadesc" id="tarjeta10" value="10">
|
||||
<label for="tarjeta10">10%</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="tarjetadesc" id="tarjeta20" value="20">
|
||||
<label for="tarjeta20">20%</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="tarjetadesc" id="sintarjeta" value="0" checked>
|
||||
<label for="sintarjeta">Ninguna</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>* Marca del vehiculo</h4>
|
||||
<input class="input_std" id="marcavehiculo" list="marcas" required>
|
||||
<datalist id="marcas">
|
||||
<option value="Ford">
|
||||
<option value="Audi">
|
||||
<option value="Seat">
|
||||
<option value="Mazda">
|
||||
<option value="Toyota">
|
||||
</datalist>
|
||||
|
||||
<h4>* Tipo de reparacion</h4>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="tiporeparacion" id="mecanica" value="mecanica" required>
|
||||
<label for="mecanica">Mecanica</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="tiporeparacion" id="chapa" value="chapa">
|
||||
<label for="chapa">Chapa</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="tiporeparacion" id="mecanicachapa" value="mecanicachapa">
|
||||
<label style="width: auto;" for="mecanicachapa">Mecanica & Chapa</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>* Vehiculo de sustitucion</h4>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="vehiculosus" id="sinvehiculo" value="sinvehiculo" required>
|
||||
<label for="sinvehiculo">No necesita</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="vehiculosus" id="turismo" value="turismo">
|
||||
<label for="turismo">Turismo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="vehiculosus" id="furgoneta" value="furgoneta">
|
||||
<label style="width: auto;" for="furgoneta">Furgoneta</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>* Preferencia de horario de entrega</h4>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="horarioentrega" id="manana" value="mañana" required>
|
||||
<label for="manana">Mañanas</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="horarioentrega" id="tarde" value="tarde">
|
||||
<label for="tarde">Tarde</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>* Fecha de entrega</h4>
|
||||
|
||||
<label class="label_std" style="width:auto;" for="fechaentrega">Las entregas de vehiculos se realizaran
|
||||
los lunes, Seleccione una fecha</label>
|
||||
<input type="date" min="2024-01-01" max="2024-12-31" step="7" id="fechaentrega" name="fechaentrega"
|
||||
required>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" name="cesiondatos" id="cesiondatos" required>
|
||||
<label style="width: auto;" for="cesiondatos">Acepto la politica de cesion de datos</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<p style="color: white; font-size: small;">* Los campos marcados con asterisco son obligatorios</p>
|
||||
<div style="text-align: right;">
|
||||
<input class="btn" type="submit" value="Reservar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<title>Practica 4</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<form method="get" action="../gracias.html" class="form_flex">
|
||||
|
||||
<div class="form_title">
|
||||
<h1>Pide Cita</h1>
|
||||
</div>
|
||||
|
||||
<fieldset class="fieldset_std">
|
||||
<fieldset class="form_fieldset">
|
||||
<legend>Datos del Cliente</legend>
|
||||
<div class="responsive_flex">
|
||||
<label class="label_std" for="nombre">* Nombre</label>
|
||||
<input type="text" class="input_std" id="nombre" name="nombre" required>
|
||||
</div>
|
||||
<div class="responsive_flex">
|
||||
<label class="label_std" for="apellidos">* Apellidos</label>
|
||||
<input type="text" class="input_std" id="apellidos" name="apellidos" required>
|
||||
</div>
|
||||
<div class="responsive_flex">
|
||||
<label class="label_std" for="telefono">* Telefono</label>
|
||||
<input type="text" class="input_std" id="telefono" name="telefono" required>
|
||||
</div>
|
||||
<div class="responsive_flex">
|
||||
<label class="label_std" for="email">* Email</label>
|
||||
<input type="email" class="input_std" id="email" name="email" autocomplete="off" required>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="form_fieldset">
|
||||
<legend>Datos de reserva</legend>
|
||||
<div>
|
||||
<p>* Tarjeta de descuento</p>
|
||||
<div class="responsive_flex">
|
||||
<div>
|
||||
<input type="radio" name="tarjeta" id="tarjeta" value="0" checked>
|
||||
<label class="label_std" for="tarjeta">Ninguna</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="tarjeta" id="tarjeta10" value="10">
|
||||
<label class="label_std" for="tarjeta10">10%</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="tarjeta" id="tarjeta25" value="25">
|
||||
<label class="label_std" for="tarjeta25">25%</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>* Marca del vehiculo</p>
|
||||
<input class="input_std" list="marcas" required>
|
||||
<datalist id="marcas">
|
||||
<option value="Ford">
|
||||
<option value="Audi">
|
||||
<option value="Seat">
|
||||
<option value="Mazda">
|
||||
<option value="Toyota">
|
||||
</datalist>
|
||||
</div>
|
||||
<div>
|
||||
<p>* Reparacion</p>
|
||||
<div class="responsive_flex">
|
||||
<div>
|
||||
<input type="radio" name="reparacion" id="mecanica" value="mecanica" checked>
|
||||
<label class="label_std" for="mecanica">Mecanica</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="reparacion" id="chapa" value="chapa">
|
||||
<label class="label_std" for="chapa">Chapa</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="reparacion" id="mecanicachapa" value="mecanicachapa">
|
||||
<label class="label_std" style="width: max-content;" for="mecanicachapa">Mecanica &
|
||||
Chapa</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>* Vehiculo de sustitucion</p>
|
||||
<div class="responsive_flex">
|
||||
<div>
|
||||
<input type="radio" name="vehiculosus" id="vehiculosusno" checked>
|
||||
<label class="label_std" style="width: max-content;" for="vehiculosusno">No necesita</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="vehiculosus" id="vehiculosusturismo">
|
||||
<label class="label_std" for="vehiculosusturismo">Turismo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="vehiculosus" id="vehiculosusfurgoneta">
|
||||
<label class="label_std" for="vehiculosusfurgoneta">Furgoneta</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>* Preferencia de horario de entrega</p>
|
||||
<div class="responsive_flex">
|
||||
<div>
|
||||
<input type="radio" name="horario" id="horarioma" checked>
|
||||
<label class="label_std" for="horarioma">Mañanas</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="horario" id="horariota">
|
||||
<label class="label_std" for="horariota">Tardes</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p>* Fecha de entrega</p>
|
||||
<label class="label_std" style="width:100%;" for="fechaentrega">Las entregas de
|
||||
vehiculos se realizaran los lunes, Seleccione una fecha</label>
|
||||
<input type="date" min="2024-01-01" max="2024-12-31" step="7" id="fechaentrega" name="fechaentrega"
|
||||
required>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="registro" name="registro" required>
|
||||
<label for="registro">Acepto la politica de cesion de datos</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<p style="color: white;">* Los campos marcados con asterisco son obligatorios</p>
|
||||
<div style="text-align: right;">
|
||||
<input type="submit" class="btn" value="Reservar">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user