Formulario para recibir diferentes datos y guardarlos...
A Pen by Gilbertogil1965 on CodePen.
Created
October 10, 2022 13:26
-
-
Save Gilbertogil1965/c222186d68e3efab0ef0644fcdaf6038 to your computer and use it in GitHub Desktop.
Formulario (cadastro)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>FORMULARIO</title> | |
| <img src="Imagen/Scalabrini.png" alt="Santo de los Migrantes"> | |
| <link rel="stylesheet" href="form.css"> | |
| </head> | |
| <body> | |
| <h2>Cadastro de la Pastoral de Migrantes</h2> | |
| <div> | |
| <p>Hola!! Como estas?</p> | |
| <p>Bienvenido a la página de registro de la Pastoral de Migrantes. Manaus, Amazonas, Brasil.</p> | |
| </div> | |
| <div class="login"> | |
| <form action="javascript: void(0)" name="usuarioForm" onsubmit="procesar()"> | |
| <input type="text" placeholder="Nombres" required autofocus> | |
| <input type="text" placeholder="Apellidos" required> | |
| <input type="email" placeholder="Correo" required> | |
| <input type="number" placeholder="Telefono- solo numeros" required> | |
| <input type="number" placeholder="CPF-solo numeros" required> | |
| <input type="text" placeholder="Direccion" required> | |
| <button type="submit">Enviar</button><br><br><br> | |
| </form> | |
| </div> | |
| <script src="form.js"></script> | |
| <footer><small class="pie-de-pg"><em>Informacion por los telefonos:</em> <a href="#">(92)91234-5678</a></small></footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| registros = []; | |
| function procesar() { | |
| const formulario = document.forms['usuarioForm']; | |
| const registro = { | |
| "nombres": formulario.elements[0].value, | |
| "apellidos": formulario.elements[1].value, | |
| "correo": formulario.elements[2].value, | |
| "telefono": formulario.elements[3].value, | |
| "cpf": formulario.elements[4].value, | |
| "direccion": formulario.elements[5].value | |
| }; | |
| registros.push(registro); | |
| formulario.reset(); | |
| formulario.elements[0].focus(); | |
| console.log(registros); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| width: 100%; | |
| text-transform: uppercase; | |
| background: burlywood; | |
| background-size: cover; | |
| } | |
| h2 { | |
| font-family: 'Franklin Gothic Medium', sans-serif; | |
| border-top: 100px; | |
| } | |
| p { | |
| font-family: Cambria; | |
| } | |
| .login { | |
| font-family: Gothic sans-serif; | |
| font-size: 35px; | |
| border-radius: 50%; | |
| border-width: 10px; | |
| border-color: yellowgreen; | |
| } | |
| p { | |
| font-size: 25px; | |
| font-weight: 300; | |
| margin-top: px; | |
| padding: 0.3px; | |
| } | |
| img { | |
| width: 300px; | |
| border-width: 15px; | |
| border-radius: 60%; | |
| border-color: blue; | |
| border-style: solid; | |
| margin: 15px; | |
| margin-right: 20px; | |
| margin-bottom: 20px; | |
| float: left; | |
| } | |
| .pie-de-pg { | |
| width: 15px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment