HTML <button> ตากแบบ

  • หน้าก่อนหน้า <br>
  • หน้าต่อไป <canvas>

คำนิยามและวิธีใช้

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

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

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

คำแนะนำ：คุณสามารถใช้ CSS ง่ายๆ ที่จะใส่รูปแบบให้ปุ่ม! ดูตัวอย่างหรือเข้าถึง ตัวเรียก CSS ปุ่ม.

รายละเอียด

<button> ตัวควบคุม กับ <input type="button"> มีความสามารถและเนื้อหาที่เพิ่มเติม<button> เทียบกับ </button> ทุกสิ่งที่อยู่ระหว่างตัวเรียกทั้งหมดเป็นสิ่งที่อยู่ในปุ่ม รวมถึงเนื้อหาที่ยอมรับได้ อย่างเช่นข้อความหรือสื่อมัลติมีเดีย ตัวอย่างเช่น สามารถรวมภาพและข้อความที่เกี่ยวข้องกันในปุ่ม เพื่อทำเป็นแสดงการหน้าที่ที่ดึงดูดตา

อนุญาตไม่ให้ใช้สิ่งที่จะหยุดใช้งานเพราะมันสนิทกับการเคลื่อนไหวของเมาส์และหลังข้อมือ ซึ่งอาจทำให้ปุ่มฟอร์มทำงานผิด

เป็นที่ยิ่งใหญ่ว่าต้องกำหนดเป็นปุ่มเดียวๆ ตัวเรียก type. ค่าเริ่มต้นที่ Internet Explorer คือ "button"และในบราวเซอร์อื่นๆ (รวมถึงมาตราฐาน W3C) มีค่าเริ่มต้นคือ "submit".

ดูเพิ่มเติมที่：

คู่มืออ้างอิง HTML DOM：เป้าหมาย Button

ตัวเรียก CSS：ตั้งรูปแบบปุ่ม

ตัวอย่าง

ติดฉันที่เช่นนี้เพื่อทำปุ่มที่สามารถกดได้

<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
 กำหนดการดำเนินการที่จะทำเมื่อปุ่มถูกคลิก
type
  • button
  • reset
  • submit
 กำหนดประเภทปุ่ม
value ข้อความ กำหนดค่าเริ่มต้นของปุ่ม

ตัวแปรทั่วไป

<button> แทรกซ์เกอร์ตัวอย่าง โครงสร้างทั่วไปใน 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>