Formulaires

HTML nous offre des composants de formulaire standards pour permettre à l'utilisateur de saisir des données. HTML5 ajoute des types spécifiques(date, couleur, slider, ...)

Formulaires, références

📚 developer.mozilla.org/fr/docs/Web/HTML/Element#Formulaires

📚 htmlreference.io/forms/

📚 w3schools.com/html/html_form_elements.asp

ℹ️ Respecter la sémantique dans les formulaires

Interactivité

• JavaScript nous a permis de construire dynamiquement le DOM
• Nous avons offert une interaction minimale à l'utilisateur avec les boîtes de dialogue ou la console
• Donc, la logique de notre programme influence le contenu et l’expérience de l’utilisateur
• On souhaite offrir à l’utilisateur la possibilité de participer directement à l’expérience de la page web
• En combinant les formulaires et les événements(ex. clic) on peut récupérer efficacement des données auprès de l’utilisateur et les manipuler dans notre logique applicative

Récupérer les valeurs

D'abord récupérer l'élément concerné

const element = document.getElementById('...');
const element = document.querySelector('...');
// ...
const elements = document.getElementsByName('...'); // tableau []
const elements = document.querySelectorAll('...'); // tableau []

Ensuite, récupérer la valeur ou l'état

element.value    // Valeur associée au composant
                 // ValueAsDate valueAsNumber
element.checked  // radio/check indique si activé
optionElement.selected // <options> d'un select, indique si sélectionné

Récupérer les valeurs, exemple:

Événements

On peut demander aux éléments du DOM de nous informer de certains changements d’état et y réagir via JavaScript.

• Clic, Survol de la souris
• Appui/relâchement d’une touche
• Changement de valeur
• Chargement de la page/élément
• On peut spécifier plusieurs événements, ex: clic ET survol de la souris

📚 Liste des événements disponibles

Événements: Attributs HTML

<!-- onevenement="code javascript;" -->
<button  type="button" 
         onclick="alert('Bonjour!');">Cliquez ici!</button>

<!-- On peut spécifier plusieurs événements et appeler une fonction -->
<button  id="btn" type="button" 
         onclick="hello();" 
         onmouseover="document.getElementById('btn').innerText = 'Oui cliquez!';"
         onmouseout="document.getElementById('btn').innerText = 'Cliquez ici!';">Cliquez ici!</button>

<script>
    function hello() {
        alert('Bonjour de la fonction!');
    }
</script>

Événements: Propriétés JS

On peut également assigner directement un événement à partir des propriétés correspondantes en JavaScript.

<button id="btn" type="button">Cliquez ici!</button>
<script>
    const btn = document.getElementById('btn');

    // On peut spécifier une REFERENCE 
    // vers une fonction par son NOM
    btn.onclick = hello; // hello SANS les ()

    // On peut également déclarer une fonction ANONYME
    btn.onmouseover = function() {
        btn.innerText = 'Oui cliquez!';
    };
    btn.onmouseout = function() {
        btn.innerText = 'Cliquez ici!';
    };

    function hello() {
        alert('Bonjour fonction standard!');
    }
</script>

Événements: Listeners JS

<button id="btn" type="button">Cliquez ici!</button>
<script>
    const btn = document.getElementById('btn');

    // On précise le nom de l'événement SANS on
    btn.addEventListener('click', function() {
        alert('Bonjour fonction ANONYME');
    });

    // On peut écouter plusieurs fois le même événement
    btn.addEventListener('click', hello);

    btn.addEventListener('mouseover', function() {
        btn.innerText = 'Oui cliquez!';
    });
    btn.addEventListener('mouseout', function() {
        btn.innerText = 'Cliquez ici!';
    });

    function hello() {
        alert('Bonjour fonction STANDARD');      // affichera 1 fois
        btn.removeEventListener('click', hello); // car on remove après
    }
</script>

Quel mécanisme favoriser?

Quelle est la différence entre les différentes méthodes pour écouter les événements du DOM?

• Attributs DOMAttributs DOM : Généralement à éviter car dilue le JS dans le HTML. On souhaites organiser la structure(HTML), la mise en forme(CSS) et la logique(JS).
• Propriétés JSPropriétés JS : Méthode à privilégier, simple et efficace!
• Listener JSListener JS : Offre plus de flexibilité, par exemple on peut écouter plusieurs fois le même événement, mais demande plus de rigueur si on ajoute et retire des événements on peut perdre le fil.

Données de l'événement

const items = ['A', 'B', 'C'];
for(let i = 0; i < items.length; i++){
    const btn = document.createElement('button');
    btn.innerHTML = items[i];
    btn.onmousedown = mouseDownEvent; // Lier la fonction
    btn.dataset.myNumber = (i * 10);  
    // 📚 https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes
    document.body.appendChild(btn);
}

function mouseDownEvent(event) {
    // event contient les détails de l'événement, event.target représente l'élément déclencheur
    alert(`${event.target.outerHTML}\n i = ${event.target.dataset.myNumber}\n ${event.button == 0 ? 'gauche' : 'droite'}`);
}

Événements, références:

Explications des événements

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Référence des événements disponibles

• https://developer.mozilla.org/en-US/docs/Web/API/Element#Events
• https://www.w3schools.com/jsref/dom_obj_event.asp

Exemples d'utilisation de divers événements

• https://www.w3schools.com/js/js_events_examples.asp

Aide-mémoire des opérations DOM

https://htmldom.dev/

Démo!