Exemples d'utilisation de formulaires

Quelques exemples davec les champs de formulaire.

Champ texte

Cet exemple consiste à lire le prénom de l'utilisateur dans un champ, puis de lui souhaiter la bienvenue.

HTML

<!--Lire un champs et l'afficher sur la page-->
<form id="formBonjour">
    <input type="text" name="prenom" 
            placeholder="Veuillez inscrire votre prénom">
    <button type="button" onclick="afficheBonjour()">
        Bonjour
    </button>
</form>

Javascript

/*Afficher un message de bonjour*/
function afficheBonjour()
{
    //Trouver le formulaire
    let formulaire = document.getElementById("formBonjour");
    let prenom = formulaire.prenom.value;
    let message;
    let zoneMessage = document.createElement("p");

    //Validation : message en rouge si champ vide
    if(prenom != "")
    {
        message = "Bonjour " + prenom + "! Comment allez-vous ?";
        //Ajout de classes de style
        zoneMessage.classList.add("display-3","text-success");
    } else {
        message = "Oh non! Je ne connais pas votre prénom!";
        //Ajout de classes de style
        zoneMessage.classList.add("display-3","text-danger");
    }

    zoneMessage.textContent = message ;

    formulaire.appendChild(zoneMessage);
}

Gradateur (range)

Cet exemple utilise 3 gradateurs (range) pour modifier la quantité de rouge, vert, bleu de la couleur de fond de la page.

Dès que le gradateur est bougé (oninput), on applique les modifications.

HTML

<form id="selectCouleur">
    <div>
        <label for="rouge">R</label>
        <input id="rouge" type="range" min="0" max="255" name="rouge" value="255" oninput="changerCouleur()">
        <span id="qteRouge">255</span>
    </div>
    <div>
        <label for="vert">V </label>
        <input id="vert" type="range" min="0" max="255" name="vert" value="255" oninput="changerCouleur()">
        <span id="qteVert">255</span>
    </div>
    <div>
        <label for="bleu">B </label>
        <input id="bleu" type="range" min="0" max="255" name="bleu" value="255" oninput="changerCouleur()">
        <span id="qteBleu">255</span>
    </div>
</form>

Javascript

function changerCouleur() {
    let formulaire = document.getElementById("selectCouleur");

    let rouge = formulaire.rouge.value;
    let vert = formulaire.vert.value;
    let bleu = formulaire.bleu.value;

    //Modifier la valeur numérique à côté du gradateur
    document.getElementById("qteRouge").innerText = rouge;
    document.getElementById("qteVert").innerText = vert;
    document.getElementById("qteBleu").innerText = bleu;

    //Changer la couleur de fond
    document.body.style.backgroundColor = "rgb(" + rouge + "," + vert + "," + bleu + ")";
}

Boutons radio

Cet exemple lit des boutons radio mutuellement exclusifs (ont le même name) et affiche une image selon le choix fait.

HTML

<form id="choixDessert">
    <p>Quel est ton dessert favoris ?</p>
    <input id="gateaux" type="radio" name="choixDessert" value="Gateaux" onchange="afficherImageDessert()">
    <label for="gateaux">Gâteau au chocolat</label>
    <input id="biscuits" type="radio" name="choixDessert" value="Biscuits" onchange="afficherImageDessert()">
    <label for="biscuits">Biscuits</label>
    <input id="tartes" type="radio" name="choixDessert" value="Tartes" onchange="afficherImageDessert()">
    <label for="tartes">Tartes</label>
    <input id="aucun" type="radio" name="choixDessert" value="aucun" checked onchange="afficherImageDessert()">
    <label for="aucun">Aucun de ces choix</label>
</form>

Javascript

function afficherImageDessert()
{
    let formulaire = document.getElementById("choixDessert");
    let choix = formulaire.choixDessert.value;
    let image = document.createElement("img");

    //Si une image de dessert existe déjà, la supprimer
    if (document.getElementById("imageDessertChoisi") != null) {
        formulaire.removeChild(document.getElementById("imageDessertChoisi"));
    }

    //Vérifier quel choix a été fait et choisir la bonne image
    if(choix == "aucun")
    {
        return;
    }
    else if(choix == "Gateaux")
    {
        image.src = "img/cake.jpg";
        image.alt = choix;
    }
    else if(choix == "Biscuits")
    {
        image.src = "img/cookies.jpg";
        image.alt = choix;
    }
    else if(choix == "Tartes")
    {
        image.src = "img/pie.jpg";
        image.alt = choix;
    }

    //Donner un id à l'image et l'afficher sur la page
    image.id = "imageDessertChoisi";
    formulaire.appendChild(image);   
}

Case à cocher (checkbox)

Cet exemple vérifie si une case est cochée lors du clic sur un bouton.

HTML

<form>
    <input id="optPublicite" type="checkbox">
    <label for="optPublicite">Je désire recevoir les publicités par courriel</label>

    <button type="button" onclick="validerOptionPublicite()">Valider</button>
</form>

Javascript

function validerOptionPublicite()
{
    if(document.getElementById("optPublicite").checked)
    {
        alert("Vous avez choisi de recevoir des publicités.");
    }
    else{
        alert("Vous ne recevrez plus de publicité de notre part.");
    }
}