formulario3.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Formulario 3</title>
  5. body {
  6. background-color: beige;
  7. }
  8. #form1 section {
  9. display: grid;
  10. grid-template-columns: 10em 1fr;
  11. grid-gap: 8px 0;
  12. }
  13. #form1 button {
  14. display: block;
  15. margin-top: 1em;
  16. padding: 0.5em 2em;
  17. }
  18. #alerta {
  19. position: fixed;
  20. right: 1em;
  21. top: 1em;
  22. background-color: darkred;
  23. color: white;
  24. padding: 1em 2em;
  25. box-shadow: 2px 2px 2px gray;
  26. }
  27. </style>
  28. function enviar() {
  29. const checkbox = document.querySelector('#condiciones');
  30. if (checkbox.checked == false) {
  31. alertar('Debes aceptar las condiciones');
  32. return false;
  33. }
  34. }
  35.  
  36. function alertar(mensaje) {
  37. const div = document.querySelector('#alerta');
  38. div.innerHTML = mensaje;
  39. div.style.display = '';
  40. setTimeout(function() {
  41. div.style.display = 'none';
  42. }, 3000);
  43. }
  44. </script>
  45. </head>
  46. <h1>Formulario 3</h1>
  47.  
  48. <div id="alerta" style="display:none;">Este es el aviso de error</div>
  49.  
  50. <form id="form1"
  51. method="POST"
  52. action="enviado.html"
  53. onsubmit="return enviar()">
  54.  
  55. <label for="nombre">Nombre:</label>
  56. <input type="text" name="nombre" id="nombre">
  57.  
  58. <label for="telefono">Teléfono</label>
  59. <input type="text" name="telefono" id="telefono">
  60.  
  61. <label for="correo">Correo:</label>
  62. <input type="email" name="correo" id="correo">
  63.  
  64. <label for="observaciones">Observaciones:</label>
  65. <textarea name="observaciones" id="observaciones"></textarea>
  66.  
  67. <input type="checkbox" name="condiciones" id="condiciones">
  68. Aceptar condiciones
  69. </label>
  70.  
  71. <button>Enviar</button>
  72. </form>
  73. </body>
  74. </html>

Proinf.net