Résumé 3 - INTRODUCTION AUX FORMULAIRES

⏬

Lien vers l'activité : Introduction aux formulaires

Dernière modif. : 31 01 2021

Balise Button

Il s'agit d'une balise classique (ouverture-fermeture) permettant d'afficher un bouton interactif.

        <button
            onclick="alert('Mais pourquoi ?');"
            onmouseover="this.style.backgroundColor='red';"
            onmouseout="this.style.backgroundColor='';">
            Alors, ça change quoi ?
        </button>

Formulaire et balise form

1 - Intérêt de la balise form

Cette balise form permet de faire trois choses :

obtenir les références des balises d'interaction contenues dans un formulaire
vérifier la validité des réponses de l'utilisateur (plus tard)
envoyer les réponses en GET ou POST de l'utilisateur vers un serveur distant (plus tard)

2 - Contenu et attributs d'une balise form

A l'intérieur de la balise d'ouverture, on pourra fournir

avec l'attribut name le nom qui permettra d'identifier le formulaire
avec l'attribut method la méthode GET ou POST à utiliser et
avec l'attribut action l'adresse du serveur distant à joindre.

Le innerHTML de la balise form contient d'autres balises : celles qui permettront à l'utilisateur de fournir des informations. La balise input de type submit permet de créer un bouton automatique d'envoi.

Une vraie balise form destinée à communiquer avec un serveur distant

<form name="mon_formulaire"
      action='https://www.infoforall.fr/act/tester-le-post/'
      method='get'>
    <button name="boutonA" onclick="modifier();">Bouton n°1</button>
    <button name="boutonB" onclick="modifier();">Bouton n°2</button>
    <input type="submit" value="Envoyer le formulaire !">
</form>

Une balise à usage purement locale destinée à de l'interaction locale

On ne s'occupe pas de l'envoi du formulaire aujourd'hui. Nous travaillerons ainsi purement en modification locale : inutile de fournir des valeurs aux attributs action et method, ni de fournir le bouton submit.

<form name="toto">
    <button name="boutonA" onclick="modifier();">Bouton n°1</button>
    <button name="boutonB" onclick="modifier();">Bouton n°2</button>
</form>

3 - Trouver les références des balises

Lorsqu'une balise input est l'enfant d'un formulaire, on peut récupérer facilement sa référence en suivant la codification : nameDuFormulaire.nameDuInput.

Sur l'exemple ci-dessous, cela peut donner : asticot.boutonA

Attention : en JS, les valeurs de l'attribut name ne sont pas à fournir en tant que strings mais directement en tant que valeurs.

<form name="asticot" method='' action=''>
    <button type="button" name="boutonA"
    onclick="toto.boutonA.style.backgroundColor='red';">Bouton n°1</button>
</form>
<form name="toto">
    <button type="button" name="boutonA"
    onclick="asticot.boutonA.style.backgroundColor='red';">Bouton n°3</button>
</form>

Description des balises d'interaction

Balise input de type number

Cette balise orpheline (sans innerHTML) permet à l'utilisateur de rentrer un entier.

<form name="saisie" method='' action=''>
    <input type="number" name="choix">
    <button type="button" name="affiche"
    onclick="alert(2*saisie.choix.value);">Afficher le double</button>
</form>

Pour récupérer la valeur d'une balise input, il faut utiliser nameFormulaire.nameInput.value.

Balise output

Ce type de balise permet d'afficher le résultat d'une évaluation à l'écran. D'où le OUT : vers l'extérieur.

<form name="saisie" method='' action=''>
    <input type="number" name="x">
    <button type="button" name="affiche" onclick="hexa(saisie.x.value);">
        Afficher le résultat en hexadécimal
    </button>
    <output name="resultat"></output>
</form>
<script>
    function hexa(valeur) {
        let en_hexa = parseInt(valeur).toString(16);
        saisie.resultat.innerHTML = en_hexa;
    }
</script>

Balise input de type button

La balise button est une balise classique (avec ouverture-fermeture) et possède donc un attribut innerHTLM.

La balise input de type button est une balise orpheline. Elle ne possède donc pas de innerHTML mais un attribut value.

1
2

    <input type="button"
      onclick="alert('Mais pourquoi ?');" value="Ne pas toucher !">

Méthode toString(base)

Cette méthode permet de transformer un entier fourni en base 10 par défaut dans une autre base :

parseInt(saisie.x.value).toString(16)

Evénement change

Cet événement est très pratique sur les formulaires : il permet de relancer un script lorsque l'utilisateur a changé son entrée.

<form name="changement" method='' action=''>
    <input type="text" name="zdt" value="Texte de base, à vous de le modifier.">
    <br>Couleur du fond :
    <input type="text" name="fond" value=""
      onchange="changement.zdt.style.backgroundColor=this.value;">
</form>

⏫