ในบทนี้ เราจะกล่าวถึงความแตกต่างของ Attribute HTML Element <form>
Attribute Action
Attribute action จะใช้กำหนดการกระทำซึ่งจะทำเมื่อมีการส่งแบบฟอร์ม โดยปกติแล้วเมื่อมีการกดปุ่มส่งแบบฟอร์ม ข้อมูลของแบบฟอร์มจะมีการส่งไปยัง Server
จากตัวอย่างด้านล่างนี้ ข้อมูลในแบบฟอร์มจะถูกส่งไปยังไฟล์ที่ชื่อ “action_page.php” ซึ่งไฟล์นี้จะมีสคริปต์ที่ใช้ในการจัดการข้อมูลของแบบฟอร์มในส่วนของ Server ด้วย
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="action_page.php">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อคลิกที่ปุ่ม "Submit" ข้อมูลจะถูกส่งไปยังหน้าเพจที่ชื่อว่า "action_page.php"</p>
</body>
</html>Tip: หาก Attribute action ได้ถูกละเว้น action จะถูกตั้งให้เป็นหน้าเพจปัจจุบันแทน
Attribute Target
Attribute target จะระบุตำแหน่งที่จะแสดงผลหลังจากที่ได้รับการส่งแบบฟอร์มเรียบร้อยแล้ว ซึ่งค่าของ Attribute target มีค่าต่างๆ ดังนี้
| ค่า | คำอธิบาย |
|---|---|
| _blank | แสดงผลในหน้าต่างใหม่หรือ Tab ใหม่ |
| _self | แสดงผลในหน้าปัจจุบัน |
| _parent | แสดงผลในเฟรมหลัก |
| _top | แสดงผลในส่วนเต็มทั้งหมดของหน้าต่าง |
| framename | แสดงผลใน Iframe ที่ได้มีการระบุชื่อไว้ |
ค่าเริ่มต้นจะเป็น _self ซึ่งจะแสดงผลในหน้าปัจจุบัน
ตัวอย่าง เมื่อมีการคลิกที่ปุ่ม Submit ระบบจะแสดงผลใน Tab ใหม่ของเบราว์เซอร์
<!DOCTYPE html>
<html>
<body>
<h2>Attribute target ของ form</h2>
<p>เมื่อกดปุ่ม Submit ของ form ระบบจะแสดงผลใน Tab ใหม่ของเบราว์เซอร์</p>
<form action="action_page.php" target="_blank">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Attribute Method
Attribute method ใช้เพื่อระบุวิธีการของ HTTP หรือ HTTP Method โดยจะใช้เมื่อมีการส่งข้อมูลของฟอร์ม ข้อมูลฟอร์มจะส่งเป็นค่าตัวแปร URL (method=”get”) หรือ HTTP Post Transaction (method=”post”)
โดยปกติแล้ว เมื่อมีการกดส่งข้อมูลของฟอร์ม HTTP Method ค่าเนิ่มต้นจะเป็น GET
ตัวอย่างการใช้งาน (method=”get”)
<!DOCTYPE html>
<html>
<body>
<h2>Attribute method</h2>
<p>แบบฟอร์มนี้จะส่งข้อมูลด้วยวิธีการ GET method</p>
<form action="action_page.php" target="_blank" method="get">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อกดปุ่ม Submit สังเกตว่าค่าของแบบฟอร์มจะปรากฏในแถบที่อยู่ของแท็บเบราว์เซอร์ใหม่</p>
</body>
</html>ตัวอย่างการใช้งาน (method=”post”)
<!DOCTYPE html>
<html>
<body>
<h2>Attribute method</h2>
<p>แบบฟอร์มนี้จะส่งข้อมูลด้วยวิธีการ POST method</p>
<form action="action_page.php" target="_blank" method="post">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="เด่น"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="ดี"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อกดปุ่ม Submit สังเกตว่าไม่เหมือนกับวิธี GET ค่าของแบบฟอร์มจะไม่ปรากฏในแถบที่อยู่ของแท็บเบราว์เซอร์ใหม่</p>
</body>
</html>หมายเหตุการใช้งาน GET:
- GET จะเป็นการรวมข้อมูลของฟอร์มลงใน URL ในรูป name/value
- อย่าใช้ GET เพื่อส่งข้อมูลที่สำคัญ เพราะข้อมูลจะแสดงบน URL!
- ความยาวของ URL จำกัดอยู่ที่ 2048 ตัวอักษร
- GET จะมีประโยชน์อย่างมาก หากผู้ใช้ต้องการเก็บผลการแสดง สามารถเก็บลงใน Bookmark ได้
- GET เหมาะกับข้อมูลที่ไม่สำคัญ อย่างเช่นข้อมูลประเภท String ที่ใช้ในการค้นหาบน Google
หมายเหตุการใช้งาน POST:
- POST จะรวมข้อมูลของฟอร์มลงในส่วน Body ที่เป็นคำร้องของ HTTP ข้อมูลฟอร์มที่ส่งไปจะไม่แสดงใน URL
- POST จะไม่จำกัดขนาดของตัวอักษร และสามารถใช้ส่งข้อมูลจำนวนมากได้
- การส่งข้อมูลของฟอร์มด้วย POST จะไม่สามารถเก็บใน Bookmark ได้
Tip: แนะนำให้ใช้ POST หากข้อมูลที่ส่งไปนั้นเป็นข้อมูลที่สำคัญ หรือเป็นข้อมูลส่วนบุคคล
Attribute Autocomplete
Attribute autocomplete จะเป็นการเติมข้อความในฟอร์มอัตโนมัติ ซึ่งในส่วนนี้สามารถเลือกที่เปิดหรือปิดการใช้งานก็ได้ ซึ่งหากเปิดใช้งานเบราว์เซอร์จะทำการเพิ่มข้อความให้อัตโนมัติโดยจะยึดตามค่าที่ผู้ใช้ป้อนไว้ก่อนหน้านี้
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>Attribute autocomplete</h1>
<p>เมื่อกรอกข้อความและกดส่งแบบฟอร์ม</p>
<p>เมื่อกดโหลดหน้าเพจ และกรอกข้อมูลใหม่อีกครั้ง ระบบจะเติมข้อความให้อัตโนมัติ</p>
<p>จากนั้นลองใหม่อีกครั้งโดนตั้งค่า autocomplete เป็น "off"</p>
<form action="action_page.php" autocomplete="on">
<label for="fname">ชื่อ:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
</body>
</html>Attribute Novalidate
Attribute novalidate เป็น Attribute ประเภท Boolean เมื่อมีการใส่ค่านี้ลงไป นั่นหมายความว่า เมื่อมีการส่งข้อมูลที่ป้อนลงในแบบฟอร์ม จะไม่มีการตรวจสอบข้อมูลที่ป้อนลงในแบบฟอร์ม
<!DOCTYPE html>
<html>
<body>
<h1>Attribute novalidate</h1>
<p>เมื่อมีการส่งข้อมูลของฟอร์ม Attribute novalidate จะใช้ในกรณีที่ไม่ต้องตรวจสอบการป้อนข้อมูล</p>
<form action="action_page.php" novalidate>
<label for="email">อีเมลที่ต้องการใช้:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
<p><strong>หมายเหตุ:</strong> Attribute novalidate จะไม่รองรับการใช้งานบน Safari version 10 ลงไป</p>
</body>
</html>เมื่อมีการกรอกข้อมูลลงใน “อีเมลที่ต้องการใช้” หากใส่ข้อมูลที่ไม่ใช่อีเมล หรือเป็นค่าอื่นๆ ลงไป เมื่อกดปุ่ม Submit ระบบจะไม่มีการตรวจสอบว่าข้อมูลที่ป้อนนั้นถูกต้องหรือไม่ ก็จะยังส่งข้อมูลของแบบฟอร์มได้ โดยไม่เกิด Error