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

10 March 2021 เขียนเมื่อ 2 ปีก่อน โดย Ninenik Narkdee

html5 attribute formaction

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

เราสามารถจัดการที่อยู่ไฟล์ ที่จะรับข้อมูลจาก 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ