Boutons en html
Les boutons HTML sont comme n'importe quel autre bouton de l'écran et peuvent effectuer diverses fonctions. Les boutons HTML peuvent être utilisés pour soumettre ou réinitialiser les données du formulaire, pour afficher tout succès ou signe de danger, pour créer un bouton de lien, et ainsi de suite.
Dans HTML, les boutons peuvent être créés en utilisant les éléments et. Cependant, le bouton créé avec l'élément ne traite que des données textuelles tandis que le bouton créé avec l'élément prend en charge le téléchargement d'images, une liste étendue de style d'attributs, et bien plus encore. Cet article fournit un guide détaillé des boutons HTML avec les résultats d'apprentissage suivants.
- Comment créer des boutons HTML
- Boutons HTML avec framework bootstrap
- Boutons html avec w3.Cadre CSS
Comment créer un bouton HTML
Comme discuté précédemment, un bouton HTML peut être créé à l'aide de l'élément. La balise de bouton prend en charge de nombreux attributs qui peuvent être utilisés pour bénéficier de diverses fonctionnalités de la balise de bouton. Comme, il peut passer une fonction ou un script sur son événement en clic. De plus, l'attribut de type spécifie la fonctionnalité du bouton qui serait un bouton de soumission ou un bouton de réinitialisation. Jetons un coup d'œil aux attributs pris en charge par l'élément de bouton HTML.
Le tableau suivant répertorie les attributs pris en charge par la balise de bouton.
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | vrai faux | Le bouton serait concentré sur le chargement de la page |
| désactivé | vrai faux | Le bouton spécifique serait désactivé |
| former | form_id | Cet attribut montre que le bouton est associé à l'une des autres formes |
| foraction | URL | Cet attribut spécifie où les données du formulaire seront envoyées. |
| formetmethod | Obtenir, poster | Spécifie la méthode HTTP pour cette forme spécifique |
| fornovalider | fornovalider | Les données du formulaire ne seront pas validées lors de la soumission |
| cible de formulaire | _blank, _self, _parent, _top, FrameName | Spécifie l'emplacement où la réponse serait affichée |
| nom | nom | Cet attribut spécifie le nom du bouton |
| taper | Réinitialiser, soumettre, bouton | Le type de bouton est spécifié |
| valeur | texte | La valeur initiale du bouton est définie |
| sur clic | scénario | Exécute un script en cliquant sur le bouton |
Passons en pratique ces attributs à l'aide des exemples suivants.
Exemple 1: Boutons Soumettre et réinitialiser
Cet exemple montre la création de boutons HTML avec type = ”soumettre" et type = "réinitialiser" Attributs de la balise. Les valeurs du taper Attribut Affichez que les données seront soumises / reposent en cliquant sur le bouton.
Le code fourni ci-dessous crée des boutons de soumission et de réinitialisation sur la balise de formulaire.
Html
Le code ci-dessus crée un formulaire qui contient deux boutons avec type = ”soumider” et type = ”reset”. L'événement OnClick des deux boutons est exercé et une fonction JavaScript sera exécutée sur chaque bouton.
Javascrip
fonction sub ()alerte ("soumission réussie");
fonction res ()
alert ("réinitialisation des données");
Deux fonctions JS sont créées qui sont censées être appelées en cliquant sur les boutons.
Sortir
À partir de la sortie, il est observé que sur les boutons de soumission et de réinitialisation, une alerte est lancée à chaque clic. De plus, les données sont soumises et réinitialisent également avec succès.
Exemple 2: boutons HTML avec bootstrap
Les boutons HTML peuvent être associés aux propriétés CSS pour les styliser pour une meilleure présentation. Bootstrap est un cadre CSS largement utilisé qui a une classe intégrée pour les boutons. Le code HTML suivant pratique le succès, le danger et la classe de liaison de bootstrap pour ajouter des effets aux boutons.
Pour ajouter des classes bootstrap, vous devez ajouter le lien CDN suivant dans votre document HTML.
Sortir
La sortie montre que le «succès du BTN«La classe a une couleur verte tandis que le«danger btn"La classe a transformé la couleur du bouton en rouge. D'un autre côté, le «btn-link"La classe a créé un bouton de lien.
Exemple 3: boutons HTML avec W3.Cadre CSS
Le W3.Le cadre CSS a été largement utilisé en raison de ses classes intégrées. Le code suivant crée des boutons avec W3.Cours CSS.
Le code ci-dessus pratique les classes W3-Orange, W3 à ronde W3, W3-Border et W3-Hover-Red du W3.Cadre CSS. Ces classes modifient la couleur, la forme, la bordure et ajoutent des effets sur volage aux boutons.
Sortir
Depuis la sortie, il est observé que le premier bouton est arrondi et en couleur orange. Tandis que le deuxième bouton a un effet de survol et d'y déplacer le curseur.
Conclusion
Les boutons HTML peuvent être créés à l'aide de l'élément et de l'élément à l'aide du type = ”soumettre" attribut. Cependant, un bouton créé avec l'élément offre plus de fonctionnalités et de style par rapport au bouton créé par tag. Cet article fournit un guide descriptif pour les boutons HTML. De plus, ce message sert également le style des boutons HTML à l'aide de deux cadres CSS largement utilisés, qui incluent W3.CSS et bootstrap.