bucle02.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Formulario</title>
  5. #form1 {
  6. display:grid;
  7. grid-template-columns: 10em 1fr;
  8. grid-gap:1em;
  9. }
  10. </style>
  11. let campos;
  12.  
  13. function iniciar() {
  14. campos = document.querySelectorAll('#form1 [name]')
  15. }
  16.  
  17. function bordear() {
  18. for (const campo of campos) {
  19. if (campo.type == 'text' || campo.type == 'date' || campo.tagName == 'TEXTAREA') {
  20. campo.style.border = 'thick solid black';
  21. }
  22. }
  23. }
  24.  
  25. function predeterminar() {
  26. campos[0].value = 'Pepe';
  27. campos[1].value = 'Pérez';
  28. campos[2].value = '2000-06-17';
  29. campos[3].value = 'Sabadell';
  30. campos[4].checked = true;
  31. campos[5].value = 'Estas son las notas\nOtra línea.'
  32. }
  33.  
  34. function vaciar() {
  35. for (const campo of campos) {
  36. if (campo.type == 'checkbox') {
  37. campo.checked = false;
  38. } else {
  39. campo.value = '';
  40. }
  41. }
  42. }
  43.  
  44. </script>
  45. </head>
  46. <body onload="iniciar()">
  47. <h1>Formulario</h1>
  48. <form id="form1">
  49. <label>Nombre:</label>
  50. <input type="text" name="nombre">
  51. <label>Apellidos:</label>
  52. <input type="text" name="apellidos">
  53. <label>Nacimiento:</label>
  54. <input type="date" name="nacimiento">
  55. <label>Ciudad:</label>
  56. <select name="ciudad">
  57. <option>Barcelona</option>
  58. <option>Sabadell</option>
  59. <option>Terrassa</option>
  60. </select>
  61. <label>Vehículo:</label>
  62. <input type="checkbox" name="vehiculo" value="si">
  63. <label>Notas:</label>
  64. <textarea name="notas"></textarea>
  65. <button>Enviar</button>
  66. </form>
  67. <p id="botones">
  68. <button onclick="bordear()">Bordear textos, fechas y áreas de texto</button>
  69. <button onclick="predeterminar()">Poner valores inventados</button>
  70. <button onclick="vaciar()">Vaciar los campos</button>
  71. </p>
  72. </body>
  73. </html>

Proinf.net