ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


HTML <button>แท็ก


ตัวอย่าง

ปุ่มที่คลิกได้จะถูกทำเครื่องหมายดังนี้:

<button type="button">Click Me!</button>

ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง


ความหมายและการใช้งาน

แท็ ก<button>กำหนดปุ่มที่สามารถคลิกได้

ภายใน<button>องค์ประกอบ คุณสามารถใส่ข้อความ (และแท็กเช่น<i>, <b>, <strong>, <br>, <img>, ฯลฯ ) ที่เป็นไปไม่ได้ด้วยปุ่มที่สร้างด้วย<input>องค์ประกอบ!

เคล็ดลับ:ระบุtypeแอตทริบิวต์สำหรับ<button>องค์ประกอบเสมอ เพื่อบอกให้เบราว์เซอร์ทราบว่าปุ่มนั้นเป็นประเภทใด

เคล็ดลับ:คุณสามารถจัดรูปแบบปุ่มต่างๆ ได้อย่างง่ายดายด้วย CSS! ดูตัวอย่างด้านล่างหรือไปที่ บทช่วยสอนCSS Buttons ของเรา


รองรับเบราว์เซอร์

Element
<button> Yes Yes Yes Yes Yes

คุณลักษณะ

Attribute Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id Specifies which form the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
formmethod get
post
Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type="submit"
formtarget _blank
_self
_parent
_top
framename
Specifies where to display the response after submitting the form. Only for type="submit"
name name Specifies a name for the button
type button
reset
submit
Specifies the type of button
value text Specifies an initial value for the button

คุณสมบัติสากล

แท็ ก<button>ยังสนับสนุน Global Attributes ในHTML


คุณสมบัติของเหตุการณ์

แท็ ก<button>ยังสนับสนุนแอตทริบิวต์เหตุการณ์ใน HTML



ตัวอย่างเพิ่มเติม

ตัวอย่าง

ใช้ 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;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>

</body>
</html>

ตัวอย่าง

ใช้ 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">Green</button>
<button class="button button2">Blue</button>

</body>
</html>

หน้าที่เกี่ยวข้อง

การอ้างอิง HTML DOM: ปุ่ม Object

กวดวิชา CSS: ปุ่มจัดแต่งทรงผม


การตั้งค่า CSS เริ่มต้น

ไม่มี.