Basado en un modelo de formulario de captura de datos para el registro de una cuenta de correo electronico, pedir los datos del usuario e imprimirlos vinculandolos con otra página.
Código:
| <html> | |
| <style type="text/css"> | |
| *{ | |
| margin:0px; | |
| padding:0px; | |
| } | |
| body{ | |
| background: #2F4F4F; | |
| background-position:center; | |
| } | |
| form{ | |
| background: #FF0000; | |
| width: 500px; | |
| border:1px solid #4e4d4d; | |
| border-radius: 3px; | |
| -moz-border-radious:3px; | |
| -webkit-borde-radious:3px; | |
| box-shadow:inset 0 0 10px #000; | |
| margin: auto; | |
| } | |
| form h1{ | |
| text-align: center; | |
| color:#000000; | |
| font-weight: normal; | |
| font-size: 40pt; | |
| margin:10px 20px; | |
| } | |
| form input{ | |
| width:100px; | |
| height: 15px; | |
| padding: 0px 10px; | |
| margin:10px 30px; | |
| color:#6d6d6d; | |
| text-align: center; | |
| } | |
| form button{ | |
| width:500px; | |
| margin:20px 0px 30px 30px; | |
| height: 200px; | |
| } | |
| form button:hover{ | |
| background:#3a3a3a; | |
| } | |
| </style> | |
| <head> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| function enviarFormulario() | |
| { | |
| var nombre=document.getElementById('nombre').value; | |
| var apellido=document.getElementById('apellido').value; | |
| var usuario=document.getElementById('usuario').value; | |
| var contraseña=document.getElementById('contraseña').value; | |
| var confirmar=document.getElementById('confirmar').value; | |
| var telefono=document.getElementById('telefono').value; | |
| if (document.getElementById('radio1').checked) | |
| { | |
| document.write('Nombre:'+nombre+'<br>' | |
| +'Apellido:'+apellido+'<br>' | |
| +'Usuario:'+usuario+'<br>' | |
| +'Contraseña:'+contraseña+'<br>' | |
| +'Confirmacion contraseña:'+confirmar+'<br>' | |
| +'Telefono:'+telefono+'<br>' | |
| +'Ubicación:Mexico'); | |
| } | |
| if (document.getElementById('radio2').checked) | |
| { | |
| document.write('Nombre:'+nombre+'<br>' | |
| +'Apellido:'+apellido+'<br>' | |
| +'Usuario:'+usuario+'<br>' | |
| +'Contraseña:'+contraseña+'<br>' | |
| +'Confirmacion contraseña:'+confirmar+'<br>' | |
| +'Telefono:'+telefono+'<br>' | |
| +'Ubicación:Estados Unidos'); | |
| } | |
| if (document.getElementById('radio3').checked) | |
| { | |
| document.write('Nombre:'+nombre+'<br>' | |
| +'Apellido:'+apellido+'<br>' | |
| +'Usuario:'+usuario+'<br>' | |
| +'Contraseña:'+contraseña+'<br>' | |
| +'Confirmacion contraseña:'+confirmar+'<br>' | |
| +'Telefono:'+telefono+'<br>' | |
| +'Ubicación:Argentina'); | |
| } | |
| if (document.getElementById('radio4').checked) | |
| { | |
| document.write('Nombre:'+nombre+'<br>' | |
| +'Apellido:'+apellido+'<br>' | |
| +'Usuario:'+usuario+'<br>' | |
| +'Contraseña:'+contraseña+'<br>' | |
| +'Confirmacion contraseña:'+confirmar+'<br>' | |
| +'Telefono:'+telefono+'<br>' | |
| +'Ubicación:Brasil'); | |
| } | |
| } | |
| </script> | |
| <form> | |
| Nombre:<br> | |
| <input type="text" id="nombre"><br><br> | |
| Apellido:<br> | |
| <input type="text" id="apellido"><br><br> | |
| Nombre del usuario:<br> | |
| <input type="text" id="usuario"><br><br> | |
| Contraseña:<br> | |
| <input type="text" id="contraseña"><br><br> | |
| Confirmar contraseña:<br> | |
| <input type="text" id="confirmar"><br><br> | |
| Fecha de nacimiento(dd/m/aaaa):<br> | |
| <input type="text" id="dia"> | |
| <select id="select1" onChange="cambiarMes()"> | |
| <option value=>Enero</option> | |
| <option value=>Febrero</option> | |
| <option value=>Marzo</option> | |
| <option value=>Abril</option> | |
| <option value=>Mayo</option> | |
| <option value=>Junio</option> | |
| <option value=>Julio</option> | |
| <option value=>Agosto</option> | |
| <option value=>Septiembre</option> | |
| <option value=>Octubre</option> | |
| <option value=>Noviembre</option> | |
| <option value=>Diciembre</option> | |
| </select> | |
| <input type="text" id"año"> <br> <br> | |
| Sexo:<br> | |
| <select id="select2" onChange="cambiarSexo()"> | |
| <option value=>Maculino</option> | |
| <option value=>Femenino</option> | |
| <option value=>Otro</option> | |
| <option value=>Prefiero no decirlo</option> | |
| </select> <br> <br> | |
| Ingrese su telefono: <br> | |
| <input type="text" id="telefono"><br><br> | |
| Ubicacion:<br> | |
| <input type="radio" id="radio1" name="ubicacion">Mexico <br> | |
| <input type="radio" id='radio2' name="ubicacion">Estados Unidos <br> | |
| <input type="radio" id='radio3' name="ubicacion">Argentina <br> | |
| <input type="radio" id='radio4' name="ubicacion">Brasil <br><br> | |
| <input type="button" value="Registrar" onClick="enviarFormulario()"> | |
| </form> | |
| </body> | |
| </html> |
No hay comentarios:
Publicar un comentario