Le code HTML produisant cet affichage est le suivant :
1. <!DOCTYPE html>
2. <html xmlns="http://www.w3.org/1999/xhtml"> 3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>formulaire</title>
6. <script type="text/javascript"> 7. function effacer() {
8. alert("Vous avez cliqué sur le bouton Effacer"); 9. }
10. </script> 11.</head> 12.
13.<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)"> 14. <h1 style="text-align: center">Formulaire HTML</h1>
15. <form method="post" action="FormulairePost.aspx"> 16. <table border="0">
17. <tr>
18. <td>Etes-vous marié(e)</td> 19. <td>
20. <input type="radio" value="Oui" name="R1" />Oui
21. <input type="radio" name="R1" value="non" checked="checked" />Non 22. </td>
23. </tr> 24. <tr>
25. <td>Cases à cocher</td> 26. <td>
28. <input type="checkbox" name="C2" value="deux" checked="checked" />2 29. <input type="checkbox" name="C3" value="trois" />3
30. </td> 31. </tr> 32. <tr>
33. <td>Champ de saisie</td> 34. <td>
35. <input type="text" name="txtSaisie" size="20" value="qqs mots" /> 36. </td>
37. </tr> 38. <tr>
39. <td>Mot de passe</td> 40. <td>
41. <input type="password" name="txtMdp" size="20" value="unMotDePasse" /> 42. </td>
43. </tr> 44. <tr>
45. <td>Boîte de saisie</td> 46. <td>
47. <textarea rows="2" name="areaSaisie" cols="20"> 48. ligne1 49. ligne2 50. ligne3 51.</textarea> 52. </td> 53. </tr> 54. <tr> 55. <td>combo</td> 56. <td>
57. <select size="1" name="cmbValeurs"> 58. <option>choix1</option>
59. <option selected="selected">choix2</option> 60. <option>choix3</option>
61. </select> 62. </td> 63. </tr> 64. <tr>
65. <td>liste à choix simple</td> 66. <td>
67. <select size="3" name="lst1">
68. <option selected="selected">liste1</option> 69. <option>liste2</option>
70. <option>liste3</option> 71. <option>liste4</option> 72. <option>liste5</option> 73. </select>
74. </td> 75. </tr> 76. <tr>
77. <td>liste à choix multiple</td> 78. <td>
79. <select size="3" name="lst2" multiple="multiple"> 80. <option>liste1</option>
81. <option>liste2</option>
82. <option selected="selected">liste3</option> 83. <option>liste4</option>
84. <option>liste5</option> 85. </select> 86. </td> 87. </tr> 88. <tr> 89. <td>bouton</td> 90. <td>
91. <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" /> 92. </td> 93. </tr> 94. <tr> 95. <td>envoyer</td> 96. <td>
97. <input type="submit" value="Envoyer" name="cmdRenvoyer" /> 98. </td>
99. </tr> 100. <tr>
101. <td>rétablir</td> 102. <td>
103. <input type="reset" value="Rétablir" name="cmdRétablir" /> 104. </td>
105. </tr> 106. </table>
107. <input type="hidden" name="secret" value="uneValeur" /> 108. </form>
109. </body> 110. </html>
L'association contrôle visuel <--> balise HTML est le suivant :
Contrôle balise HTML
formulaire <form method="POST" >
champ de
saisie <input type="text" name="txtSaisie" size="20" value="qqs mots"/> champ de
saisie cachée <input type="password" name="txtMdp" size="20" value="unMotDePasse"/> champ de
saisie multilignes
<textarea rows="2" name="areaSaisie" cols="20"> ligne1
ligne2 ligne3 </textarea>
boutons radio <input type="radio" value="Oui" name="R1"/>Oui
<input type="radio" name="R1" value="non" checked="checked"/>Non
cases à cocher <input type="checkbox" name="C1" value="un"/>1
<input type="checkbox" name="C2" value="deux" checked="checked"/>2 <input type="checkbox" name="C3" value="trois"/>3
Combo <select size="1" name="cmbValeurs"> <option>choix1</option> <option selected="selected">choix2</option> <option>choix3</option> </select> liste à sélection unique
<select size="3" name="lst1">
<option selected="selected">liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> liste à sélection multiple
<select size="3" name="lst2" multiple="multiple"> <option>liste1</option>
<option>liste2</option>
<option>liste4</option> <option>liste5</option> </select>
bouton de type
submit <input type="submit" value="Envoyer" name="cmdRenvoyer"/> bouton de type
reset <input type="reset" value="Rétablir" name="cmdRétablir"/> bouton de type
button <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()"/>
Passons en revue ces différentes balises :
2.5.2.1
Le formulaire
formulaire <form method="post" action="FormulairePost.aspx"> balise HTML <form name="..." method="..." action="...">...</form>
attributs name="frmexemple" : nom du formulaire
method="..." : méthode utilisée par le navigateur pour envoyer au serveur Web les valeurs récoltées dans le formulaire
action="..." : URL à laquelle seront envoyées les valeurs récoltées dans le formulaire.
Un formulaire Web est entouré des balises <form>...</form>. Le formulaire peut avoir un nom (name="xx"). C'est le cas pour tous les contrôles qu'on peut trouver dans un formulaire. Le but d'un formulaire est de rassembler des informations données par l'utilisateur au clavier/souris et d'envoyer celles-ci à une URL de serveur Web. Laquelle ? Celle référencée dans l'attribut action="URL". Si cet attribut est absent, les informations seront envoyées à l'URL du document dans lequel se trouve le formulaire. Un client Web peut utiliser deux méthodes différentes appelées POST et GET pour envoyer des données à un serveur web. L'attribut method="méthode", avec method égal à GET ou POST, de la balise <form> indique au navigateur la méthode à utiliser pour envoyer les informations recueillies dans le formulaire à l'URL précisée par l'attribut action="URL". Lorsque l'attribut method n'est pas précisé, c'est la méthode GET qui est prise par défaut.