Récupérer données formulaire et les afficher dans une liste à puce

Bonjour à tous,

j'ai réussi à afficher les données d'un formulaire avec innerHTML, mais je voudrais l'afficher dans une liste non ordonnée. En HTML, créer une liste n'a rien de sorcier, mais je ne vois pas comment récupérer les données une à une et ensuite les insérer sous forme de liste à puce.

Voici mon code avec innerHTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>tp1109</title>
    <script type="text/javascript" src="monscript.js"></script>
  </head>
  <body>
    <form>
    <p>
    text <input type="text" id="texte" name="ch1"/> 
    </p>
 
    <p>
    texte long <textarea id="texteLong" name="ch2" rows="3" cols="80"> du texte </textarea>
    </p>
    <p>
     checkbox  <input type="checkbox" id="check1" name="check1"/>  
               <input type="checkbox" id="check2" name="check1"/> 
    </p>
 
    <p>
      select simple <select  id="selectSimple" name="selectSimple"> 
	<option value="uno">one</option>
	<option value="dos">two</option>
	<option value="tres" selected="selected"  >three</option>	
	<option value="quatro">four</option>
      </select>
 
    </p>
 
    <p>
      radio <input type="radio" name="rad" value="premier"/>Un 
      radio <input type="radio" name="rad" value="deuxieme"/>Deux 
      radio <input type="radio" name="rad" value="troisieme"/>Trois 
      radio <input type="radio" name="rad" value="quatrieme"/>Quatre
      radio <input type="radio" name="rad" value="cinquieme"/>Cinq
    </p>
 
    <p>
      <button type="button" value="recapitulatif" onclick="affichage(); testerRadio(this.form.rad)">récapitulatif</button>
    </p>
 
    </form>
 
    <div id="recapitulatif"></div>
  </body>
 
</html>

et le fichier javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    function affichage() {
	var texte = document.getElementById('texte').value;
	var texteLong = document.getElementById('texteLong').value;
	var case1 = document.getElementById('check1').checked;
	var case2 = document.getElementById('check2').checked;
	var selectionSimple = document.getElementById('selectSimple').value;
 
	var recap= document.getElementById('recapitulatif');
	recap.innerHTML= texte + "<br>" + texteLong + "<br>"+ case1 + "<br>" + case2 + "<br>" + selectionSimple;
      }
 
      function testerRadio(radio) {
            for (var i=0; i<radio.length;i++) {
                  if (radio[i].checked) {
                  alert("radio cochée = " + radio[i].value)
         }
      }
   }

Merci par avance à ceux qui pourraient m'éclairer.
John