ในบทนี้ เราจะกล่าวถึงความแตกต่างของ 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="John"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อคลิกที่ปุ่ม "Submit" ข้อมูลจะถูกส่งไปยังหน้าเพจที่ชื่อว่า "/action_page.php".</p>
</body>
</html>
เมื่อคลิกที่ปุ่ม Submit ระบบจะแสดงข้อความ
Tip: หาก attribute action ได้ถูกละเว้น action จะถูกตั้งให้เป็นหน้าเพจปัจจุบันแทน
Attribute Target
Attribute target จะระบุตำแหน่งที่จะแสดงผลหลังจากที่ได้รับการส่งแบบฟอร์มเรียบร้อยแล้ว ซึ่งค่าของ Attribute target มีค่าต่างๆ ดังนี้
| ค่า | คำอธิบาย |
|---|---|
| _blank | แสดงผลในหน้าต่างใหม่หรือ Tab ใหม่ |
| _self | แสดงผลในหน้าปัจจุบัน |
| _parent | แสดงผลในเฟรมหลัก |
| _top | แสดงผลในส่วนเต็มทั้งหมดของหน้าต่าง |
| framename | แสดงผลใน iframe ที่ได้มีการระบุชื่อไว้ |
ค่าเริ่มต้นจะเป็น _self ซึ่งจะแสดงผลในหน้าปัจจุบัน
ตัวอย่าง เมื่อมีการคลิกที่ปุ่ม Sumitt ระบบจะแสดงผลใน tab ใหม่ของ browser
<!DOCTYPE html>
<html>
<body>
<h2>attribute target ของ form</h2>
<p>เมื่อกดปุ่ม sumit ของ form ระบบจะแสดงผลใน tab ใหม่ของ browser:</p>
<form action="/action_page.php" target="_blank">
<label for="fname">ชื่อ:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><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="John"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อกดปุ่ม Submit สังเกตว่าค่าของแบบฟอร์มจะปรากฏในแถบที่อยู่ของแท็บเบราว์เซอร์ใหม่</p>
</body>
</html>
ผลการแสดงเมื่อคลิกปุ่ม submit
ตัวอย่างการใช้งาน (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="John"><br>
<label for="lname">นามสกุล:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
<p>เมื่อกดปุ่ม Sumit สังเกตว่าไม่เหมือนกับวิธี GET ค่าของแบบฟอร์มจะไม่ปรากฏในแถบที่อยู่ของแท็บเบราว์เซอร์ใหม่</p>
</body>
</html>
ผลการแสดงเมื่อคลิกปุ่ม submit
หมายเหตุการใช้งาน GET:
- GET จะเป็นการรวมข้อมูลของฟอร์มลงใน URL ในรูป name/value pairs
- อย่าใช้ GET เพื่อส่งข้อมูลที่สำคัญ เพราะข้อมูลจะแสดงบน URL!
- ความยาวของ URL จำกัดอยู่ที่ 2048 ตัวอักษร
- GET จะมีประโยชน์อย่างมาก หากผู้ใช้ต้องการเก็บผลการแสดง สามารถเก็บลงใน Bookmark ได้
- GET เหมาะกับข้อมูลที่ไม่สำคัญ อย่างเช่นข้อมูลประเภท String ที่ใช้ในการค้นหาบน Google
หมายเหตุการใช้งาน POST:
- POST จะรวมข้อมูลของฟอร์มลงในส่วน body ที่เป็นคำร้องของ HTTP ข้อมูลฟอร์มที่ส่งไปจะไม่แสดงใน URL
- POST จะไม่จำกัดขนาดของตัวอักษร และสามารถใช้ส่งข้อมูลจำนวนมากได้
- การส่งข้อมูลของฟอร์มด้วย POST จะไม่สามารถเก็บใน Bookmark ได้
Tip: แนะนำให้ใช้ POST หากข้อมูลที่ส่งไปนั้นเป็นข้อมูลที่สำคัญ หรือเป็นข้อมูลส่วนบุคคล
Attribute Autocomplete
Atrribute autocomplete จะเป็นการเติมข้อความในฟอร์มอัตโนมัติ ซึ่งในส่วนนี้สามารถเลือกที่เปิดหรือปิดการใช้งานก็ได้ ซึ่งหากเปิดใช้งาน browser จะทำการเพิ่มข้อความให้อัตโนมัติโดยจะยึดตามค่าที่ผู้ใช้ป้อนไว้ก่อนหน้านี้
ตัวอย่าง
<!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">First name:</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
