Dia 21
This commit is contained in:
Marcos Lopez
parent
65c5654cbd
commit
5ceebea03a
|
|
@ -0,0 +1,120 @@
|
|||
VALIDACIÓN DE UN FORMULARIO
|
||||
|
||||
- Los usuarios se equivocan.
|
||||
- Los usuarios pueden ser malintencionados.
|
||||
|
||||
La validación sirve para prevenir esos errores y evitar ataques malintencionados.
|
||||
|
||||
|
||||
La validación es la comprobación de los datos introducidos por el usuario, si la comprobación obtiene resultado positivo los datos se envían, si es negativo se le indican pautas para corregirlos.
|
||||
|
||||
TIPOS DE VALIDACIÓN
|
||||
|
||||
- Validación en el front-end (Javascript - Html5)
|
||||
- Validación back-end
|
||||
- Doble validación front-end y back-end
|
||||
|
||||
VALIDACIÓN BÁSICA CON HTML5
|
||||
|
||||
- Existen diferentes atributos para la validación en Html5:
|
||||
|
||||
+ maxlength y minlength (Tamaño admitido de los campos)
|
||||
+ min , max y step (Para valores numéricos y de fechas)
|
||||
+ required Campos obligatorios
|
||||
+ Disabled o readonly No se pueden modificar(uno no se envía el otro sí)
|
||||
|
||||
|
||||
ESTILOS CSS PARA VALIDACIÓN
|
||||
|
||||
:invalid (no pasa)
|
||||
:valid (pasa)
|
||||
|
||||
Ejemplo
|
||||
|
||||
input:invalid,
|
||||
select:invalid,
|
||||
textarea:invalid {
|
||||
/* Estilos para elementos inválidos */
|
||||
border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
|
||||
background-color: #ffcccc; /* Un fondo de color claro */
|
||||
}
|
||||
|
||||
ATRIBUTO PATTERN
|
||||
|
||||
Nos permite utilizar expresiones regulares(RegExp) para validar distintos tipos de inputs
|
||||
|
||||
El atributo title nos permite completar el mensaje de error que ve el usuario para indicarle pautas de introducción de datos.
|
||||
|
||||
Ejemplos de expresiones regulares para validar datos con el atributo pattern:
|
||||
|
||||
1.Nombre de persona (sin caracteres especiales):
|
||||
|
||||
-Solo letras, puede contener espacios.
|
||||
-De al menos 2 caracteres.
|
||||
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"
|
||||
|
||||
2.Apellidos (sin caracteres especiales):
|
||||
|
||||
-Solo letras, puede contener espacios.
|
||||
-De al menos 2 caracteres
|
||||
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"
|
||||
|
||||
|
||||
3.Edad (números del 1 al 99):
|
||||
|
||||
-Números del 1 al 99.
|
||||
|
||||
pattern="[1-9][0-9]?"
|
||||
|
||||
-De 1 hasta 200 años.
|
||||
|
||||
pattern="^(1[0-9]{1,2}|[1-9][0-9]?)$"
|
||||
|
||||
|
||||
4.DNI español (ocho dígitos y una letra al final):
|
||||
|
||||
-Ocho dígitos seguidos de una letra (mayúscula o minúscula).
|
||||
|
||||
pattern="\d{8}[A-Za-z]"
|
||||
|
||||
|
||||
5.Matrícula española (4 dígitos y 3 letras):
|
||||
|
||||
-Cuatro dígitos seguidos de tres letras (mayúsculas).
|
||||
|
||||
pattern="\d{4}[A-Za-z]{3}"
|
||||
|
||||
6.Teléfono español (9 dígitos):
|
||||
|
||||
-Nueve dígitos consecutivos.
|
||||
|
||||
pattern="[0-9]{9}"
|
||||
|
||||
7.Una dirección de email
|
||||
|
||||
pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
|
||||
|
||||
8.Un código postal
|
||||
|
||||
pattern="[0-9]{5}"
|
||||
|
||||
9.Número entero
|
||||
|
||||
pattern="[0-9]+" (solo positivos)
|
||||
|
||||
pattern="-?[0-9]+" (se permiten tambien negativos)
|
||||
|
||||
10. Número real
|
||||
|
||||
pattern="-?[0-9]+(\.[0-9]+)?"
|
||||
|
||||
|
||||
11. Contraseña fuerte (Minúscula, mayúscula, número y caracter especial)(minimo 8 caracteres)
|
||||
|
||||
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-])[A-Za-z\d!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]{8,}$"
|
||||
|
||||
12. Un color hexadecimal
|
||||
|
||||
pattern="#[0-9A-Fa-f]{6}"
|
||||
|
|
@ -15,7 +15,6 @@ input:-webkit-autofill:active {
|
|||
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1) inset !important;
|
||||
-webkit-text-fill-color: white ;
|
||||
} */
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -41,29 +40,30 @@ body {
|
|||
|
||||
.form_title {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
border: 2px solid #144b9e;
|
||||
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;
|
||||
color: #ffcb00;
|
||||
}
|
||||
|
||||
.form_main {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
border: 2px solid #144b9e;
|
||||
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;
|
||||
color: #ffcb00;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.form_main > fieldset {
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
border: 2px solid #144b9e;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
box-shadow: 10px;
|
||||
|
|
@ -109,11 +109,35 @@ input:focus {
|
|||
}
|
||||
|
||||
.btn {
|
||||
border: 2px solid rgb(41, 93, 170);
|
||||
border: 2px solid #144b9e;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: rgb(41, 93, 170);
|
||||
background-color: #144b9e;
|
||||
}
|
||||
|
||||
input:invalid,
|
||||
select:invalid,
|
||||
textarea:invalid {
|
||||
/* Estilos para elementos inválidos */
|
||||
border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
|
||||
background-color: #ffcccc; /* Un fondo de color claro */
|
||||
color: black;
|
||||
}
|
||||
input:invalid ~ .verificado{
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:valid ~ .verificado{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input:invalid ~ .erroneo{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input:valid ~ .erroneo{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Media Queries */
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -21,19 +21,50 @@
|
|||
<legend>Datos Cliente</legend>
|
||||
<div class="flex_responsive">
|
||||
<label for="nombre">* Nombre</label>
|
||||
<input type="text" name="nombre" id="nombre" required>
|
||||
<input type="text" name="nombre" id="nombre" minlength="1" maxlength="40"
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}"
|
||||
title="El nombre puede contener entre 1 y 40 caracteres letras y numeros"
|
||||
required>
|
||||
<span class="verificado">Verificado</span>
|
||||
<span class="erroneo">El nombre puede contener entre 1 y 40 caracteres letras y numeros</span>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="flex_responsive">
|
||||
<label for="apellidos">* Apellidos</label>
|
||||
<input type="text" name="apellidos" id="apellidos" required>
|
||||
<input type="text" name="apellidos" id="apellidos" minlength="1" maxlength="40"
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}"
|
||||
title="Los apellidos pueden contener entre 1 y 40 caracteres en total"
|
||||
required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="telefono">* Telefono</label>
|
||||
<input type="tel" name="telefono" id="telefono" required>
|
||||
<input type="tel" name="telefono" id="telefono"
|
||||
pattern="[0-9]{9}"
|
||||
title="El numero de telefono debe ser de 9 digitos"
|
||||
required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="dni">* Dni</label>
|
||||
<input type="text" name="dni" id="dni"
|
||||
minlength="9" maxlength="9"
|
||||
pattern="\d{8}[A-Za-z]"
|
||||
title="Dni en formato 33340763D"
|
||||
required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="matricula">* Matricula</label>
|
||||
<input type="text" name="matricula" id="matricula"
|
||||
pattern="\d{4}[A-Za-z]{3}"
|
||||
minlength="5" maxlength="7"
|
||||
title="Matricula en formato 7935JPC"
|
||||
required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="email">* Email</label>
|
||||
<input type="email" name="email" id="email" autocomplete="on" required>
|
||||
<input type="email" name="email" id="email" autocomplete="on"
|
||||
maxlength="100"
|
||||
title="Introduce un mail valido"
|
||||
required>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
|
|
|
|||
|
|
@ -174,6 +174,82 @@ iframe {
|
|||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 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 {
|
||||
border: 2px solid #1a89dc;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.2em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form_main {
|
||||
border: 2px solid #1a89dc;
|
||||
color: #1a89dc;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.form_main > fieldset {
|
||||
border: 2px solid #1a89dc;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6em;
|
||||
}
|
||||
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Estilos para aplicar a elementos del formulario directamente*/
|
||||
.form_main > fieldset legend {
|
||||
margin-left: 1em;
|
||||
padding: 0 0.2em;
|
||||
font-weight: 900;
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
select, textarea, input {
|
||||
padding: 0.2em;
|
||||
flex-grow: 1;
|
||||
font-size: large;
|
||||
background-color: transparent;
|
||||
border: 1px solid #1a89dc;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
input:hover,
|
||||
input:focus {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*Media Querys para aplicar a dispositivos moviles*/
|
||||
@media (max-width: 550px) {
|
||||
.lista_menu li {
|
||||
|
|
@ -194,6 +270,11 @@ iframe {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
align-items: normal;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
10
Practicas/Practicas HTML/Repaso/gracias.html
Normal file
10
Practicas/Practicas HTML/Repaso/gracias.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Gracias por contactar</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Gracias por contactar</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -211,11 +211,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
<!-- Aqui empieza la pagina Contactos -->
|
||||
<hr>
|
||||
|
|
@ -239,6 +234,76 @@
|
|||
|
||||
<p class="contacto_info"><span>Móvil |
|
||||
</span> 690 900 700</p>
|
||||
|
||||
|
||||
<form class="form_citas" action="./gracias.html" method="get">
|
||||
<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" minlength="1" maxlength="40"
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}"
|
||||
title="El nombre puede contener entre 1 y 40 caracteres letras y numeros" required>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="flex_responsive">
|
||||
<label for="apellidos">* Apellidos</label>
|
||||
<input type="text" name="apellidos" id="apellidos" minlength="1" maxlength="40"
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}"
|
||||
title="Los apellidos pueden contener entre 1 y 40 caracteres en total" required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="telefono">* Telefono</label>
|
||||
<input type="tel" name="telefono" id="telefono" pattern="[0-9]{9}"
|
||||
title="El numero de telefono debe ser de 9 digitos" required>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="asunto">Asunto</label>
|
||||
<select name="asunto" id="asunto" required>
|
||||
<option value="" disabled selected>-- Selecciona --</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label style="width: auto;">¿Cómo nos ha conocido?</label>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="amigo" value="amigo" required>
|
||||
<label for="amigo">Un amigo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="google" value="google">
|
||||
<label for="google">Googleando</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="buzoneo" value="buzoneo">
|
||||
<label for="buzoneo">Buzoneo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="otros" value="otros">
|
||||
<label for="otros">Otros</label>
|
||||
</div>
|
||||
</div>
|
||||
<label style="width: auto;" for="observaciones">Escribe tu mensaje</label>
|
||||
<textarea style="max-width: 600px;" name="observaciones" id="observaciones" rows="10" required></textarea>
|
||||
<div>
|
||||
<input type="checkbox" name="politica" id="politica"
|
||||
minlength="10"
|
||||
required>
|
||||
<label for="politica" style="width: auto;">He leído y acepto <a href="">aviso legal y la politica de privacidad</a> </label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div>
|
||||
<input class="btn" type="submit" value="Ok">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2917.2975090229866!2d-7.5559269234771165!3d43.0141246935289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd31ce9094468525%3A0xc6b267162d7eabde!2sR%C3%BAa%20Castelao%2C%20Lugo!5e0!3m2!1ses!2ses!4v1701343489810!5m2!1ses!2ses"
|
||||
width="600" height="450" allowfullscreen="" loading="lazy"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user