diff --git a/Practicas/Practicas HTML/Formularios/Introducción_Validaciones_Formularios.txt b/Practicas/Practicas HTML/Formularios/Introducción_Validaciones_Formularios.txt
new file mode 100644
index 0000000..a790d9f
--- /dev/null
+++ b/Practicas/Practicas HTML/Formularios/Introducción_Validaciones_Formularios.txt
@@ -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}"
\ No newline at end of file
diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css b/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css
index 3f6a837..ec93b6c 100644
--- a/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css
+++ b/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css
@@ -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 */
diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/formulario_taller.zip b/Practicas/Practicas HTML/Formularios/Practica 4/formulario_taller.zip
new file mode 100644
index 0000000..98dd381
Binary files /dev/null and b/Practicas/Practicas HTML/Formularios/Practica 4/formulario_taller.zip differ
diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/index.html b/Practicas/Practicas HTML/Formularios/Practica 4/index.html
index b19e548..36eb3a5 100644
--- a/Practicas/Practicas HTML/Formularios/Practica 4/index.html
+++ b/Practicas/Practicas HTML/Formularios/Practica 4/index.html
@@ -21,19 +21,50 @@
-
+
+ Verificado
+ El nombre puede contener entre 1 y 40 caracteres letras y numeros
+
-
+
-
+
+
+
+
+
+
+
+
+
-
+