บทนี้อธิบายความแตกต่างของ form* Attributes สำหรับ <input> Element
form Attribute
Input form Attribute ใช้ระบุรูปแบบ <input> Element
ค่าของ Attribute นี้ต้องเท่ากับ Attribute id ขององค์ประกอบ <form> ที่เป็นเจ้าของ
ตัวอย่าง
ช่องป้อนข้อมูลที่อยู่นอกฟอร์ม HTML (แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม):
<!DOCTYPE html>
<html>
<body>
<h1>Input form Attribute</h1>
<p>Attribute ของแบบฟอร์มระบุรูปแบบที่เป็นขององค์ประกอบอินพุต</p>
<form action="action_page.php" id="form1">
<label for="fname">ชื่อจริง:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="ส่ง">
</form>
<p>ช่อง "นามสกุล" ด้านล่างอยู่นอกองค์ประกอบฟอร์ม แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม</p>
<label for="lname">นามสกุล:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>formaction Attribute
Input formaction Attribute ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อกดส่งแบบฟอร์ม
หมายเหตุ: Attribute นี้แทนที่ action Attribute ของ <form> Element
formaction ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง (Submit) และรูปภาพ
ตัวอย่าง
แบบฟอร์ม HTML ที่มีปุ่มส่ง 2 ปุ่ม โดยมีการทำงานที่ต่างกัน:
<!DOCTYPE html>
<html>
<body>
<h1>Input formaction Attribute</h1>
<p>formaction Attribute ใช้ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อส่งแบบฟอร์ม</p>
<form action="action_page.php">
<label for="fname">ชื่อจริง:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">นามสกุล:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="ส่ง">
<input type="submit" formaction="action_page2.php" value="ส่งแบบแอดมิน">
</form>
</body>
</html>formenctype Attribute
Input formenctype Attribute ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง (สำหรับแบบฟอร์มที่มี method=”post” เท่านั้น)
หมายเหตุ: Attribute นี้แทนที่ enctype Attribute ของ <form> Element
Attribute formenctype ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง (Submit) และรูปภาพ
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม ครั้งแรกส่งข้อมูลแบบฟอร์มด้วยการเข้ารหัสเริ่มต้น ครั้งที่สองส่งข้อมูลแบบฟอร์มที่เข้ารหัสเป็น “multipart/form-data”:
<!DOCTYPE html>
<html>
<body>
<h1>Input formenctype Attribute</h1>
<p>Attribute formenctype ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง</p>
<form action="action_page.php" method="post">
<label for="fname">ชื่อจริง:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="ส่ง">
<input type="submit" formenctype="multipart/form-data" value="ส่งเป็น Multipart/form-data">
</form>
</body>
</html>formmethod Attribute
อินพุต formmethod กำหนดเมธอด HTTP สำหรับการส่งข้อมูลฟอร์มไปยัง URL การดำเนินการ
หมายเหตุ: Attribute นี้แทนที่ method Attribute ของ <form> Element
Attribute formmethod ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง (Submit) และรูปภาพ
ข้อมูลแบบฟอร์มสามารถส่งเป็นตัวแปร URL (method=”get”) หรือเป็น HTTP Post Transaction (method=”post”)
การใช้งาน “get” :
- วิธีการนี้ผนวกข้อมูลแบบฟอร์มเข้ากับ URL ในชื่อ/คู่ค่า
- วิธีนี้มีประโยชน์สำหรับการส่งแบบฟอร์มที่ผู้ใช้ต้องการบุ๊กมาร์กผลลัพธ์
- มีการจำกัดจำนวนข้อมูลที่คุณสามารถวางใน URL ได้ (แตกต่างกันไปตามเบราว์เซอร์) ดังนั้นคุณจึงไม่สามารถมั่นใจได้ว่าข้อมูลในแบบฟอร์มทั้งหมดจะถูกถ่ายโอนอย่างถูกต้อง
- อย่าใช้วิธี “get” เพื่อส่งข้อมูลที่ละเอียดอ่อน! (รหัสผ่านหรือข้อมูลที่ละเอียดอ่อนอื่นๆ เพราะจะมองเห็นได้ในแถบเบราว์เซอร์ Address Bar)
การใช้งาน “post”:
- วิธีนี้ส่งข้อมูลแบบฟอร์มเป็นธุรกรรมหลัง HTTP
- การส่งแบบฟอร์มด้วยวิธี “post” ไม่สามารถบุ๊กมาร์กได้
- วิธีการ “post” นั้นแข็งแกร่งและปลอดภัยกว่า “get” และ “post” ไม่มีข้อจำกัดด้านขนาด
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม โดยมีหน้าต่างเป้าหมายต่างกัน:
<!DOCTYPE html>
<html>
<body>
<h1>Input formmethod Attribute</h1>
<p>formmethod ระบุเมธอด HTTP สำหรับการส่งข้อมูลฟอร์มไปยัง URL</p>
<form action="action_page.php" method="get" target="_blank">
<label for="fname">ชื่อจริง:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">นามสกุล:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="ส่งโดยใช้ Get">
<input type="submit" formmethod="post" value="ส่งโดยใช้ Post">
</form>
</body>
</html>formtarget Attribute
Attribute formtarget ใช้ระบุชื่อหรือคำสำคัญที่ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม
หมายเหตุ: Attribute นี้แทนที่ target Attribute ของ <form> Element
formtarget Attribute ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง (Submit) และรูปภาพ
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม โดยมีหน้าต่างเป้าหมายต่างกัน:
<!DOCTYPE html>
<html>
<body>
<h1>Input formtarget Attribute</h1>
<p>formtarget ระบุชื่อหรือคำสำคัญที่ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม</p>
<form action="action_page.php">
<label for="fname">ชื่อจริง:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">นามสกุล:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="ส่ง">
<input type="submit" formtarget="_blank" value="ส่งไปยังหน้าต่าง/แท็บใหม่">
</form>
</body>
</html>formnovalidate Attribute
Attribute formnovalidate ระบุว่าองค์ประกอบ <input> ไม่ควรตรวจสอบเมื่อส่ง
หมายเหตุ: Attribute นี้แทนที่ novalidate Attribute ของ <form> Element
formnovalidate ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง (Submit)
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม (มีและไม่มีการตรวจสอบ):
<!DOCTYPE html>
<html>
<body>
<h1>Input formnovalidate Attribute</h1>
<form action="action_page.php">
<label for="email">กรอกอีเมลของคุณ:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="ส่ง">
<input type="submit" formnovalidate="formnovalidate" value="ส่งโดยไม่มีการตรวจสอบ">
</form>
<p><strong>สำคัญ:</strong> formnovalidate ไม่รองรับใน Safari 10 (หรือเวอร์ชันก่อนหน้า).</p>
</body>
</html>
novalidate Attribute
novalidate คือ <form> Attribute
novalidate ระบุว่าข้อมูลแบบฟอร์มทั้งหมดไม่ควรถูกตรวจสอบเมื่อส่ง
ตัวอย่าง
ระบุว่าไม่ควรตรวจสอบข้อมูลแบบฟอร์มเมื่อส่ง:
<!DOCTYPE html>
<html>
<body>
<h1>Form novalidate Attribute</h1>
<p>Attribute novalidate ระบุว่าไม่ควรตรวจสอบข้อมูลในแบบฟอร์มเมื่อส่ง</p>
<form action="action_page.php" novalidate>
<label for="email">กรอกอีเมลของคุณ:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="ส่ง">
</form>
<br>
<p><strong>หมายเหตุ:</strong> ไม่รองรับแอตทริบิวต์ novalidate ของแท็กแบบฟอร์มในเว็บเบราว์เซอร์ Safari 10 (หรือเวอร์ชันก่อนหน้า)</p>
</body>
</html>HTML Form and Input Elements
| Tag | คำอธิบาย |
|---|---|
| <form> | ใช้ระบุ HTML Form สำหรับ User Input |
| <input> | ใช้ระบุ Input Control |