formulario4.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Formulario 4</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. if (validarNombre() == false) {
  30. return false;
  31. }
  32. if (validarCondiciones() == false) {
  33. return false;
  34. }
  35. }
  36. function validarNombre() {
  37. const input = document.querySelector('#nombre');
  38. const valor = input.value;
  39. if (valor.length < 3) {
  40. alertar('El nombre está vacío o es muy corto');
  41. return false;
  42. }
  43. }
  44. function validarCondiciones() {
  45. const checkbox = document.querySelector('#condiciones');
  46. if (checkbox.checked == false) {
  47. alertar('Debes aceptar las condiciones');
  48. return false;
  49. }
  50. }
  51. function alertar(mensaje) {
  52. const div = document.querySelector('#alerta');
  53. div.innerHTML = mensaje;
  54. div.style.display = '';
  55. setTimeout(function() {
  56. div.style.display = 'none';
  57. }, 3000);
  58. }
  59. </script>
  60. </head>
  61. <h1>Formulario 4</h1>
  62.  
  63. <div id="alerta" style="display:none;">Este es el aviso de error</div>
  64.  
  65. <form id="form1"
  66. method="POST"
  67. action="enviado.html"
  68. onsubmit="return enviar()">
  69.  
  70. <label for="nombre">Nombre:</label>
  71. <input type="text" name="nombre" id="nombre">
  72.  
  73. <label for="telefono">Teléfono</label>
  74. <input type="text" name="telefono" id="telefono">
  75.  
  76. <label for="correo">Correo:</label>
  77. <input type="email" name="correo" id="correo">
  78.  
  79. <label for="observaciones">Observaciones:</label>
  80. <textarea name="observaciones" id="observaciones"></textarea>
  81.  
  82. <input type="checkbox" name="condiciones" id="condiciones">
  83. Aceptar condiciones
  84. </label>
  85.  
  86. <button>Enviar</button>
  87. </form>
  88. </body>
  89. </html>

Proinf.net