HTML est utilisé pour fabriquer la structure de la page Web, et les langages de script comme JavaScript sont utilisés pour rendre la page Web plus interactive et dynamique. De plus, HTML offre différents attributs à ses éléments qui aident à coder JavaScript. Par exemple, nous avons besoin de formulaires dans presque toutes les applications pour saisir des informations. Pour soumettre des données de formulaire au serveur, il est nécessaire d'avoir un bouton qui rapportera les informations typées et les envoyer à JavaScript pour un traitement ultérieur.

Ce guide enseignera le HTML ""Avoir une valeur d'attribut"soumettre". Alors, plongeons-nous dans!

Comment ajouter l'attribut de bouton HTML =?

Dans HTML, ajoutez d'abord un nom de classe "ma forme". Ensuite, effectuez les étapes suivantes:

• À l'intérieur du div, ajouter

  Tag pour le titre.

• Ensuite, ajoutez deux zones de texte pour les noms de premier et de famille avec des étiquettes. Le "pour«Attribut du«étiqueter”Tag et le"identifiant«Attribut du«saisir»La balise doit être la même. Cela associera la légende au contrôle d'entrée.
• Ajoutez un bouton avec le "taper«Valeur définie comme«soumettre","valeur" comme "soumettre", et "identifiant" comme "soumettre".
• Après cela, associez le «addData ()”Fonction avec le bouton Soumettre, qui se déclenchera lorsque le bouton est cliqué. Ce formulaire prendra les données de l'utilisateur et les affichera sur la même page.
• Enfin, spécifiez

  Tags où les données soumises doivent être affichées. Ces

  Les balises ont attribué des ID comme «affichage" et "nom d'affichage"Cela sera utilisé dans le fichier JavaScript pour y accéder et effectuer la nouvelle opération.

Html

L'attribut de type "Soumettre"

Prénom:



Nom de famille:



Soumettre

Vous avez soumis le prénom:> __________.

Vous avez soumis le nom de famille:> ___________.

Appliquons quelques styles CSS à la div mentionnée ci-dessus. Ici le ".ma forme»Fait référence au nom de div mentionné dans le fichier html:

• Attribuez le «Couleur de l'arrière plan«Valeur de la propriété comme«# 81B29A".
• "alignement de texte" comme "centre»Aligne le contenu de la div au centre.
• Le "hauteur«La valeur de la propriété est définie comme«300px".
• "taille de police"Est défini comme"grand".

CSS

.myform
Color en arrière-plan: # 81B29A;
Texte-aligne: Centre;
hauteur: 300px;
taille de police: grand;

Note: Nous n'avons pas ajouté le code javascript. En conséquence, le bouton Soumettre ne répondra pas:

Maintenant, passons à coder la fonction javascript qui sera déclenchée sur le bouton cliquer. Pour ce faire, tout d'abord, créez un nouveau fichier ayant une extension comme «.js". Ensuite, définissez une fonction nommée «addData ()". Cette fonction rapportera d'abord la valeur des deux champs d'entrée en y accédant en utilisant leurs ID dans le document.Méthode GetElementById (). Ensuite, affichez la valeur récupérée comme le texte intérieur des étiquettes ajoutées.

Javascrip

fonction adddata ()
var fname = document.getElementByid ("fname").valeur;
var lname = document.getElementByid ("lname").valeur;
document.getElementById ("DisplayFname").innerText = fName;
document.getElementById ("DisplaylName").innerText = lname;

On peut observer qu'après être entré dans le premier et le nom de famille lorsque le «Soumettre«Le bouton est cliqué, les noms sont affichés dans les étiquettes:

Nous avons appris comment fonctionne le bouton de soumission HTML avec une démonstration pratique.

Conclusion

Dans HTML, il y a des centaines d'éléments comme des paragraphes, des champs d'entrée, des boutons et plus. Plus précisément, l'élément de bouton HTML avec la valeur d'attribut "soumettre"Est utilisé pour soumettre les valeurs de données au gestionnaire de formulaire ou pour traiter les valeurs d'entrée. Dans ce guide, nous avons utilisé le bouton Soumettre pour invoquer une fonction JavaScript avec des exemples pratiques.