formulario2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Formulario 2</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. </style>
  19. function enviar() {
  20. const checkbox = document.querySelector('#condiciones');
  21. if (checkbox.checked == false) {
  22. alert('Debes aceptar las condiciones');
  23. return false;
  24. }
  25. }
  26. </script>
  27. </head>
  28. <h1>Formulario 2</h1>
  29. <form id="form1"
  30. method="POST"
  31. action="enviado.html"
  32. onsubmit="return enviar()">
  33.  
  34. <label for="nombre">Nombre:</label>
  35. <input type="text" name="nombre" id="nombre">
  36.  
  37. <label for="telefono">Teléfono</label>
  38. <input type="text" name="telefono" id="telefono">
  39.  
  40. <label for="correo">Correo:</label>
  41. <input type="email" name="correo" id="correo">
  42.  
  43. <label for="observaciones">Observaciones:</label>
  44. <textarea name="observaciones" id="observaciones"></textarea>
  45.  
  46. <input type="checkbox" name="condiciones" id="condiciones">
  47. Aceptar condiciones
  48. </label>
  49.  
  50. <button>Enviar</button>
  51. </form>
  52. </body>
  53. </html>

Proinf.net