Comment accéder aux éléments de formulaire HTML en JavaScript - Mannequins

Comme avec tous les autres éléments HTML, vous pouvez interagir directement avec les éléments HTML5 en JavaScript. L'astuce consiste à s'assurer que les éléments que vous choisissez fonctionneront avec les navigateurs et les plates-formes que vous devez prendre en charge.

Dans cet exemple, vous voyez comment utiliser les balises et dans le cadre d'une solution qui charge une image à partir du disque et la stocke dans une balise

. Le code suivant montre le code HTML que vous utilisez pour effectuer la tâche.

La balise agit comme un conteneur contenant les

et les balises. L'utilisation d'un conteneur comme celui-ci signifie que vous pouvez effectuer des tâches telles que le formatage de l'image et de la légende en même temps.

Les événements sont également gérés conjointement. Dans ce cas, peu importe si l'utilisateur clique sur l'image ou la légende, l'application appelle Clicked (). Dans ce cas, tout ce que Clicked () fait est afficher un message à l'utilisateur comme montré ici:

function Clicked () {// Affiche un message. alert ("Vous avez cliqué sur l'image.");}

JavaScript est entièrement capable d'accéder à ces éléments. Dans ce cas, la balise

est vide lorsque le formulaire est chargé. Cliquer sur un bouton affiche l'image à l'écran en changeant le contenu de la balise

. Voici le code nécessaire pour charger l'image:

function LoadImage () {// Spécifie l'image. var Image = document. getElementById ("Image"); Image. alt = "Ceci est une image de test."; Image. src = "TestImage.png"; // Définit la légende. var Caption = document. getElementById ("Légende"); Légende. innerHTML = "Une image de test";}

Lorsque vous travaillez avec la balise

, vous accédez directement aux attributs src (source d'image) et alt (description de texte alternative d'image). Définissez le contenu à l'aide de la propriété innerHTML.