formulario2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Formulario 2</title>
  5.  
  6. const LIBROS = [
  7. {
  8. titulo: "La fundación",
  9. valoracion: 4,
  10. tapa: "dura",
  11. },
  12. {
  13. titulo: "El Señor de los Anillos",
  14. valoracion: 5,
  15. tapa: "blanda",
  16. },
  17. {
  18. titulo: "Dune",
  19. valoracion: 3,
  20. tapa: "plástico",
  21. },
  22. ];
  23.  
  24. function ponerLibro(indiceLibro) {
  25. const form = document.getElementById('form2');
  26. const libro = LIBROS[indiceLibro];
  27. form.titulo.value = libro.titulo;
  28. form.estrellas.value = libro.valoracion;
  29. form.tapa.value = libro.tapa;
  30. }
  31.  
  32. </script>
  33. #form2 {
  34. display:grid;
  35. grid-template-columns: 8em 20em;
  36. }
  37. #form2 fieldset label {
  38. display:block;
  39. }
  40. </style>
  41. </head>
  42. <h1>Formulario 2</h1>
  43. <form id="form2">
  44. <label for="titulo">Título</label>
  45. <input type="text" name="titulo">
  46.  
  47. <label for="estrellas">Valoración</label>
  48. <input type="range" name="estrellas" min="0" max="5" step="1">
  49.  
  50. <label>Tapa</label>
  51. <label><input type="radio" name="tapa" value="blanda">Blanda</label>
  52. <label><input type="radio" name="tapa" value="dura">Dura</label>
  53. <label><input type="radio" name="tapa" value="plástico">Plástico</label>
  54. </form>
  55. <p>
  56. <button onclick="ponerLibro(0)">Primer libro</button>
  57. <button onclick="ponerLibro(1)">Segundo libro</button>
  58. <button onclick="ponerLibro(2)">Tercer libro</button>
  59. </p>
  60. </body>
  61. </html>
  62.  

Proinf.net