HTML <button> Tag

Definitie en gebruik

<button> definieert een klikbare knop.

In <button> Binnen het element kunt u tekst plaatsen (en tags zoals <i>, <b>, <strong>, <br>, <img> enz.). Dit is gebruikt om <input> Wat knoppen van elementen niet kunnen doen!

tip:bepaal altijd voor <button> elementen specificeren type-eigenschapom de browser te informeren wat voor soort knop het is

tip:Je kunt eenvoudig stijlen toevoegen aan knoppen met CSS! Bekijk de onderstaande voorbeelden of bezoek onze CSS-knopstijltutorial.

gedetailleerde uitleg

<button> knop <input type="button"> biedt meer krachtige functies en rijkere inhoud<button> in vergelijking met </button> alle inhoud tussen de tags is de inhoud van de knop, waaronder elke aanvaardbare tekstinhoud, zoals tekst of multimediacontent. Bijvoorbeeld, we kunnen een afbeelding en de bijbehorende tekst in de knop opnemen om een aantrekkelijke markering afbeelding in de knop te maken

de enige elementen die niet mogen worden gebruikt zijn afbeeldingskaarten, omdat de acties die ze op de muis en het toetsenbord gevoelig zijn, het gedrag van de formulierknop kunnen verstoren

bepaal altijd voor de knop type-eigenschap. De standaardwaarde van Internet Explorer is "button"en in andere browsers (inclusief de W3C-normen) is de standaardwaarde "submit".

zie ook:

HTML DOM referentiehandleiding:Button-object

CSS-tutorial:knopstijl instellen

voorbeeld

zo wordt een klikbare knop gemarkeerd:

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

Probeer het zelf

tip:meer voorbeelden worden aangeboden aan de onderkant van de pagina

eigenschap

eigenschap waarde beschrijving
autofocus autofocus bepaalt dat de knop automatisch focus moet krijgen bij het laden van de pagina
disabled disabled bepaalt dat de knop moet worden uitgeschakeld
form form_id bepaalt tot welke formulier de knop behoort
formaction URL

bepaalt waar de formuliergegevens moeten worden verzonden bij het indienen van het formulier

alleen van toepassing op type="submit"
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

bepaalt hoe de formuliergegevens moeten worden gecodeerd voordat deze naar de server worden verzonden

alleen van toepassing op type="submit"
formmethod
  • get
  • post

bepaalt hoe de formuliergegevens moeten worden verzonden (welke HTTP-methode wordt gebruikt)

alleen van toepassing op type="submit"
formnovalidate formnovalidate

bepaalt dat het formulier niet moet worden geverifieerd bij het indienen

alleen van toepassing op type="submit"
formtarget
  • kadernaam

bepaalt waar de respons na het indienen van het formulier moet worden weergegeven

alleen van toepassing op type="submit"
name naam bepaalt de naam van de knop
popovertarget element_id bepaalt het element dat moet worden geopend door de pop-up
popovertargetaction
  • hide
  • show
  • toggle
 Stelt de actie van het pop-upvenster bij het klikken op de knop vast.
type
  • button
  • reset
  • submit
 Stelt het type van de knop vast.
value Tekst Stelt de oorspronkelijke waarde van de knop vast.

Globale attributen

<button> De tag ondersteunt ook Globale attributen in HTML.

Evenement-attributen

<button> De tag ondersteunt ook Evenement-attributen in HTML.

Standaard CSS-instellingen

Geen.

Meer voorbeelden

Voorbeeld 2

Gebruik CSS om de knopstijl in te stellen:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  rand: none;
  kleur: wit;
  vulling: 15px 32px;
  tekstuitlijning: center;
  tekstdecoratie: none;
  weergave: inline-block;
  lettergrootte: 16px;
  marge: 4px 2px;
  cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Groen */
.button2 {background-color: #008CBA;} /* Blauw */
</style>
</head>
<body>
<button class="button button1">Groen</button>
<button class="button button2">Blauw</button>
</body>
</html>

Probeer het zelf

Voorbeeld 2

Gebruik CSS om de knopstijl in te stellen (met hover-effect):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  rand: none;
  kleur: wit;
  vulling: 16px 32px;
  tekstuitlijning: center;
  tekstdecoratie: none;
  weergave: inline-block;
  lettergrootte: 16px;
  marge: 4px 2px;
  overgangsduur: 0.4s;
  cursor: pointer;
}
.button1 {
  achtergrondkleur: wit;
  kleur: zwart;
  rand: 2px vast #4CAF50;
}
.button1:hover {
  achtergrondkleur: #4CAF50;
  kleur: wit;
}
.button2 {
  achtergrondkleur: wit;
  kleur: zwart;
  rand: 2px vast #008CBA;
}
.button2:hover {
  achtergrondkleur: #008CBA;
  kleur: wit;
}
</style>
</head>
<body>
<button class="button button1">Groen</button>
<button class="button button2">Blauw</button>
</body>
</html>

Probeer het zelf

Browser ondersteuning

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