marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dia 21

Browse Source
This commit is contained in:
Marcos Lopez
2023-12-21 13:25:53 +01:00
parent 65c5654cbd
commit 5ceebea03a
7 changed files with 348 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
Practicas/Practicas HTML/Formularios/Practica 4/css/style.css
View File

@@ -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 */

BIN
Practicas/Practicas HTML/Formularios/Practica 4/formulario_taller.zip Normal file
View File

Binary file not shown.

39
Practicas/Practicas HTML/Formularios/Practica 4/index.html
View File

@@ -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>