รูปแบบการป้อนข้อมูล HTML * คุณสมบัติ
บทนี้อธิบายคุณลักษณะต่างๆ สำหรับ องค์ประกอบform*
HTML<input>
แอตทริบิวต์แบบฟอร์ม
แอตทริบิวต์ อินพุตform
ระบุรูปแบบที่<input>
เป็นขององค์ประกอบ
ค่าของแอตทริบิวต์นี้ต้องเท่ากับแอตทริบิวต์ id ขององค์ประกอบ <form> ที่เป็นของ
ตัวอย่าง
ช่องใส่ที่อยู่นอกแบบฟอร์ม HTML (แต่ยังคงเป็นส่วนหนึ่งของแบบฟอร์ม):
<form action="/action_page.php" id="form1">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last
name:</label>
<input type="text" id="lname"
name="lname" form="form1">
ลักษณะการก่อตัว
แอตทริบิวต์ อินพุตformaction
ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อส่งแบบฟอร์ม
หมายเหตุ:คุณลักษณะนี้จะแทนที่
action
แอตทริบิวต์ของ<form>
องค์ประกอบ
แอตทริบิวต์formaction
ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ตัวอย่าง
แบบฟอร์ม HTML ที่มีปุ่มส่งสองปุ่ม โดยมีการดำเนินการต่างกัน:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
แอตทริบิวต์ formtype
แอตทริบิวต์ อินพุตformenctype
ระบุว่าควรเข้ารหัสข้อมูลแบบฟอร์มอย่างไรเมื่อส่ง (สำหรับแบบฟอร์มที่มีเมธอด = "โพสต์")
หมายเหตุ:คุณลักษณะนี้จะแทนที่แอตทริบิวต์ enctype ของ<form>
องค์ประกอบ
แอตทริบิวต์formenctype
ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม อันแรกส่งข้อมูลฟอร์มด้วยการเข้ารหัสเริ่มต้น อันที่สองส่งข้อมูลฟอร์มที่เข้ารหัสเป็น "หลายส่วน/ฟอร์ม-ข้อมูล":
<form action="/action_page_binary.asp" method="post">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formenctype="multipart/form-data"
value="Submit as
Multipart/form-data">
</form>
รูปแบบวิธีการแอตทริบิวต์
แอตทริบิวต์ อินพุตformmethod
กำหนดวิธี HTTP สำหรับการส่งข้อมูลแบบฟอร์มไปยัง URL การดำเนินการ
หมายเหตุ:คุณลักษณะนี้จะแทนที่แอตทริบิวต์ method ของ<form>
องค์ประกอบ
แอตทริบิวต์formmethod
ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ข้อมูลแบบฟอร์มสามารถส่งเป็นตัวแปร URL (method="get") หรือเป็นธุรกรรม HTTP post (method="post")
หมายเหตุเกี่ยวกับวิธีการ "รับ":
- เมธอดนี้ผนวกข้อมูลรูปแบบเข้ากับ URL ในคู่ชื่อ/ค่า
- วิธีนี้มีประโยชน์สำหรับการส่งแบบฟอร์มที่ผู้ใช้ต้องการคั่นหน้าผลลัพธ์
- มีการจำกัดจำนวนข้อมูลที่คุณสามารถวางใน URL (แตกต่างกันไปในแต่ละเบราว์เซอร์) ดังนั้นคุณจึงไม่สามารถแน่ใจได้ว่าข้อมูลแบบฟอร์มทั้งหมดจะได้รับการถ่ายโอนอย่างถูกต้อง
- อย่าใช้วิธี "รับ" เพื่อส่งต่อข้อมูลที่ละเอียดอ่อน! (รหัสผ่านหรือข้อมูลที่ละเอียดอ่อนอื่น ๆ จะปรากฏในแถบที่อยู่ของเบราว์เซอร์)
หมายเหตุเกี่ยวกับวิธีการ "โพสต์":
- เมธอดนี้ส่งข้อมูลฟอร์มเป็นทรานแซกชันการโพสต์ HTTP
- การส่งแบบฟอร์มด้วยวิธี "โพสต์" ไม่สามารถบุ๊คมาร์คได้
- วิธี "โพสต์" นั้นแข็งแกร่งและปลอดภัยกว่า "รับ" และ "โพสต์" ไม่มีข้อจำกัดด้านขนาด
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม อันดับแรกส่งข้อมูลแบบฟอร์มด้วย method="get" ที่สองส่งข้อมูลแบบฟอร์มด้วย method="post":
<form action="/action_page.php" method="get">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit using
GET">
<input type="submit" formmethod="post" value="Submit using
POST">
</form>
แอตทริบิวต์ formtarget
แอตทริบิวต์ อินพุตformtarget
ระบุชื่อหรือคีย์เวิร์ดที่ระบุตำแหน่งที่จะแสดงคำตอบที่ได้รับหลังจากส่งแบบฟอร์ม
หมายเหตุ:คุณลักษณะนี้จะแทนที่แอตทริบิวต์เป้าหมายของ<form>
องค์ประกอบ
แอตทริบิวต์formtarget
ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่งและรูปภาพ
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม โดยมีหน้าต่างเป้าหมายต่างกัน:
<form action="/action_page.php">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
แอตทริบิวต์ formnovalidate
แอตทริบิวต์ อินพุตformnovalidate
ระบุว่าองค์ประกอบ <input> ไม่ควรตรวจสอบเมื่อส่ง
หมายเหตุ:คุณลักษณะนี้จะแทนที่แอตทริบิวต์ novalidate ของ<form>
องค์ประกอบ
แอตทริบิวต์formnovalidate
ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง
ตัวอย่าง
แบบฟอร์มที่มีปุ่มส่งสองปุ่ม (มีและไม่มีการตรวจสอบ):
<form action="/action_page.php">
<label for="email">Enter your
email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit"
formnovalidate="formnovalidate"
value="Submit without validation">
</form>
คุณสมบัติ novalidate
คุณลักษณะnovalidate
เป็น<form>
คุณลักษณะ
เมื่อมีอยู่แล้ว novalidate ระบุว่าไม่ควรตรวจสอบข้อมูลแบบฟอร์มทั้งหมดเมื่อส่ง
ตัวอย่าง
ระบุว่าไม่ควรตรวจสอบข้อมูลแบบฟอร์มเมื่อส่ง:
<form action="/action_page.php" novalidate>
<label
for="email">Enter your email:</label>
<input type="email"
id="email" name="email"><br><br>
<input type="submit"
value="Submit">
</form>
แบบฟอร์ม HTML และองค์ประกอบอินพุต
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา