HTML <button> Tag

  • ຫນ້າທີ່ກ່ອນ <br>
  • ຫນ້າຫນັງ <canvas>

ການນຳໃຊ້ ແລະ ຄວາມຈະໃຊ້

<button> ແບບແຂ່ງມາງມີຄວາມສາມາດລະບຸການລະບຸບັບພິມທີ່ສາມາດກະທຳຄວາມປະຕິບັດໄດ້.

ໃນ <button> ພາຍໃນສິ່ງພິມ ທ່ານສາມາດວາງຂໍ້ຄວາມ (ແລະເປັນສິ່ງຄ້າຍຄື <i>、<b>、<strong>、<br>、<img> ແລະ ອື່ນໆ) . ນີ້ແມ່ນການນຳໃຊ້ <input> ສິ່ງທີ່ປຽບສະເໝີຂອງຄະແນນສ້າງສິ່ງບໍ່ສາມາດເຮັດໄດ້!

ຄຳແນະນຳ:Always specify for <button> element specifies type attributeto inform the browser of what type of button it is.

ຄຳແນະນຳ:You can easily add styles to buttons with CSS! Please see the examples below or visit our CSS Button Tutorial.

Detailed Explanation

<button> Control versus <input type="button"> provides more powerful features and richer content.<button> versus </button> All content between the tags is the content of the button, including any acceptable text content, such as text or multimedia content. For example, we can include an image and related text to create an attractive marking image in the button.

The only forbidden element is the image map because actions sensitive to mouse and keyboard can interfere with the behavior of form buttons.

Always specify for the button type attribute. The default type for Internet Explorer is "button"while in other browsers (including W3C specifications) the default value is "submit".

See also:

HTML DOM Reference Manual:Button Object

CSS Tutorial:ການຕັ້ງກົດຕົວບັນຕາ

ຄວາມຍອດ

ຕົກລົງບັນຕາທີ່ສາມາດກົດດັງໄດ້:

<button type="button">ການກົດດັງຂ້ອຍ!</button>

ທ່ານສວມຕົວການທົດສອບ

ຄຳແນະນຳ:ມີຫຼັກຕົວຢູ່ດ້ານບັນດາຫຼັກຕົວຢູ່ດ້ານບັນດາຫຼັກຕົວ.

ບັນດາລັກສະນະ

ບັນດາລັກສະນະ ຄວາມຜົນ ອະທິບາຍ
autofocus autofocus ກຳນົດວ່າບັນຕາຄວນຈະມີເຫດສະເພາະຄວາມໃກ້ຄວາມຫຼັງຈາກການອ້ອມຫາຂອງສະໜາມ.
disabled disabled ກຳນົດວ່າບັນຕາຄວນຖືກລະງັບ.
form form_id ກຳນົດວ່າບັນຕາປະຕິບັດຈະບັນລາກັບຟອມ.
formaction URL

ກຳນົດວ່າບໍ່ຄວນສົ່ງຂໍ້ມູນຟອມໄປບ່ອນທີ່.

ພຽງແຕ່ສະເພາະ type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

ກຳນົດວ່າບວກມາວິທີການການກະຕຸ້ມຂໍ້ມູນຟອມກ່ອນຈະສົ່ງມາໄກເວີກ.

ພຽງແຕ່ສະເພາະ type="submit".
formmethod
  • get
  • post

ກຳນົດວ່າບວກມາວິທີການສົ່ງຂໍ້ມູນຟອມ (ວິທີ HTTP ທີ່ຈະໃຊ້).

ພຽງແຕ່ສະເພາະ type="submit".
formnovalidate formnovalidate

ກຳນົດວ່າບໍ່ຄວນກວດຄວມຂໍ້ມູນຟອມໃນເວລາການສົ່ງ.

ພຽງແຕ່ສະເພາະ type="submit".
formtarget
  • ຊື່ບັນດາຟອມ

ກຳນົດວ່າສະແດງບ່ອນທີ່ຈະສະແດງຫຼັງຈາກການສົ່ງຟອມ.

ພຽງແຕ່ສະເພາະ type="submit".
name ຊື່ ກຳນົດຊື່ບັນຕາ.
popovertarget element_id ກຳນົດວ່າສັບສິນທີ່ຈະເອິ້ນປະຕິບັດ.
popovertargetaction
  • hide
  • show
  • toggle
 ກໍານົດການດຳເນີນການຂອງ HTML ບຸດຫຼັງຈາກຖືກກົດຂຶ້ນ.
type
  • button
  • reset
  • submit
 ກໍານົດບາງປະເພດບຸດ.
value ຂໍ້ຄວາມ ກໍານົດຄວາມຜູກມັດສະນັບສະນັກງານບຸດ.

ການສະໜັບສະໜູນຂອງ HTML

<button> ຕົວໜຸ່ມກໍານົດ ການສະໜັບສະໜູນຂອງ HTML.

ການສະໜັບສະໜູນຂອງ HTML

<button> ຕົວໜຸ່ມກໍານົດ ການສະໜັບສະໜູນຂອງ HTML.

ການສັບສົນ CSS ຄົນປົກກະຕິ

ບໍ່ມີ.

ຕົວຢ່າງອີກ

ຕົວຢ່າງ 2

ນຳໃຊ້ 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;} /* ສີຂຽວ */
.button2 {background-color: #008CBA;} /* ສີຟ້າ */
</style>
</head>
<body>
<button class="button button1">ສີຂຽວ</button>
<button class="button button2">ສີຟ້າ</button>
</body>
</html>

ທ່ານສວມຕົວການທົດສອບ

ຕົວຢ່າງ 2

ນຳໃຊ້ CSS ທີ່ການສັບສົນບຸດ (ກັບຜົນກະທົບທີ່ຫຼຸດ):

!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">ສີຂຽວ</button>
<button class="button button2">ສີຟ້າ</button>
</body>
</html>

ທ່ານສວມຕົວການທົດສອບ

ການສະໜັບສະໜູນບູໄລ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ
  • ຫນ້າທີ່ກ່ອນ <br>
  • ຫນ້າຫນັງ <canvas>