ปุ่มใน HTML: คู่มือขั้นตอนต่อขั้นตอน

แท็กปุ่ม HTML ใช้สร้างปุ่มคลิกได้ภายในฟอร์ม HTML ให้ผู้ใช้ส่งข้อมูลฟอร์มไปยังเว็บไซต์ สไตล์ปุ่มควบคุมได้ด้วย CSS

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

นี่คือที่มาของแท็ก HTML <button> ใช้สร้างปุ่มคลิกได้ในฟอร์ม HTML และเปิดโอกาสให้ผู้ใช้ส่งข้อมูล

บทช่วยสอนนี้จะอธิบายการใช้แท็ก <button> ใน HTML แอตทริบิวต์สำหรับปรับแต่งปุ่ม และตัวอย่างการใช้งาน

บทนำฟอร์ม HTML

HTML Forms ใช้รวบรวมข้อมูลผู้ใช้ เช่น ชื่อ, เบอร์โทร, ที่อยู่ ในหน้าเว็บ

แต่ละฟอร์มมีอินพุตเอลิเมนต์ให้ผู้ใช้ส่งข้อมูล เช่น ฟอร์มสั่งซื้ออาจมีช่องชื่อ, วันเกิด, บัตรเครดิต ฯลฯ

แท็ก <form> สร้างฟอร์มใน HTML ตัวอย่างง่าย รับชื่อผู้ใช้:

<form> Name: <input type="text"> </form>

แท็ก <form> อาจมีหลาย <input> หรือองค์ประกอบอื่น เช่น select box นอกจากนี้ ฟอร์มต้องมีแท็ก <button> ซึ่งเมื่อคลิกจะส่งข้อมูลผู้ใช้ไปยังเว็บไซต์

ปุ่ม HTML

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

แท็ก <button> ต้องมีแท็กเปิดและปิด และควรมีค่าแอตทริบิวต์ type แอตทริบิวต์ type บอกฟอร์มว่าจะแสดงปุ่มประเภทไหน

ตัวอย่าง HTML <button>:

<button type="submit" value="Sign Up">Sign Up</button>

ปุ่มแสดงในหน้าเว็บดังนี้:

ตอนนี้มีปุ่มในหน้าเว็บ ผู้ใช้สามารถส่งข้อมูลที่กรอกในฟอร์มได้

แท็ก <button> รองรับในเบราว์เซอร์หลักทั้งหมด ใช้ได้โดยไม่กังวลความเข้ากันได้ แต่ควรทราบว่าเบราว์เซอร์ต่างๆ ตีความ <button> ต่างกัน เช่น Internet Explorer ก่อน v9 จะส่งข้อความระหว่างแท็กเปิด/ปิด ในขณะที่เบราว์เซอร์อื่นส่งค่าแอตทริบิวต์ value

แอตทริบิวต์แท็กปุ่ม HTML

แท็ก HTML <button> มีแอตทริบิวต์หลายตัวสำหรับปรับแต่งปุ่ม รวมถึงรองรับ global attributes ใน HTML5 มาสำรวจแอตทริบิวต์หลักกัน

Autofocus

autofocus ระบุให้ปุ่มได้รับโฟกัสอัตโนมัติเมื่อโหลดหน้าเว็บ ไวยากรณ์:

<button type="submit" autofocus>Test Button!</button>

Disabled

disabled ปิดใช้งานปุ่ม ผู้ใช้โต้ตอบไม่ได้ ไวยากรณ์:

<button type="submit" disabled>Test Button!</button>

ปุ่มจะมืดและคลิกไม่ได้:

Form

form ลิงก์ปุ่มกับฟอร์ม ค่าเท่ากับ id ของฟอร์มที่เกี่ยวข้อง ตัวอย่างลิงก์ปุ่มส่งกับฟอร์ม pizza:

<form id="pizza"> Flavor: <input type="text" name="flavor"> </form> <button type="submit" form="pizza">Submit Order</button>

แอตทริบิวต์ form ลิงก์ปุ่มกับฟอร์ม id pizza คลิกปุ่มจะส่งฟอร์ม id pizza

Formaction

formaction ระบุ URL โปรแกรมประมวลผลข้อมูลที่ปุ่มส่ง ใช้ได้ก็ต่อเมื่อ type ของปุ่มเป็น submit ตัวอย่าง:

<button type="submit" formaction="https://www.ourpizzawebsite.com/submitOrder.php">Submit Order</button>

Formenctype

formenctype ระบุการเข้ารหัสข้อมูลฟอร์มเมื่อส่งไปเซิร์ฟเวอร์ ใช้ได้ก็ต่อเมื่อฟอร์มมี method='post' ตัวอย่างส่งข้อความธรรมดา:

<button type="submit" formenctype="text/plain">Submit Order</button>

Formmethod

formmethod ระบุ HTTP method ที่เบราว์เซอร์ใช้ส่งฟอร์ม ใช้ได้กับ type='submit' ค่าที่ยอมรับ: get และ post ใช้ get สำหรับดึงข้อมูล/HTTP GET, post สำหรับส่งข้อมูล/HTTP POST ไวยากรณ์:

<button type="submit" formmethod="post">Submit Order</button>

Formnovalidate

formnovalidate ระบุว่าไม่ต้องตรวจสอบความถูกต้องของข้อมูลฟอร์มเมื่อส่ง เช่น ต้องการรับข้อมูลแม้ผู้ใช้กรอกไม่ครบ ใช้ formnovalidate ตัวอย่าง:

<button type="submit" formnovalidate>Submit Order</button>

Formtarget

formtarget กำหนดเป้าหมายสำหรับการตอบกลับจากเซิร์ฟเวอร์หลังส่งฟอร์ม ค่าที่ยอมรับ: _blank, _self, _parent, _top, หรือชื่อเฟรม ไวยากรณ์:

<button formtarget="_blank">Submit Order</button>

Name

name ระบุชื่อปุ่ม (ต้องไม่ซ้ำกับองค์ประกอบฟอร์มอื่น) ไวยากรณ์:

<button name="submit_order">Submit Order</button>

Type

type ระบุประเภทปุ่ม มี 3 ประเภท: button, submit, reset ไวยากรณ์:

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

Value

value ระบุค่าเริ่มต้นของปุ่ม ไวยากรณ์:

<button type="submit" value="Submit Order">Submit Order</button>

สรุป

แท็ก <button> สร้างปุ่มคลิกได้ในฟอร์ม HTML เช่น ฟอร์มสั่งพิซซ่า ต้องมี <button> ให้ผู้ใช้ส่งข้อมูลออเดอร์เมื่อพร้อม

บทช่วยสอนนี้สำรวจการใช้ <button> ใน HTML อธิบายแอตทริบิวต์หลักสำหรับปรับแต่งปุ่ม และตัวอย่างการใช้งาน ตอนนี้คุณพร้อมสร้างปุ่มด้วยแท็ก HTML <button> อย่างมืออาชีพแล้ว!