HTML <button> etikett

Definition och användning

<button> etikett definierar en klickbar knapp.

i <button> Inuti elementet kan du placera text (och etiketter som <i>, <b>, <strong>, <br>, <img> och så vidare). Detta används <input> Det som knappen för elementskapandet inte kan göra!

Tips:Se alltid till att specificera <button> element specificerar type-attribut, för att informera webbläsaren om vilken typ av knapp det är.

Tips:Du kan enkelt lägga till stil till knappar med CSS! Se exempel nedan eller besök vår CSS-knappslärobok.

detaljerad beskrivning

<button> kontroll med <input type="button"> erbjuder kraftfullare funktioner och mer innehåll.<button> jämfört med </button> Allt innehåll mellan etiketterna är knappens innehåll, inklusive alla godkända textinnehåll, som text eller multimedieinnehåll. Till exempel kan vi inkludera en bild och relaterad text, för att skapa en attraktiv marknadsföringsbild i knappen.

Den enda element som alltid bör förbjudas är image map, eftersom de känsliga handlingar som mus och tangentbord utför kan större formulärbuttens beteende.

Se alltid till att specificera type-attribut. Standardvärdet för Internet Explorer är "button"medan standardvärdet i andra webbläsare (inklusive W3C-standarden) är "submit".

Se också:

HTML DOM-referenshandbok:Button-objekt

CSS-lärobok:Ställ in knappens stil

Exempel

Markera klickbara knappar på detta sätt:

<button type="button">Klicka mig!</button>

Prova själv

Tips:mera exempel tillhandahålls på sidans botten.

egenskap

egenskap värde beskrivning
autofocus autofocus bestäm att knappen ska få fokus automatiskt när sidan laddas.
disabled disabled bestäm att knappen ska vara inaktiverad.
form form_id bestäm vilket formulär knappen tillhör.
formaction URL

bestäm var formulärdatan ska skickas vid formulärsubmittning.

Gäller endast om type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

bestäm hur formulärdatan ska kódas innan den skickas till servern.

Gäller endast om type="submit".
formmethod
  • get
  • post

bestäm hur formulärdatan ska skickas (vilket HTTP-metod används).

Gäller endast om type="submit".
formnovalidate formnovalidate

bestäm att formulärdatan inte ska valideras vid skickande.

Gäller endast om type="submit".
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • Ramnamn

bestäm var som ska visas som respons efter att formuläret har skickats.

Gäller endast om type="submit".
name Namn bestäm namnet på knappen.
popovertarget element_id bestäm vilken popup-fönsterelement som ska anropas.
popovertargetaction
  • hide
  • show
  • toggle
 Bestämmer vilken åtgärd som utförs på popup-fönstret när knappen klickas.
type
  • button
  • reset
  • submit
 Bestämmer knappens typ.
value Text Bestämmer knappens initiala värde.

Globala egenskaper

<button> Etiketter stöder Globala egenskaper i HTML.

EvenSTANCE egenskaper

<button> Etiketter stöder EvenSTANCE egenskaper i HTML.

Standard CSS-inställningar

Ingen.

Mer exempel

Exempel 2

Använd CSS för att ställa in knappstilar:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Grön */
.button2 {background-color: #008CBA;} /* Blå */
</style>
</head>
<body>
<button class="button button1">Grön</button>
<button class="button button2">Blå</button>
</body>
</html>

Prova själv

Exempel 2

Använd CSS för att ställa in knappstilar (med hover-effekt):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
.button2 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: white;
}
</style>
</head>
<body>
<button class="button button1">Grön</button>
<button class="button button2">Blå</button>
</body>
</html>

Prova själv

Webbläsare stödjer

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd