พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน button Tag

ใน HTML5 แท็ก <button> ใช้สำหรับสร้างปุ่มบนหน้าเว็บ โดยปุ่มนี้สามารถนำไปใช้ในหลากหลายวัตถุประสงค์ เช่น การส่งฟอร์ม การคลิกเพื่อกระทำบางอย่าง หรือการโต้ตอบในแบบต่าง ๆ นอกจากนี้ แท็ก <button> ยังสามารถรองรับเนื้อหาภายในได้ ไม่ว่าจะเป็นข้อความหรือองค์ประกอบ HTML อื่นๆ เช่น รูปภาพ หรือไอคอน

การใช้งานทั่วไปของแท็ก <button>

ปุ่มส่งข้อมูลในฟอร์ม (Submit button) โดยค่าเริ่มต้นของ <button> หากไม่ได้กำหนดค่า type ปุ่มจะทำหน้าที่ส่งข้อมูลฟอร์มเหมือนกับ <input type="submit">

HTML
<form action="/submit" method="post">
  <button>Submit</button>
</form>

ปุ่มรีเซ็ตข้อมูลในฟอร์ม (Reset button) เมื่อกำหนดค่า type="reset" ปุ่มจะทำหน้าที่รีเซ็ตข้อมูลในฟอร์ม

HTML
<form>
  <input type="text" name="username" placeholder="Username">
  <button type="reset">Reset</button>
</form>

ปุ่มธรรมดา (Button) หากกำหนดค่า type="button" จะสร้างปุ่มธรรมดา ไม่มีการส่งฟอร์มหรือกระทำใดๆ โดยสามารถนำไปใช้งานร่วมกับ JavaScript เพื่อกระทำบางอย่าง

HTML
<button type="button" onclick="alert('Button clicked!')">Click Me</button>

ปุ่มที่มีเนื้อหาหลากหลาย ปุ่ม <button> สามารถมีเนื้อหาภายในเป็น HTML อื่นๆ เช่น รูปภาพ หรือไอคอน

HTML
<button type="button">
  <img src="icon.png" alt="Icon" style="width:20px; height:20px;">
  Click Me
</button>

การใช้ <button> ในฟอร์มที่มีหลายปุ่ม เราสามารถมีหลายปุ่มในฟอร์มเดียวกันโดยระบุ type เพื่อให้แต่ละปุ่มมีหน้าที่ต่างกัน

HTML
<form action="/submit" method="post">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" onclick="alert('Just a button')">Do Something</button>
</form>

ประเภทของปุ่ม <button>

type=”submit” ใช้สำหรับการส่งข้อมูลฟอร์มเมื่อกดปุ่ม

HTML
<button type="submit">Submit</button>

type=”reset” ใช้สำหรับรีเซ็ตข้อมูลในฟอร์ม

HTML
<button type="reset">Reset</button>

type=”button” ใช้สำหรับปุ่มธรรมดา ไม่ส่งฟอร์มหรือรีเซ็ต ต้องเขียน JavaScript เพิ่มเพื่อกำหนดการทำงาน

HTML
<button type="button">Do Something</button>

การประยุกต์ใช้งานร่วมกับ CSS และ JavaScript

เราสามารถใช้ CSS ในการปรับแต่งลักษณะของปุ่ม และใช้ JavaScript เพื่อควบคุมการทำงาน เช่น เมื่อปุ่มถูกคลิก

HTML
<style>
  .custom-button {
    background-color: blue;
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
  }
</style>

<button type="button" class="custom-button" onclick="alert('Custom button clicked!')">Click Me</button>

ในตัวอย่างนี้ เราใช้ CSS เพื่อเปลี่ยนสีของปุ่มและปรับแต่งรูปแบบ พร้อมกับเพิ่ม JavaScript เพื่อแสดงการแจ้งเตือนเมื่อคลิก

สรุป

แท็ก <button> ใน HTML5 สามารถนำไปใช้งานได้หลายรูปแบบขึ้นอยู่กับความต้องการ เช่น การส่งฟอร์ม การรีเซ็ตข้อมูล หรือใช้ร่วมกับ JavaScript เพื่อสร้างปุ่มสำหรับการโต้ตอบต่างๆ นอกจากนี้ยังสามารถเพิ่มเนื้อหาภายในปุ่มได้อย่างยืดหยุ่น

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ