Maison > Article > interface Web > Comment utiliser la balise en HTML ?

`Comment utiliser la balise en HTML ?`

王林avant
2023-08-22 14:05:071402parcourir


Dans le prochain article, nous apprendrons comment utiliser la balise de sortie en HTML. 
L'un des éléments HTML5 est la balise  Il fournit un emplacement d'affichage pour les résultats des calculs de script ou de l'interaction de l'utilisateur avec les éléments du formulaire (balises 
). Pour les calculs complexes, tels que les résultats de conversion de taux de change, la balise  

Grammaire
Voici la syntaxe de la balise 
<output>….content…</output>

Utilisez la balise  pour les calculsLa traduction est : 
Utilisez la balise  pour les calculs
Vous devez avoir des connaissances en JavaScript pour utiliser . Pour que le formulaire sache que l'utilisateur saisit un nombre entier, il doit définir  Si l'utilisateur fournit des informations supplémentaires, le formulaire  renverra NaN, n'indiquant pas un nombre. 
Regardons quelques exemples pour comprendre comment utiliser la balise 
La traduction chinoise de Exemple 1
 est : Exemple 1
Dans l'exemple ci-dessous, nous créons une tâche de multiplication pour afficher le résultat. 
<!DOCTYPE html>
<html>
<body>
   <p>Multiplication:</p>
   <form oninput="a3.value = a1.valueAsNumber * a2.valueAsNumber">
      a1:<input type="number" id="a1"> *
      a2:<input type="number" id="a2"> =
      <output name="a3" for="a1 a2"> </output>
   </form>
</body>
</html>

Lorsque le script s'exécutera, il générera une sortie affichant les champs de saisie a1, a2 pour saisir les valeurs entières afin d'effectuer le calcul que nous avons spécifié dans le script. 
Lorsque l'utilisateur essaie de saisir la valeur de a1 et attend la sortie, mais ne saisit pas la valeur de a2, un résultat avec la sortie de "Nan" sera généré sur la page Web. 
Exemple 2
Dans l'exemple ci-dessous, nous utilisons la portée de l'élément  

<!DOCTYPE html>
<html>
<body>
   <form oninput="a1.value = a2.value">
      <input type="range" id="a2" value="10">
      <br /><br />
      The value is <output name="a1" for="a2">10</output>
   </form>
</body>
</html>

Lorsque le script est exécuté, il génère une sortie affichant un curseur représentant la plage , avec une valeur de paramètre par défaut de "10". 
Lorsque l'utilisateur glisse ou essaie de modifier la plage de , la nouvelle valeur de la plage sera affichée sur notre page Web. 
Exemple 3
Dans l'exemple ci-dessous, nous créons une tâche d'addition en utilisant type="range" et "number". 
<!DOCTYPE html>
<html>
<head>
   <title>HTML Output Tag</title>
</head>
<body>
   <form oninput = "result.value = parseInt(a1.value)+parseInt(a2.value)">
      <input type = "range" name = "a1" value = "0" /> +
      <input type = "number" name = "a2" value = "5" /> <br />
      The output is: <output name = "result"></output>
   </form>
</body>
</html>

Après avoir exécuté le script ci-dessus, la fenêtre de sortie apparaîtra affichant le champ de saisie pour le curseur de plage et le champ de saisie permettant à l'utilisateur de saisir un nombre. Par défaut, sa valeur est fixée à 5. 
Lorsque l'utilisateur essaie de glisser et de saisir un entier dans la zone de saisie, la tâche d'ajout sera déclenchée et une nouvelle valeur sera affichée sur la page Web. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Exécuter le script lorsque l'on clique sur le bouton de réinitialisation du formulaire en HTML ?Article suivant：Exécuter le script lorsque l'on clique sur le bouton de réinitialisation du formulaire en HTML ?

`Articles Liés`

Voir plus