Tag ng HTML <button>

Pagsasaayos at paggamit

<button> Tag na nagdefinir ng klikable na button.

Sa <button> Sa loob ng elemento, puwedeng ilagay ang teksto (at kahit anong tag sa <i>, <b>, <strong>, <br>, <img> at iba pa). Ito ay ginagamit <input> Ang mga button na hindi pwedeng gawin ng paglikha ng elemento!

paalala:palagian ay tutupangitain ng button. <button> element na tinutukoy type attribute, upang ipaalam sa browser kung anong uri ng button ito.

paalala:Maaari mong madagdagan ang istilo ng button gamit ang CSS! Tingnan ang mga halimbawa sa ibaba o bisitahin ang aming CSS Button Tutorial.

detailed explanation

<button> control kaagapay sa <input type="button"> ay nagbibigay ng mas malakas na mga kalikasan at mas masasarap na nilalaman.<button> kaagapay sa </button> Ang lahat ng nilalaman sa pagitan ng tag ay ang nilalaman ng button, kasama ang anumang katanggap-tanggap na nilalaman, tulad ng teksto o multimedia na nilalaman. Halimbawa, maaari naming isama ang isang imahe at ang kaugnay na teksto, na ginagawa nila ang isang kaakit-akit na marka na imahe sa pindutan.

Ang tanging pinagbawalang elemento ay ang image map, dahil ang mga pagkilos na masensitibo sa mouse at keyboard nito ay maaring magkakasira sa paggamit ng pindutan ng porma.

palagian ay tutupangitain ng button. type attribute. Ang default na uri ng type attribute sa Internet Explorer ay "button", habang ang default na halaga sa iba pang browser (kasama ang W3C规范) ay "submit".

Para sa iba pang pagsasalita:

HTML DOM Reference Manual:Button Object

CSS Tutorial:pagtatakda ng istilo ng pindutan

halimbawa

tanging tulad nito ay markahan ang madaling mag-click na pindutan:

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

Subukan nang personal

paalala:makikita ang mas maraming halimbawa sa pababa ng pahina.

palatandaan

palatandaan halaga paglalarawan
autofocus autofocus tutupangitain na ang pindutan ay dapat makuha ng awtomatikong fokus kapag inilaladlad ang pahina.
disabled disabled tutupangitain na dapat i disable ang pindutan.
form form_id tutupangitain kung saan ang pindutan ay pagka parte ng anong porma.
formaction URL

tutupangitain kung saan dapat ilipat ang datos ng porma kapag isinasubmit.

tanging para sa type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

tutupangitain kung paano maisakop ang datos ng porma bago ito ilipat sa server.

tanging para sa type="submit".
formmethod
  • get
  • post

tutupangitain kung paano ililipat ang datos ng porma (gumagamit ng anong HTTP method).

tanging para sa type="submit".
formnovalidate formnovalidate

tutupangitain na hindi dapat walang pagkakatotohanan ang datos ng porma kapag isinasubmit.

tanging para sa type="submit".
formtarget
  • pangalan ng frame

tutupangitain kung saan dapat ipakita ang tugon pagkatapos isumite ang porma.

tanging para sa type="submit".
name pangalan tutupangitain ang pangalan ng pindutan.
popovertarget element_id tutupangitain ang elemento ng popup na dapat tawagan.
popovertargetaction
  • hide
  • show
  • toggle
 Tutukoy ang operasyon sa popup element kapag iniligtas ang button.
type
  • button
  • reset
  • submit
 Tutukoy ang uri ng button.
value Teksto Tutukoy ang naunang halaga ng button.

Global attributes

<button> Ang tag ay sumusuporta sa HTML global attributes.

Event attributes

<button> Ang tag ay sumusuporta sa HTML event attributes.

Default na CSS setting

Wala.

Higit pang halimbawa

Halimbawa 2

Ginagamit ang CSS upang itakda ang estilo ng button:

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

Subukan nang personal

Halimbawa 2

Ginagamit ang CSS upang itakda ang estilo ng button (may epekto ng hover):

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

Subukan nang personal

Browser na suporta

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持