ปุ่ม HTML:คำแนะนำทีละขั้นตอน

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

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

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

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

ทบทวนแบบฟอร์ม HTML

HTML แบบฟอร์มใช้เพื่อรวบรวมการป้อนข้อมูลของผู้ใช้ประเภทต่างๆ เช่น ชื่อ หมายเลขโทรศัพท์ หรือที่อยู่ บนหน้าเว็บ

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

<form> tag ใช้สำหรับสร้างฟอร์มใน HTML . นี่เป็นตัวอย่างง่ายๆ ของ <form> แท็กที่ใช้สร้างแบบฟอร์มที่รวบรวมชื่อผู้ใช้:

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

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

ปุ่ม HTML

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

<button> แท็กต้องมีแท็กเริ่มต้นและแท็กสิ้นสุด และควรรวมค่าสำหรับ type คุณลักษณะ. type ตามที่เราจะพูดถึงในภายหลัง จะบอกรูปแบบว่าควรแสดงปุ่มประเภทใด

นี่คือตัวอย่าง HTML <button> แท็กในการดำเนินการ:

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

นี่คือลักษณะที่ปุ่มของเราปรากฏบนหน้าเว็บ:

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

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

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

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

ออโต้โฟกัส

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

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

ปิดการใช้งาน

disabled คุณลักษณะปิดใช้งานปุ่ม ซึ่งหมายความว่าผู้ใช้ไม่สามารถโต้ตอบกับองค์ประกอบ นี่คือไวยากรณ์สำหรับ disabled แอตทริบิวต์:

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

ดังที่คุณเห็นด้านล่าง ปุ่มของเราเป็นสีเทาและไม่สามารถคลิกได้:

แบบฟอร์ม

form แอตทริบิวต์ใช้เพื่อเชื่อมโยงองค์ประกอบปุ่มกับแบบฟอร์ม ค่าของ form แอตทริบิวต์ควรเท่ากับ id ของแบบฟอร์มที่เกี่ยวข้องกับแบบฟอร์ม นี่คือตัวอย่างแอตทริบิวต์ form ที่ลิงก์ปุ่มส่งไปยัง pizza . ของเรา แบบฟอร์ม:

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

form แอตทริบิวต์ได้เชื่อมโยงปุ่มของเรากับแบบฟอร์มที่มีค่ารหัส pizza . ดังนั้น เมื่อเราคลิกปุ่ม แบบฟอร์มของเราที่มีรหัส pizza จะถูกส่ง

การก่อตัว

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

นี่คือตัวอย่าง formaction แอตทริบิวต์ที่ใช้:

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

Formenctype

formenctype คุณลักษณะระบุวิธีการเข้ารหัสข้อมูลแบบฟอร์มเมื่อถูกส่งไปยังเซิร์ฟเวอร์ แอตทริบิวต์นี้ควรใช้เฉพาะเมื่อใช้ “method=’post’ ” ในรูปแบบของคุณ

นี่คือตัวอย่าง formenctype แอตทริบิวต์ที่ใช้ในการส่งข้อความธรรมดาไปยังเซิร์ฟเวอร์เมื่อคลิกปุ่มของเรา:

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

วิธีการ

formaction ใช้เพื่อระบุ HTTP วิธีที่เบราว์เซอร์จะใช้ส่งแบบฟอร์ม แอตทริบิวต์นี้ควรใช้เฉพาะกับ “type=’submit’ ” แอตทริบิวต์.

ทั้งสองค่าที่ยอมรับสำหรับ formmethod แอตทริบิวต์คือ get และ post . หากคุณต้องการดึงข้อมูลหรือเรียกใช้ HTTP GET คุณควรใช้ get; หากคุณต้องการส่งข้อมูลหรือดำเนินการ HTTP POST คุณควรใช้ post .

นี่คือไวยากรณ์สำหรับ formmethod แอตทริบิวต์:

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

ฟอร์มโนวาลิเดต

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

นี่คือตัวอย่าง formnovalidate ในการดำเนินการ:

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

ฟอร์แมตเป้าหมาย

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

นี่คือไวยากรณ์สำหรับ formtarget แอตทริบิวต์:

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

ชื่อ

name แท็ก ใช้เพื่อระบุชื่อของปุ่ม (ซึ่งควรไม่ซ้ำกับชื่อองค์ประกอบแบบฟอร์มอื่นทั้งหมด) และใช้ไวยากรณ์ต่อไปนี้:

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

ประเภท

type tag ระบุประเภทของปุ่ม ปุ่มที่สามารถใช้ได้มีสามประเภท:button , submit และ reset . นี่คือไวยากรณ์สำหรับ type แท็ก:

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

ความคุ้มค่า

value tag ระบุค่าเริ่มต้นของปุ่ม นี่คือไวยากรณ์สำหรับ value แท็ก:

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

บทสรุป

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

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

ตอนนี้คุณพร้อมที่จะสร้างปุ่มโดยใช้ HTML <button> แท็กอย่างผู้เชี่ยวชาญ!