Formulaire avec le code

Il n'est pas nécessaire de mettre les champs d'un formulaire dans une <form> si c'est pour les utiliser avec du javascript.
Voici quelques exemples :
La balise <input> est la plus utilisée.
° un champ texte :
° un bouton :
° des radio-boutons Choix 1 - Choix 2
° des cases à cocher Case 1 - Case 2
° le champ password
° un 2ème champ texte :
Code :

La balise <b><input></b> est la plus utilisée.<br>
° un champ texte :
  <input type="text" id='idTexte01' size='30' value="Tapez un texte." autofocus><br>
° un bouton : 
  <input type="button" id='idButton01' value="Ceci est un bouton"
         onclick="alert(document.getElementById('idTexte01').value);"><br>
° des radio-boutons 
  <input type="radio" id="idRadio01" name="nomRadio012"
         onchange=" document.getElementById('idTexte09').value = 
                    'radio1 = ' + document.getElementById('idRadio01').checked +
                    '  ;   radio2 = ' + document.getElementById('idRadio02').checked">Choix 1 - 
  <input type="radio" id="idRadio02" name="nomRadio012"
         onchange=" document.getElementById('idTexte09').value = 
                    'radio1 = ' + document.getElementById('idRadio01').checked +
                    '  ;   radio2 = ' + document.getElementById('idRadio02').checked">Choix 2<br>
° des cases à cocher 
  <input type="checkbox" id="idCheck01" name="radio" 
         onchange=" document.getElementById('idTexte09').value = 
                    'check1 = ' + document.getElementById('idCheck01').checked">Case 1 - 
  <input type="checkbox" id="idCheck02"
         onchange=" document.getElementById('idTexte09').value = 
                    'check2 = ' + document.getElementById('idCheck02').checked">Case 2<br>
° le champ password 
  <input type="password"  id='idTexte02' value="azerty" size=10
         onkeyup="document.getElementById('idTexte09').value = document.getElementById('idTexte02').value;"><br>
° un 2ème champ texte :
  <input type="text" id='idTexte09' size='30' readonly
         style="background-color:rgb(128,255,255);"><br>

Référence sur la balise <input>.

Un bouton simple peut être défini par : <input type="button" value="nom du bouton" ... >
Un bouton plus sophistiqué, avec une image dessus, peut être défini par :
<button type="button" ... > code HTML </button>

Code :

<input type="button" value="Bouton simple"
       onclick="alert('Bouton simple');"><br>
<button type="button" onclick="alert('bouton 1');">Un <button></button><br>
<button type="button" onclick="alert('bouton 2');">
  Texte avant
  <img alt="perle_102" src="images/perle_102.png" width="60" height="20"
       style="vertical-align:middle;">
  texte après
</button><br>

Référence sur la balise <button>.

Quelques exemples de champs dans un formulaires, sans grand intérêt si on ne leur associe pas du code javascript.
Code :

<form name="nomForm1">
<textarea name=nomTextarea1 rows=5 cols=40 style='background-color:rgb(255, 255, 128);'>
Ce champ contient 5 lignes et 40 colonnes
On peut l'utiliser pour une entrée
et pour y écrire du texte.
</textarea>
</form>

Code :

<!-- Définition du formulaire -->
<form NAME="nomForm2" onsubmit="return ReturnPresse(event);" onreset="return ResetPresse();">
 <textarea name=nomTextarea2 rows=5 cols=60 style='background-color:rgb(255, 255, 128);'></textarea>
  <br>
  <INPUT TYPE="button"  VALUE="Ceci est un boutton nommé 1"
    NAME=button1
    onclick="BoutonPresse('bouton 1 pressé\n');">   
  <INPUT TYPE="button"  VALUE="Ceci est un boutton nommé 2"
    NAME=button2
    onclick="BoutonPresse('bouton 2 pressé\n');">   
  <INPUT TYPE="reset"  VALUE="Bouton reset"
    NAME=buttonReset>   <br>
  <b>button</b> : <INPUT TYPE="button"  VALUE="Un boutton"  NAME="UnBouton"  onclick="BoutonPresse('Un bouton pressé\n');"><br>

    En tapant return depuis ce texte, on exécute une commande : 
  <INPUT TYPE="text" id="idTexte1" NAME="nomTexte1" size="20" value="" 
    STYLE='color:#000000; background:#ffffff; font-size:16pt; font-family:arial; font-weight:bold;'><br>
Les différents type d'entrées de <INPUT> sont :<br>
<b>text</b> : <INPUT TYPE="text" id="idTexte2" NAME="nomTexte2" size="28" value="Text par défaut au reset"
    STYLE='color:#c04000; background:#ffffc0; font-size:12pt; font-family:arial; font-weight:bold;'><br>
On peut lire ou modifier sa valeur par : <b>document</b>.nom_de_la_forme.nom_du_text.<b>value</b> = ...<br>
On peut lui donner le focus par : <b>document</b>.nom_de_la_forme.nom_du_text.<b>focus();</b><br>
Les événements suivants lui sont associés : onblur, onchange, onfocus, onkeydown, onkeypress.<br>
On peut aussi donner l'atribut "autofocus" à un champ input, c.f. le premier champ de cette page.<br>
<br>
<b>password</b> : <INPUT TYPE="password" id="idTexte3" VALUE=""  NAME="nomMotPasse1"><br>
<br>
Ce bouton doit exister pour que la touche <b>Enter</b> soit prise en compte : 
<input type="submit" value="Submit"><br>
</form>

Information sur les événements

Liste des événements traitables.
Liste des Propriétés et des Méthodes de l'objet document.
Liste des Propriétés et des Méthodes de l'objet window.
HTML Examples.

Code :

<!-- Définition du formulaire -->
<form NAME="nomForm2b" onsubmit="return ListeEvenements(event);">
 <textarea name=nomTextarea2b rows=35 cols=120 style='background-color:rgb(255, 255, 128);'></textarea><br>
 <INPUT TYPE="button" id="idButton2b" name="nomButton2b" VALUE="Liste les événements" onclick="ListeEvenements(event);">  
 <INPUT TYPE="button"  VALUE="Effacer" onclick="document.nomForm2b.nomTextarea2b.value = '';"><br>
 <INPUT TYPE="button" VALUE="Liste propriétés window" onclick="ListeWindowProperty(event);">  
 <INPUT TYPE="button" VALUE="Liste propriétés location, history, navigator, screen" onclick="ListeLocationProperty(event);"><br>
 <INPUT TYPE="text" id="idText2b" name="nomText2b" size="20" value="Un texte" onkeypress="ListeEvenements(event);"><br>
 <INPUT TYPE="text" id="idText2c" name="nomText2c" size="20" value="Un texte" 
        onkeydown="document.nomForm2b.nomTextarea2b.value += 
                '\nonkeydown   ' + event.charCode + '  ' + event.key + '  ' + event.which + '  ' + event.keyCode;"
        onkeypress="document.nomForm2b.nomTextarea2b.value += 
                '\nonkeypress ' + event.charCode + '  ' + event.key + '  ' + event.which + '  ' + event.keyCode;"
        onkeyup="document.nomForm2b.nomTextarea2b.value += 
                '\nonkeyup     ' + event.charCode + '  ' + event.key + '  ' + event.which + '  ' + event.keyCode + '\n';
                document.nomForm2b.nomTextarea2b.scrollTop = 90000;">
 pour l'ordre des événements.<br>
 Ce bouton doit exister pour que la touche <b>Enter</b> soit prise en compte : 
 <input type="submit" id="idSubmit2b" name="nomSubmit2b" value="Submit"><br>
</form>

Code :

<INPUT TYPE="text" NAME="nomTexte2a" size="55" value="Ce texte n'est pas modifiable, car il possède l'attribut readonly." readonly
    STYLE='color:#000080; background:#ffffff; font-size:12pt; font-family:arial; font-weight:bold;
           border-style:solid;'><br>
<INPUT TYPE="text" NAME="nomTexte2b" size="55" value="Ce texte n'est pas modifiable, car il possède l'attribut readonly." readonly
    STYLE='color:#000080; background:#ffffff; font-size:12pt; font-family:arial; font-weight:bold;
           border-style:none;'><br>
<INPUT TYPE="text" NAME="nomTexte13" size='60' value="Ce texte n'est pas modifiable ni sélectionnable, car readonly et disabled." 
       readonly disabled
    STYLE='color:#000080; background:#ffffff; font-size:12pt; font-family:arial; font-weight:bold;
           border-style:none;'><br>

Code :

<form NAME="nomForm3">
Choix multiple à l'aide du groupe de boutons <b>radio</b>.<br>
Civilité : 
  <INPUT TYPE="radio" name="nomCivilite" id="idCivil_1"  checked
onchange="EtatRadio();"> <label for="idCivil_1">Mme</label> 
- <INPUT TYPE="radio" name="nomCivilite" id="idCivil_2"
onchange="EtatRadio();"> <label for="idCivil_2">Mlle</label> 
- <INPUT TYPE="radio" name="nomCivilite" id="idCivil_3"
onchange="EtatRadio();"> <label for="idCivil_3">Mr</label> <br>
Etat : 
<input type="text" name="nomEtatRadio" size="70" value="" readonly
    style='color:#000080; background:#ffffff; font-size:12pt; font-family:arial; 
           font-weight:bold; border-style:none;'><br>
</form>

Code javascript associté et placé dans le <head>

<script type="text/javascript">
function EtatRadio() {
//====================
document.nomForm3.nomEtatRadio.value = 
   'Mme : ' + document.getElementById("idCivil_1").checked +
   '  ;  Mlle : ' + document.getElementById("idCivil_2").checked +
   '  ;  Mr : ' + document.getElementById("idCivil_3").checked;

// Variante   '  ;  Mlle : ' + document.getElementsByName("nomCivilite")[1].checked;
} // EtatRadio
</script>

Code :

<form NAME="nomForm4">
Choix multiple à l'aide du groupe de boutons <b>checkbox</b>.<br>
Couleur : 
  <INPUT TYPE="checkbox"  VALUE="1"  id="idRouge" 
onchange="EtatCheckBox();"> <label for="idRouge">Rouge</label>
- <INPUT TYPE="checkbox"  VALUE="2"  id="idVert"  checked
onchange="EtatCheckBox();"> <label for="idVert">Vert</label>
- <INPUT TYPE="checkbox"  VALUE="3"  id="idBleu" 
onchange="EtatCheckBox();"> <label for="idBleu">Bleu</label><br>
Etat : 
<input type="text" name="nomEtatCheck" size="30" value="" readonly
    style='color:#000080; background:#ffffff; font-size:12pt; font-family:arial; 
           font-weight:bold; border-style:none;'><br>
</form>

Code javascript associté et placé dans le <head>

<script type="text/javascript">
function EtatCheckBox() {
//=======================
document.nomForm4.nomEtatCheck.value = 
   'Rouge : ' + document.getElementById("idRouge").checked +
   '  ;  Vert : ' + document.getElementById("idVert").checked +
   '  ;  Bleu : ' + document.getElementById("idBleu").checked;
} // EtatCheckBox
</script>

Sélection d'un choix à l'aide de select. select Tag option Tag
Sélection d'une ville :
Code :

<br>
Sélection d'un choix à l'aide de <b>select</b>.<br>
Sélection d'une ville : <select NAME="ville" size="1">
<option value="">Faites un choix...</option>
<option value="1">Genève</option>
<option value="2">Lausanne</option>
<option value="3">Neuchâtel</option>
<option value="4">Fribourg</option>
</select>
<br>

Sélection d'un choix à l'aide de select, avec une présélection diffiérente du premier.
document.getElementById('idColor').value permet de récupérer le choix.
Sélection d'une couleur :
Code :

Sélection d'un choix à l'aide de <b>select</b>, avec une présélection diffiérente du premier.<br>
document.getElementById('idColor').value permet de récupérer le choix.<br>
Sélection d'une couleur : <select id="idColor" size="1">
<option>Noire</option>
<option>Bleue</option>
<option selected>Blanc</option>
<option>Rouge</option>
</select>
<br>

Choix multiple à l'aide du groupe de boutons checkbox.
Il n'est pas nécessaire de les mettre dans une <form>
Couleur : Rouge - Vert - Bleu
Etat :
Code :

Choix multiple à l'aide du groupe de boutons <b>checkbox</b>.<br>
Il n'est pas nécessaire de les mettre dans une <form><br>
Couleur : 
<INPUT TYPE="checkbox"  VALUE="1"  id="idRouge2" 
  onchange="document.getElementById('idEtatCheck2').value = 
   'Rouge : ' + document.getElementById('idRouge2').checked +
   '  ;  Vert : ' + document.getElementById('idVert2').checked +
   '  ;  Bleu : ' + document.getElementById('idBleu2').checked;"> 
  <label for="idRouge2">Rouge</label> -
<INPUT TYPE="checkbox"  VALUE="2"  id="idVert2"  checked
  onchange="document.getElementById('idEtatCheck2').value = 
   'Rouge : ' + document.getElementById('idRouge2').checked +
   '  ;  Vert : ' + document.getElementById('idVert2').checked +
   '  ;  Bleu : ' + document.getElementById('idBleu2').checked;"> 
  <label for="idVert2">Vert</label> -
<INPUT TYPE="checkbox"  VALUE="3"  id="idBleu2" 
  onchange="document.getElementById('idEtatCheck2').value = 
   'Rouge : ' + document.getElementById('idRouge2').checked +
   '  ;  Vert : ' + document.getElementById('idVert2').checked +
   '  ;  Bleu : ' + document.getElementById('idBleu2').checked;"> 
  <label for="idBleu2">Bleu</label><br>
Etat : 
<input type="text" id="idEtatCheck2" size="32" value="" readonly
  style='color:#000080; background:#ffffff; font-size:12pt; font-family:arial; 
         font-weight:bold; border-style:none;'><br>

Ce paragraphe est éditable !.

Code :

<div contenteditable="true" style="color:#008000">
Ce paragraphe est éditable !.
</div>

Quelques styles :
Réf.
text-decoration:overline;   text-decoration: line-through;   text-decoration: underline;

Réf.
text-shadow: 2px 2px #ff0000;

Réf.  et  Réf.
border-style:solid;   border-style:none;   border-color:red;   border-style:dotted solid;

Références concernant les formulaires :

http://www.toutjavascript.com/savoir/savoir06.php3 exemples en français.
http://www.w3schools.com/html/html_forms.asp exemples en anglais.
http://www.w3schools.com/tags/tag_form.asp référence en anglais.

Plan du Site : Home bgweb.html exemples.html a3js1050_formulaires_avec_code.html

Page mise à jour le 27 avril 2016 par Bernard Gisin
Hébergement par : www.infomaniak.ch