Tag <button> HTML

Definicja i użycie

<button> etykieta definiuje klikalne przyciski.

w <button> Wewnątrz elementu możesz umieścić tekst (oraz etykiety takie jak <i>, <b>, <strong>, <br>, <img> itp.). To jest używane <input> To, co przyciski tworzenia elementów nie mogą zrobić!

podpowiedź:zawsze określaj dla <button> element określa atrybut type, aby poinformować przeglądarkę, jakiego typu jest przycisk.

podpowiedź:możesz łatwo dodać styl do przycisków za pomocą CSS! Zobacz poniższe przykłady lub odwiedź nasz wykład CSS przycisku.

szczegółowe wyjaśnienie

<button> kontrola z <input type="button"> zapewnia bardziej zaawansowane funkcje i bogatszą zawartość.<button> w porównaniu do </button> wszystkie zawartości między etykietami to zawartość przycisku, w tym dowolne akceptowalne treści, takie jak tekst lub treści multimedialne. Na przykład, możemy umieścić obraz i związany z nim tekst w przycisku, aby stworzyć atrakcyjny znak graficzny w przycisku.

jedynym zabronionym elementem jest obraz mapujący, ponieważ ruchy myszy i klawiatury mogą zakłócać zachowanie przycisków formularza.

zawsze określaj dla przycisku atrybut type.Domyślnym typem w Internet Explorer jest "button", podczas gdy w innych przeglądarkach (w tym w normach W3C) domyślna wartość to "submit".

patrz również:

Przeglądarka HTML DOM:Obiekt Button

wykład CSS:ustawienie stylu przycisku

przykład

oznacza przyciski klikalne w ten sposób:

<button type="button">Kliknij mnie!</button>

Spróbuj sam

podpowiedź:więcej przykładów znajduje się na dole strony

atrybut

atrybut wartość opis
autofocus autofocus określa, że przycisk powinien automatycznie uzyskać fokus przy ładowaniu strony
disabled disabled określa, że przycisk powinien być wyłączony
form form_id określa, do którego formularza należy przycisk
formaction URL

określa, gdzie mają być wysłane dane formularza przy złożeniu

aplikuje się tylko do type="submit"
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

określa, jak mają być kodowane dane formularza przed ich wysłaniem na serwer

aplikuje się tylko do type="submit"
formmethod
  • get
  • post

określa, jak mają być wysyłane dane formularza (którym HTTP method)

aplikuje się tylko do type="submit"
formnovalidate formnovalidate

określa, że dane formularza nie powinny być walidowane przy złożeniu

aplikuje się tylko do type="submit"
formtarget
  • nazwa ramki

określa, gdzie ma się wyświetlić odpowiedź po złożeniu formularza

aplikuje się tylko do type="submit"
name nazwa określa nazwę przycisku
popovertarget element_id określa element okienka wyzwalającego
popovertargetaction
  • hide
  • show
  • toggle
 Określa operację na elemencie okienka modalnego, gdy przycisk jest kliknięty.
type
  • button
  • reset
  • submit
 Określa typ przycisku.
value Tekst Określa wartość początkową przycisku.

Globalne atrybuty

<button> Tagi obsługują Globalne atrybuty w HTML.

Atrybuty zdarzeń

<button> Tagi obsługują Atrybuty zdarzeń w HTML.

Domyślne ustawienia CSS

Brak.

Więcej przykładów

Przykład 2

Użyj CSS do ustawienia stylu przycisku:

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

Spróbuj sam

Przykład 2

Użyj CSS do ustawienia stylu przycisku (z efektem podświetlenia):

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

Spróbuj sam

Przeglądarka obsługuje

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie