HTML <button> tag

Definition og brug

<button> etiketten definerer en klikbar knap.

i <button> Indeni kan du placere tekst (og som <i>, <b>, <strong>, <br>, <img> osv. tags). Dette bruges til <input> Elementer kan ikke gøre det!

advarsel:angiv altid for <button> elementet specificerer type-attribut, for at informere browseren om, hvilken type knap det er.

advarsel:Du kan nemt tilføje stil til knapper med CSS! Se de nedenstående eksempler eller besøg vores CSS-knap-tutorial.

detaljeret forklaring

<button> kontrol med <input type="button"> tilbyder mere kraftfulde funktioner og mere rigtig indhold.<button> i modsætning til </button> alle indhold mellem mærkerne er knappens indhold, herunder alle akseptable tekstindhold, såsom tekst eller multimedieindhold. For eksempel kan vi inkludere et billede og relateret tekst, for at skabe en tiltrækkende markørimage i knappen.

den eneste element, der er forbudt at bruge, er image map, fordi de handlinger, der er følsomme over for mus og tastatur, kan forstyrre formularknappens opførsel.

angiv altid for knappen type-attribut.Internet Explorers standardtype er "button"mens standardværdien i andre browsere (inklusive W3C-specifikationerne) er "submit".

se også:

HTML DOM referencehåndbog:Button-objekt

CSS-tutorial:Indstil knappens stil

eksempel

markér klikbare knapper på denne måde:

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

try it yourself

advarsel:flere eksempler findes nederst på siden.

egenskab

egenskab værdi beskrivelse
autofocus autofocus angiv at knappen skal få fokus automatisk ved siden af laden af siden.
disabled disabled angiv at knappen skal deaktiveres.
form form_id angiv hvilken formular knappen tilhører.
formaction URL

angiv hvor formulardata skal sendes ved indsendelse.

gælder kun for type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

angiv hvordan formulardata skal kodes, før den sendes til serveren.

gælder kun for type="submit".
formmethod
  • get
  • post

angiv hvordan formulardata skal sendes (brug af hvilken HTTP-metode).

gælder kun for type="submit".
formnovalidate formnovalidate

angiv at formulardata ikke skal valideres ved indsendelse.

gælder kun for type="submit".
formtarget
  • ramme navn

angiv hvor responsen skal vises efter formularindsendelse.

gælder kun for type="submit".
name navn angiv knappens navn.
popovertarget element_id angiv det pop-up vinduelement, der skal kalde.
popovertargetaction
  • hide
  • show
  • toggle
 Specify the operation on the popup element when the button is clicked.
type
  • button
  • reset
  • submit
 Specify the type of the button.
value Text Specify the initial value of the button.

Global attributes

<button> Tags also support Global attributes in HTML.

event attributes

<button> Tags also support Event attributes in HTML.

Default CSS settings

None.

More examples

Example 2

Set button styles using CSS:

<!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;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">green</button>
<button class="button button2">blue</button>
</body>
</html>

try it yourself

Example 2

Set button styles using CSS (with hover effect):

<!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">green</button>
<button class="button button2">blue</button>
</body>
</html>

try it yourself

browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support