Comment définir le style de la balise du bouton HTML ? Introduction au style de balise de bouton HTML-tutoriel HTML-php.cn

Comment définir le style de la balise du bouton HTML ? Introduction au style de balise de bouton HTML

寻∝梦

Libérer： 2018-09-03 17:12:39

original

22243 Les gens l'ont consulté

Cet article présente principalement le paramètre de style des balises de bouton HTML, ainsi que le style d'embellissement des balises de bouton HTML. Ensuite, lisons cet article ensemble

Commençons par présenter les paramètres de style. des balises de bouton en HTML :

Paramètres des boutons ordinaires :

Définissez l'attribut type de l'élément d'entrée sur "bouton". Des boutons normaux peuvent être créés. Le texte affiché sur le bouton est la valeur de l'attribut value. Si aucun attribut value n'est fourni, un bouton vide est simplement créé. Par exemple :

<input type="button" value="立即购买">

Copier après la connexion

Comment définir le style de la balise du bouton HTML ? Introduction au style de balise de bouton HTML

L'effet est évident, il s'agit du paramètre normal par défaut du bouton.

Par défaut, il n'y a pas de réponse lorsque l'on clique sur un bouton normal. Par conséquent, vous devez enregistrer les événements pour les boutons ordinaires et écrire manuellement les fonctions de gestionnaire correspondantes. Si vous souhaitez que le formulaire soit soumis lorsque vous cliquez sur le bouton ci-dessus, vous devez enregistrer l'événement onClick pour le bouton. Par exemple :

<form name="buy" action="form.html" method="post">
    <button onClick="submitForm(buy)">立即购买</button>
</form>

Copier après la connexion

Cliquez maintenant sur le bouton, l'événement onClick sera déclenché et la fonction de traitement d'événement submitForm(buy) sera appelée. Le paramètre buy est la valeur de l'attribut name du formulaire. à traiter. Si vous souhaitez soumettre le formulaire après avoir cliqué sur le bouton, vous pouvez appeler la méthode submit() de l'objet formulaire dans la fonction du gestionnaire d'événements :

function submitForm(f) {
    f.submit();  
}

Copier après la connexion

Il s'agit d'un paramètre de situation par défaut. Voyons maintenant définir le style de la balise du bouton HTML :

Montrons un exemple de code complet :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>

Copier après la connexion

L'effet de ceci est le suivant :

Comment définir le style de la balise du bouton HTML ? Introduction au style de balise de bouton HTML

L'effet de ceci n'est-il pas très évident ? Il semble bien meilleur que celui par défaut. Lorsque nous apprenons js, nous pouvons toujours l'utiliser. La technologie js rend ce bouton par défaut plus beau.

D'accord, ce qui précède concerne les paramètres de style de la balise du bouton html, ainsi qu'un résumé du style d'embellissement (si vous voulez en savoir plus, rendez-vous sur le site Web PHP chinois si vous en avez). questions, vous pouvez poser ci-dessous.

[Recommandation de la rédaction]

Comment faire un menu déroulant html ? Introduction à l'exemple de code du menu déroulant html

Comment faire en sorte que le bouton radio html soit sélectionné par défaut ? Exemple d'utilisation du bouton radio de la balise d'entrée

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!