formulario1.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Formulario 1</title>
  5. let input, range, radio1, radio2, radio3;
  6.  
  7. function iniciar() {
  8. input = document.querySelector('#titulo');
  9. range = document.querySelector('#estrellas');
  10. radio1 = document.querySelector('#tapa_blanda');
  11. radio2 = document.querySelector('#tapa_dura');
  12. radio3 = document.querySelector('#tapa_plastico');
  13. }
  14. function ponerLibro1() {
  15. input.value = "La fundación";
  16. range.value = 4;
  17. radio2.checked = true;
  18. }
  19. function ponerLibro2() {
  20. input.value = "El Señor de los Anillos";
  21. range.value = 5;
  22. radio1.checked = true;
  23. }
  24. function ponerLibro3() {
  25. input.value = "Dune";
  26. range.value = 3;
  27. radio3.checked = true;
  28. }
  29.  
  30. </script>
  31. </head>
  32. <body onload="iniciar()">
  33. <h1>Formulario 1</h1>
  34. <form>
  35. <label for="titulo">Título</label>
  36. <input type="text" name="titulo" id="titulo">
  37.  
  38. <label for="estrellas">Valoración</label>
  39. <input type="range" name="estrellas" id="estrellas"
  40. min="0" max="5" step="1">
  41.  
  42. <label>Tapa</label>
  43. <label><input type="radio" name="tapa" value="blanda"
  44. id="tapa_blanda">Blanda</label>
  45. <label><input type="radio" name="tapa" value="dura"
  46. id="tapa_dura">Dura</label>
  47. <label><input type="radio" name="tapa" value="plástico"
  48. id="tapa_plastico">Plástico</label>
  49. </form>
  50. <p>
  51. <button onclick="ponerLibro1()">Primer libro</button>
  52. <button onclick="ponerLibro2()">Segundo libro</button>
  53. <button onclick="ponerLibro3()">Tercer libro</button>
  54. </p>
  55. </body>
  56. </html>

Proinf.net