diff options
| author | Cesar Monroy <[email protected]> | 2023-05-09 21:15:47 -0600 |
|---|---|---|
| committer | Cesar Monroy <[email protected]> | 2023-05-09 21:15:47 -0600 |
| commit | 44050a800568de91fda4e11b0dc287a3dcba5a31 (patch) | |
| tree | feccd50e770781a69d01c3af563973747fd72284 /index.html | |
Login with length validation
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..47d74c2 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8"/> + <title>Login</title> + <link href="css/normalize.css" rel="stylesheet"/> + <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@400;700&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> + <link href="css/styles.css" rel="stylesheet"/> + </head> + <body> + <main> + <h1 class="title">Log in</h1> + <form class="form" name="login" method="post"> + <label class="form__label" for="username">Usuario</label> + <div class="input-container"> + <input id="username" class="form__input" name="username" type="text" required/> + <span id="icon-check__username" class="material-symbols-outlined form__input-icon icon-check">check_circle</span> + <span id="icon-cancel__username" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span> + </div> + <p id="input-error__username" class="form__input-error">El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.</p> + <label class="form__label" for="password">Contraseña</label> + <div class="input-container"> + <input id="password" class="form__input" name="password" type="password" required/> + <span id="icon-check__password" class="material-symbols-outlined form__input-icon icon-check">check_circle</span> + <span id="icon-cancel__password" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span> + </div> + <p id="input-error__password" class="form__input-error">La contraseña tiene que ser de 4 a 12 dígitos</p> + <p class="form__error-text"><span class="material-symbols-outlined icon-warning">warning</span> <b>Error:</b> Por favor rellena el formulario correctamente</p> + <div class="form__submit"> + <input class="form__submit__button" type="submit" value="Enviar"/> + </div> + <p class="form__success-send-text">Formulario enviado exitosamente!</p> + </form> + </main> + <script src="js/login.js"></script> + </body> +</html> |