บทนี้อธิบายความแตกต่างของ form* attributes สำหรับ <input> element
form Attribute
input form attribute ใช้ระบุรูปแบบ<input> element
ค่าของแอตทริบิวต์นี้ต้องเท่ากับแอตทริบิวต์ id ขององค์ประกอบ <form> ที่เป็นเจ้าของ
ตัวอย่าง
ช่องป้อนข้อมูลที่อยู่นอกฟอร์ม HTML (แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม):
<!DOCTYPE html>
<html>
<body>
<h1>The input form attribute</h1>
<p>แอตทริบิวต์ของแบบฟอร์มระบุรูปแบบที่เป็นขององค์ประกอบอินพุต</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>
The input form attribute
แอตทริบิวต์ของแบบฟอร์มระบุรูปแบบที่เป็นขององค์ประกอบอินพุต
ช่อง “นามสกุล” ด้านล่างอยู่นอกองค์ประกอบฟอร์ม แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม
formaction Attribute
input formaction attribute ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อกดส่งแบบฟอร์ม
หมายเหตุattributeนี้แทนที่ action attributeของ<form> element
formaction ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ตัวอย่าง
แบบฟอร์ม HTML ที่มีปุ่มส่ง 2 ปุ่ม โดยมีการทำงานที่ต่างกัน:
<!DOCTYPE html>
<html>
<body>
<h1>The 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>
The input formaction attribute
formaction attribute ใช้ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อส่งแบบฟอร์ม
formenctype Attribute
input formenctype attribute ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง (สำหรับแบบฟอร์มที่มี method=”post” เท่านั้น)
หมายเหตุ:แอตทริบิวต์นี้แทนที่แอตทริบิวต์ enctype ของ<form> element
แอตทริบิวต์ formenctype ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม ครั้งแรกส่งข้อมูลแบบฟอร์มด้วยการเข้ารหัสเริ่มต้น ครั้งที่สองส่งข้อมูลแบบฟอร์มที่เข้ารหัสเป็น “multipart/form-data”:
<!DOCTYPE html>
<html>
<body>
<h1>The input formenctype attribute</h1>
<p>แอตทริบิวต์ formenctype ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง</p>
<form action="/action_page_binary.asp" 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>
The input formenctype attribute
แอตทริบิวต์ formenctype ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง
formmethod Attribute
อินพุต formmethod กำหนดเมธอด HTTP สำหรับการส่งข้อมูลฟอร์มไปยัง URL การดำเนินการ
หมายเหตุ:แอตทริบิวต์นี้แทนที่แอตทริบิวต์เมธอดของ <form> element
formmethod แอตทริบิวต์ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ข้อมูลแบบฟอร์มสามารถส่งเป็นตัวแปร URL (method=”get”) หรือเป็น HTTP post transaction (method=”post”)
การใช้งาน “get” :
- วิธีการนี้ผนวกข้อมูลแบบฟอร์มเข้ากับ URL ในชื่อ/คู่ค่า
- วิธีนี้มีประโยชน์สำหรับการส่งแบบฟอร์มที่ผู้ใช้ต้องการบุ๊กมาร์กผลลัพธ์
- มีการจำกัดจำนวนข้อมูลที่คุณสามารถวางใน URL ได้ (แตกต่างกันไปตามเบราว์เซอร์) ดังนั้นคุณจึงไม่สามารถมั่นใจได้ว่าข้อมูลในแบบฟอร์มทั้งหมดจะถูกถ่ายโอนอย่างถูกต้อง
- อย่าใช้วิธี “get” เพื่อส่งข้อมูลที่ละเอียดอ่อน! (รหัสผ่านหรือข้อมูลที่ละเอียดอ่อนอื่นๆ เพราะจะมองเห็นได้ในแถบ browser address bar)
การใช้งาน “post”:
- วิธีนี้ส่งข้อมูลแบบฟอร์มเป็นธุรกรรมหลัง HTTP
- การส่งแบบฟอร์มด้วยวิธี “post” ไม่สามารถบุ๊กมาร์กได้
- วิธีการ “post” นั้นแข็งแกร่งและปลอดภัยกว่า “get” และ “post” ไม่มีข้อจำกัดด้านขนาด
formtarget Attribute
อินพุต formtarget ใช้ระบุชื่อหรือคำสำคัญที่ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม
หมายเหตุ: แอตทริบิวต์นี้แทนที่ target แอตทริบิวต์ของ <form> element.
formtarget attribute ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม โดยมีหน้าต่างเป้าหมายต่างกัน:
<!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>
input formtarget attribute
formtarget ระบุชื่อหรือคำสำคัญที่ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม
formnovalidate Attribute
formnovalidate แอตทริบิวต์ระบุว่าองค์ประกอบ <input> ไม่ควรตรวจสอบเมื่อส่ง
หมายเหตุ:แอตทริบิวต์นี้แทนที่แอตทริบิวต์ novalidate ของ<form> element
formnovalidateทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม (มีและไม่มีการตรวจสอบ):
<!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>
input formnovalidate attribute
สำคัญ: formnovalidate ไม่รองรับใน Safari 10 (หรือเวอร์ชันก่อนหน้า).
novalidate Attribute
novalidateคือ<form>
แอตทริบิวต์
novalidate ระบุว่าข้อมูลแบบฟอร์มทั้งหมดไม่ควรถูกตรวจสอบเมื่อส่ง
ตัวอย่าง
ระบุว่าไม่ควรตรวจสอบข้อมูลแบบฟอร์มเมื่อส่ง:
<!DOCTYPE html>
<html>
<body>
<h1>form novalidate attribute</h1>
<br>
<p>แอตทริบิวต์ novalidate ระบุว่าไม่ควรตรวจสอบข้อมูลในแบบฟอร์มเมื่อส่ง</p>
<br>
<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>
form novalidate attribute
แอตทริบิวต์ novalidate ระบุว่าไม่ควรตรวจสอบข้อมูลในแบบฟอร์มเมื่อส่ง
หมายเหตุ: ไม่รองรับแอตทริบิวต์ novalidate ของแท็กแบบฟอร์มในเว็บเบราว์เซอร์ Safari 10 (หรือเวอร์ชันก่อนหน้า)
HTML Form and Input Elements
Tag | คำอธิบาย |
---|---|
<form> | ใช้ระบุ HTML form สำหรับ user input |
<input> | ใช้ระบุ input control |