home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

การเรียนรู้แอตทริบิวต์การดำเนินการของแบบฟอร์ม HTML:คำแนะนำทีละขั้นตอน

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

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

คุณควรรู้พื้นฐานของการสร้างแบบฟอร์มใน HTML โดยทั่วไปคุณห่อเนื้อหาแบบฟอร์มของคุณในองค์ประกอบ

ในแท็กเปิด มีแอตทริบิวต์สองสามรายการที่เราสามารถใช้ได้ และหนึ่งในนั้นคือการกระทำ

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

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

ลองมาดูที่ไวยากรณ์ของแอตทริบิวต์การกระทำ:

<form action="/submit.php">
 
</form>

คุณลักษณะ action ปรากฏขึ้นระหว่างแท็กเปิด ของเรา แอ็ตทริบิวต์นี้มักใช้กับแอ็ตทริบิวต์ method

ตามค่าเริ่มต้น คุณลักษณะ method จะถูกตั้งค่าเป็น "get" ซึ่งหมายความว่าแบบฟอร์มของคุณจะส่งข้อมูลผ่านคำขอ HTTP GET เมื่อมีการส่ง คุณสามารถเปลี่ยนวิธีการได้โดยการระบุ “method=’post'” ในแท็กเปิด ของคุณ

ข้อมูลจากแบบฟอร์มจะถูกส่งไปยัง URL “การกระทำ” เมื่อมีการคลิกปุ่มส่ง

ตัวอย่าง HTML การกระทำของแบบฟอร์ม

ลองมาดูตัวอย่าง:

<form action="process.html" method="get">
 <label for="username">User</label>
 <input type="text" id="username" name="username"><br><br>
 <label for="email">Email</label>
 <input type="email" id="email" name="email"><br><br>
 <input type="submit" value="Submit">
</form>

ด้านบน การดำเนินการคือการส่งข้อมูลชื่อผู้ใช้และข้อมูลอีเมลไปยังเพจชื่อ process.html ข้อมูลชื่อผู้ใช้และอีเมลมีประเภทการป้อนข้อมูล "ข้อความ" เรากำหนดปุ่มด้วยประเภทอินพุต "ส่ง" เมื่อคลิกแล้ว ปุ่มนี้จะส่งข้อมูลของเราไปยัง URL “การดำเนินการ” ของเรา

ตอนนี้เสียบตัวอย่างแบบฟอร์มด้านบนในไฟล์ HTML จริง จากนั้นสร้างไฟล์อื่นชื่อ process.html ในโฟลเดอร์เดียวกัน ไฟล์นี้ควรมีเนื้อหาดังต่อไปนี้:

<html>
 <head>
 <meta charset="UTF-8">
 <title>Process</title>
 </head>
 <body>This is the destination process page</body>
</html>

รหัสนี้กำหนดหน้าเว็บธรรมดาที่แสดงย่อหน้าของข้อความเมื่อมีการโหลดหน้าเว็บ กลับไปที่แบบฟอร์มบนเว็บที่เรากำหนดไว้ก่อนหน้านี้แล้วกรอกข้อมูล:

การเรียนรู้แอตทริบิวต์การดำเนินการของแบบฟอร์ม HTML:คำแนะนำทีละขั้นตอน

ตอนนี้คลิกส่ง สังเกตว่าเราถูกนำไปที่หน้า process.html โดยอัตโนมัติ! ถ้าอย่างนั้น คุณสังเกตเห็นแถบ URL แล้วข้อมูลพิเศษทั้งหมดนั้นคืออะไร? ข้อมูลหลังเครื่องหมาย “?” สัญลักษณ์คือพารามิเตอร์การสืบค้น และเนื่องจากเราระบุคำขอเป็น GET ข้อมูลจึงถูกส่งผ่านเป็นพารามิเตอร์การสืบค้น

การเรียนรู้แอตทริบิวต์การดำเนินการของแบบฟอร์ม HTML:คำแนะนำทีละขั้นตอน

จากตัวอย่างนี้ คุณอาจคิดว่าสิ่งนี้ไม่มีประโยชน์มากนัก นั่นเป็นเรื่องจริง โดยปกติแล้วแอ็ตทริบิวต์ action จะใช้ในการส่งเนื้อหาแบบฟอร์มไปยังเพจเซิร์ฟเวอร์ ตัวอย่างเช่น เราอาจใช้ไฟล์ PHP ชื่อ process.php

process.php นี้จะทำสิ่งมหัศจรรย์ทั้งหมดด้วยข้อมูล หน้านี้สามารถบันทึกข้อมูลของเราลงในฐานข้อมูลหรือลงทะเบียนให้คุณเข้าร่วมกิจกรรมที่คุณชื่นชอบก็ได้ PHP เป็นภาษาสคริปต์เซิร์ฟเวอร์ที่ทรงพลัง ซึ่งมักใช้ในการพัฒนาเว็บ หากคุณเคยใช้ WordPress ข้อมูลที่กำลังประมวลผลอาจดำเนินการผ่าน PHP

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ PHP โปรดดูคู่มือวิธีเรียนรู้ PHP ของเรา

จำเป็นต้องมีแอตทริบิวต์การดำเนินการหรือไม่

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

ทำไมเราถึงทำเช่นนี้? ด้วยการกำเนิดของแอปพลิเคชันหน้าเดียว (SPA) เราอาจต้องการประมวลผลข้อมูลแบบฟอร์มของเราโดยใช้ JavaScript หรือเราอาจต้องการประมวลผลข้อมูลของเราโดยใช้เฟรมเวิร์กอื่น เช่น React / Angular

หากเราใช้ Vanilla JavaScript เรามักจะทำเช่นนี้โดยเพิ่มตัวฟังเหตุการณ์ JavaScript เมื่อมีการส่งแบบฟอร์ม

บทสรุป

คุณลักษณะการกระทำของแบบฟอร์ม HTML กำหนดสิ่งที่เกิดขึ้นกับเนื้อหาของแบบฟอร์มเมื่อส่งแบบฟอร์ม คุณลักษณะการกระทำยอมรับ URL เป็นอาร์กิวเมนต์

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