Création de boutons à l'aide de balises d'entrée HTML dans les formulaires

click fraud protection

Créez des boutons de texte personnalisables dans HTML en utilisant le contribution étiqueter. le contribution élément est utilisé dans un forme élément.

En réglant le attributtaper à "bouton", un simple bouton cliquable génère. Vous pouvez définir le texte qui apparaîtra sur le bouton, tel que « Envoyer », en utilisant le valeur attribut. Par example:


le contribution la balise ne soumettra pas de formulaire HTML; vous devez inclure JavaScript pour gérer la soumission de données de formulaire. Sans JavaScript sur clic événement, le bouton semblera cliquable mais rien ne se passera, et vous aurez frustré vos lecteurs.

L'alternative de balise 'bouton'

Bien qu'utilisant le contribution tag pour créer un bouton fonctionne pour son objectif, c'est une meilleure option pour utiliser le bouton tag pour créer les boutons HTML de votre site Web. le bouton La balise est plus flexible car elle vous permet d'utiliser des images pour le bouton (ce qui vous aide à préserver la cohérence visuelle si votre site a un thème de conception), par exemple, et il peut être défini comme un bouton de type soumettre ou réinitialiser sans avoir besoin de plus JavaScript.

instagram viewer

Spécifiez le bouton taper attribut dans n'importe quel bouton Mots clés. Il en existe trois types différents:

  • bouton:Le bouton n'a pas de comportement inhérent mais est utilisé en conjonction avec des scripts qui s'exécutent côté client qui peuvent être attachés au bouton et exécutés lorsqu'on clique dessus.
  • réinitialiser: Réinitialise toutes les valeurs.
  • nous faire parvenir: Le bouton soumet les données du formulaire au serveur (c'est la valeur par défaut si aucun type n'est défini).

Les autres attributs incluent:

  • Nom: Donne au bouton un nom de référence.
  • valeur: spécifie une valeur à affecter initialement au bouton.
  • désactiver: Désactive le bouton.

Aller plus loin avec les boutons

HTML5 ajoute des attributs supplémentaires au bouton balise qui étend ses fonctionnalités.

  • mise au point automatique: Lors du chargement de la page, cette option spécifie que ce bouton est le focus. Une seule mise au point automatique peut être utilisée sur une page.
  • forme: Associe le bouton à un formulaire spécifique au sein du même document HTML, en utilisant l'identifiant du formulaire comme valeur.
  • action de formation: Utilisé uniquement avec type="soumettre" et une URL comme valeur, il spécifie où les données du formulaire seront envoyées. Souvent, la destination est un script PHP ou quelque chose de similaire,
  • formenctype: Utilisé uniquement avec type="soumettre" attribut. Définit comment les données du formulaire doivent être codées lorsqu'elles sont soumises au serveur. Les trois valeurs sont application/x-www-form-urlencoded (défaut), multipart/form-data, et texte simple.
  • méthode de formulaire: Utilisé uniquement avec type="soumettre" attribut. Ceci spécifie la méthode HTTP à utiliser lors de la soumission des données de formulaire, soit obtenir ou alors Publier.
  • formulairenovalider: Utilisé uniquement avec type="soumettre" attribut. Les données du formulaire ne seront pas validées lors de la soumission.
  • formecible: Utilisé uniquement avec type="soumettre" attribut. Cela indique où la réponse du site doit être affichée lorsque les données du formulaire sont soumises, comme dans une nouvelle fenêtre, etc. Les options de valeur sont soit_blank, _self, _parent, _top, ou un nom de cadre spécifique.

En savoir plus sur faire des boutons dans des formulaires HTML, et comment rendre votre site plus convivial.

instagram story viewer