HTML <button> tagi

Määrittely ja käyttö

<button> Tunniste määrittää klikattavan painikkeen.

Lisää <button> Elementin sisällä voit sijoittaa tekstiä (ja esimerkiksi <i>-, <b>-, <strong>-, <br>-, <img>-tunnisteita). Tämä on <input> Elementin luomisen painikkeella ei voida tehdä!

Vinkki:Varmista aina, että <button> elementti määrittää type-ominaisuus, jotta selaimet tietävät, mikä painike on.

Vinkki:Voit helposti lisätä tyylejä painikkeisiin CSS:n avulla! Katso alla olevat esimerkit tai vieraile CSS-painikeopas.

selitys

<button> yksikko <input type="button"> tarjoaa vahvemmat toiminnot ja monipuolisemman sisällön.<button> verrattuna </button> Kaikki sisältö, joka on sijoitettu välilehdet

Ainoa kielletty elementti on kuvamaapinta, koska se voi häiritä lomakepainikkeen käyttäytymistä, jos se reagoi hiiren ja näppäimistön liikkeisiin.

Varmista aina, että painikkeelle määritellään type-ominaisuus. Internet Explorerin oletustyyppi on "button"mikä on oletusarvo muissa selaimissa (mukaan lukien W3C-standardit), "submit".

Lisäksi:

HTML DOM -viittausopas:Button-objekti

CSS-opas:Aseta painikkeen tyyli

Esimerkki

Merkittävä tällaiset klikattavat painikkeet:

<button type="button">P paina minua!</button>

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alasta.

Ominaisuus

Ominaisuus Arvo Kuvaus
autofocus autofocus Määritellään, että painike tulisi saada fokuksen heti sivun latautumisen jälkeen.
disabled disabled Määritellään, että painike tulisi olla käytöstä poissa.
form form_id Määritellään, mihin lomakkeeseen painike kuuluu.
formaction URL

Määritellään, mihin URL-osoitteeseen lomakkeen tiedot lähetetään.

Vain, jos type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Määritellään, miten lomakkeen tiedot koodataan ennen palvelimelle lähettämistä.

Vain, jos type="submit".
formmethod
  • get
  • post

Määritellään, miten lomakkeen tiedot lähetetään (mikä HTTP-metodi käytetään).

Vain, jos type="submit".
formnovalidate formnovalidate

Määritellään, ettei lomakkeen tietoja tulisi tarkistaa lähettäessä.

Vain, jos type="submit".
formtarget
  • _blank
  • _self
  • _parent
  • _top
    • Kehysnimi

Määritellään, missä tulisi näyttää vastaus, kun lomake lähetetään.

Vain, jos type="submit".
name Nimi Määritellään painikkeen nimi.
popovertarget element_id Määritellään, mikä ponnahdusikkuna-elementti kutsutaan.
popovertargetaction
  • hide
  • show
  • toggle
 Määrittelee, mitä toimenpidettä suoritetaan, kun painiketta painetaan.
type
  • button
  • reset
  • submit
 Määrittelee painikkeen tyypp.
value Teksti Määrittelee painikkeen alkuperäisen arvon.

Globaalit propertyt

<button> Tunniste tukee HTML:n globaalit propertyt.

Tapahtumapropertyt

<button> Tunniste tukee HTML:n tapahtumapropertyt.

Oletusarvoiset CSS-asetukset

Ei mitään.

Lisää esimerkkejä

Esimerkki 2

Aseta painikkeen tyyli CSS:llä:

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

Kokeile itse

Esimerkki 2

Aseta painikkeen tyyli CSS:llä (sillanottava efekti):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  border: none;
  color: valkoinen;
  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: valkoinen;
  color: musta;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: valkoinen;
}
.button2 {
  background-color: valkoinen;
  color: musta;
  border: 2px solid #008CBA;
}
.button2:hover {
  background-color: #008CBA;
  color: valkoinen;
}
</style>
</head>
<body>
<button class="button button1">vihreä</button>
<button class="button button2">sininen</button>
</body>
</html>

Kokeile itse

Selain tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki