บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

รูปแบบการป้อนข้อมูล 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ของ เรา