การใช้งาน formaction attribute ใน HTML5

เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee
attribute html5 formaction

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ attribute html5 formaction

ดูแล้ว 3,638 ครั้ง


เราสามารถจัดการที่อยู่ไฟล์ ที่จะรับข้อมูลจาก form ผ่านการกำหนด attribute ที่ชื่อว่า
"formaction" ซึ่งจะทำหน้าที่ แทนที่ ค่าที่กำหนดใน action ของ form element ถ้ามีการ
ใช้งาน ดูตัวอย่าง โค้ดอย่างง่ายด้านล่าง
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
	
<!--ข้อมูลในฟอร์ม จะถูกส่งไปประมวลผลที่ไฟล์ post.php	-->
<form action="post.php">
	<input type="text" name="name">	
	<button type="submit">Send</button>
</form>	

<body>
</body>
</html>
 
แต่สมมติว่า เรามีปุ่มส่งข้อมูลอีกปุ่ม อยู่ในฟอร์มเดียยวกัน และไม่ต้องการส่งไปใช้งานที่ไฟล์ post.php 
อยากส่งไปที่ไฟล์ reply.php เราก็สามารถกำหนด formaction attribute และระบุ url หรือไฟล์ที่ต้องการ
ได้ดังนี้
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
	
<!--ข้อมูลในฟอร์ม จะถูกส่งไปประมวลผลที่ไฟล์ post.php	-->
<form action="post.php">
	<input type="text" name="name">	
	<button type="submit">Send</button>
	<button type="submit" formaction="reply.php">Reply</button>
</form>	

<body>
</body>
</html>
 
สำหรับ formaction จะสามารถใช้งานได้ใน HTML5 โดยกำหนดในไฟล์ที่มี <!doctype html>
และการใช้งาน จะใช้ได้กับแท็ก ดังนี้
 
<input type="submit"  formaction="reply.php" value="Reply">
<button type="submit" formaction="reply2.php">Reply</button>
<input type="image" formaction="reply3.php" src="img/button.png" >
 
 
บราวเซอร์สมัยใหม่ปัจจุบันจะรองรับแล้ว


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ