ภาษา HTML ช่วงที่ 4

แบบฟอร์ม HTML

ทดลองกดตรงนี้

องค์ประกอบ <form>

องค์ประกอบ HTML <form> กำหนดรูปแบบที่ใช้ในการเก็บรวบรวมข้อมูลของผู้ใช้:


   <form>
   .
   form elements
   .
   </form>

แบบฟอร์ม HTML ประกอบด้วยองค์ประกอบของฟอร์ม

องค์ประกอบของฟอร์มคือองค์ประกอบการป้อนข้อมูลประเภทต่างๆเช่นฟิลด์ข้อความช่องทำเครื่องหมายปุ่มต่างๆปุ่มส่งและอื่น ๆ

อิลิเมนต์ <input>

อิลิเมนต์ <input> คืออิลิเมนต์ฟอร์มที่สำคัญที่สุด

อิลิเมนต์ <input> สามารถแสดงผลได้หลายวิธีขึ้นอยู่กับชนิดแอ็ตทริบิวต์


นี่คือตัวอย่างบางส่วน:

คุณจะได้เรียนรู้เกี่ยวกับประเภทการป้อนข้อมูลในบทแนะนำนี้มากขึ้น

---

ป้อนข้อความ

<input type = "text"> กำหนดช่องป้อนข้อมูลหนึ่งบรรทัดสำหรับการป้อนข้อความ:

ทดลองกดตรงนี้

อินพุตปุ่มวิทยุ

<input type = "radio"> กำหนดปุ่มวิทยุ

ปุ่มวิทยุอนุญาตให้ผู้ใช้เลือกหนึ่งในตัวเลือกที่ จำกัด :

ทดลองกดตรงนี้

ปุ่มส่ง

<input type = "submit"> กำหนดปุ่มสำหรับการส่งข้อมูลแบบฟอร์มไปยังฟอร์มตัวจัดการ

ตัวจัดการฟอร์มโดยทั่วไปคือหน้าเซิร์ฟเวอร์ที่มีสคริปต์สำหรับประมวลผลข้อมูลอินพุต

ตัวจัดการฟอร์มถูกระบุไว้ในแอ็ตทริบิวต์ action ของฟอร์ม:

ทดลองกดตรงนี้

แอ็ตทริบิวต์การดำเนินการ

แอ็ตทริบิวต์ action กำหนดการกระทำที่จะต้องทำเมื่อส่งแบบฟอร์ม

โดยปกติข้อมูลฟอร์มจะถูกส่งไปยังเว็บเพจบนเซิร์ฟเวอร์เมื่อผู้ใช้คลิกปุ่มส่ง

ในตัวอย่างข้างต้นข้อมูลฟอร์มจะถูกส่งไปยังหน้าเว็บบนเซิร์ฟเวอร์ที่เรียกว่า "/action_page.php" หน้านี้มีสคริปต์ฝั่งเซิร์ฟเวอร์ที่จัดการข้อมูลฟอร์ม:

   <form action="/action_page.php">

หากแอ็ตทริบิวต์ action ถูกละเว้นการกระทำจะถูกตั้งค่าเป็นหน้าปัจจุบัน

แอตทริบิวต์วิธี

แอตทริบิวต์ method ระบุเมธอด HTTP (GET หรือ POST) ที่จะใช้เมื่อส่งข้อมูลฟอร์ม:

   <form action="/action_page.php" method="get">

หรือ

   <form action="/action_page.php" method="post">

เมื่อใช้ GET?

วิธีการเริ่มต้นเมื่อส่งข้อมูลแบบฟอร์มคือ GET

อย่างไรก็ตามเมื่อใช้ GET ข้อมูลฟอร์มที่ส่งจะปรากฏในฟิลด์ address address:

   /action_page.php?firstname=Mickey&lastname=Mouse

หมายเหตุ: ห้ามใช้ GET เมื่อส่งข้อมูลที่สำคัญ! GET เหมาะที่สุดสำหรับข้อมูลที่สั้นและไม่ไวต่อข้อมูลเนื่องจากมีข้อ จำกัด ด้านขนาดด้วย

---

เมื่อใช้ POST?

ใช้ข้อมูล POST หากข้อมูลในฟอร์มมีข้อมูลที่ละเอียดอ่อนหรือข้อมูลส่วนบุคคล วิธี POST ไม่แสดงข้อมูลฟอร์มที่ส่งมาในฟิลด์ address address

POST ไม่มีข้อ จำกัด ด้านขนาดและสามารถนำมาใช้เพื่อส่งข้อมูลจำนวนมาก

ชื่อแอ็ตทริบิวต์

ฟิลด์ป้อนข้อมูลแต่ละฟิลด์ต้องมีแอตทริบิวต์ name ที่จะส่ง

หากแอตทริบิวต์ name ถูกละเว้นข้อมูลของฟิลด์อินพุตจะไม่ถูกส่งไปเลย

ตัวอย่างนี้จะส่งเฉพาะฟิลด์ป้อนข้อมูลชื่อ "นามสกุล" เท่านั้น:

ทดลองกดตรงนี้

การจัดกลุ่มข้อมูลฟอร์มด้วย <fieldset>

องค์ประกอบ <fieldset> ถูกใช้เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องในแบบฟอร์ม

องค์ประกอบ <legend> จะกำหนดคำอธิบายเฉพาะสำหรับ <fieldset> องค์ประกอบ

ทดลองกดตรงนี้

นี่คือรายการของ <form> attributes:

---

องค์ประกอบของฟอร์ม HTML

บทนี้จะอธิบายส่วนประกอบของฟอร์ม HTML ทั้งหมด

อิลิเมนต์ <input>
องค์ประกอบฟอร์มที่สำคัญที่สุดคืออิลิเมนต์ <input>

อิลิเมนต์ <input> สามารถแสดงผลได้หลายวิธีขึ้นอยู่กับชนิดแอ็ตทริบิวต์


ทุกประเภทการป้อนข้อมูลต่างๆจะครอบคลุมในบทถัดไป

องค์ประกอบ <select>

องค์ประกอบ <select> กำหนดลิสต์แบบดรอปดาวน์:

ทดลองกดตรงนี้

องค์ประกอบ <option> กำหนดตัวเลือกที่สามารถเลือกได้

รายการแรกในรายการแบบเลื่อนลงจะถูกเลือก

หากต้องการกำหนดตัวเลือกที่เลือกไว้ล่วงหน้าให้เพิ่มแอ็ตทริบิวต์ที่เลือกไปยังตัวเลือก:

ทดลองกดตรงนี้

องค์ประกอบ <textarea>

องค์ประกอบ <textarea> กำหนดฟิลด์ป้อนข้อมูลหลายบรรทัด (พื้นที่ข้อความ):

ทดลองกดตรงนี้

แอตทริบิวต์ rows ระบุจำนวนบรรทัดที่มองเห็นได้ในพื้นที่ข้อความ

แอตทริบิวต์ cols ระบุความกว้างที่มองเห็นได้ของพื้นที่ข้อความ

นี่คือสิ่งที่โค้ด HTML ด้านบนจะแสดงในเบราเซอร์:

ปุ่ม <button>

องค์ประกอบ <button> กำหนดปุ่มที่สามารถคลิกได้:

ทดลองกดตรงนี้

องค์ประกอบของฟอร์ม HTML5

HTML5 เพิ่มองค์ประกอบของฟอร์มต่อไปนี้:

• <datalist>
• <keygen>
• <ส่งออก>

หมายเหตุ: เบราว์เซอร์ไม่แสดงองค์ประกอบที่ไม่รู้จัก องค์ประกอบใหม่ที่ไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าจะไม่ "ทำลาย" หน้าเว็บของคุณ 

---

องค์ประกอบ HTML5 <datalist>

องค์ประกอบ <datalist> ระบุรายการตัวเลือกที่กำหนดไว้ล่วงหน้าสำหรับอิลิเมนต์ <input>

ผู้ใช้จะเห็นรายการแบบหล่นลงของตัวเลือกที่กำหนดไว้ล่วงหน้าตามที่ป้อนข้อมูล

แอตทริบิวต์ list ของอิลิเมนต์ <input> ต้องอ้างอิงกับแอ็ตทริบิวต์ id ของอิลิเมนต์ <datalist>

ทดลองกดตรงนี้

องค์ประกอบ HTML5 <keygen>

วัตถุประสงค์ขององค์ประกอบ <keygen> คือการจัดเตรียมวิธีที่ปลอดภัยในการตรวจสอบผู้ใช้

องค์ประกอบ <keygen> ระบุฟิลด์เครื่องกำเนิดไฟฟ้าคีย์คู่ในแบบฟอร์ม

เมื่อมีการส่งแบบฟอร์มจะมีการสร้างคีย์สองชุดขึ้นมาซึ่งเป็นแบบส่วนตัวและแบบสาธารณะ

คีย์ส่วนตัวจะถูกเก็บไว้ในเครื่องและคีย์สาธารณะจะถูกส่งไปยังเซิร์ฟเวอร์

คีย์สาธารณะสามารถใช้เพื่อสร้างใบรับรองไคลเอ็นต์เพื่อตรวจสอบสิทธิ์ผู้ใช้ในอนาคต

ทดลองกดตรงนี้

องค์ประกอบ HTML5 <output>

องค์ประกอบ <output> แสดงถึงผลลัพธ์ของการคำนวณ (เช่นเดียวกับที่ดำเนินการโดยสคริปต์)

ทดลองกดตรงนี้

ประเภทการป้อนข้อมูล HTML

บทนี้จะอธิบายชนิดอินพุตที่ต่างกันสำหรับอิลิเมนต์ <input>

พิมพ์ข้อความประเภท

<input type = "text"> กำหนดฟิลด์ป้อนข้อความหนึ่งบรรทัด:


ทดลองกดตรงนี้

ใส่รหัสผ่านประเภท

<input type = "password"> กำหนดฟิลด์รหัสผ่าน:


ทดลองกดตรงนี้


อักขระในฟิลด์รหัสผ่านจะถูกสวมหน้ากาก (แสดงเป็นเครื่องหมายดอกจันหรือแวดวง)

ป้อนประเภทส่ง

<input type = "submit"> กำหนดปุ่มสำหรับการส่งข้อมูลแบบฟอร์มไปยังฟอร์มตัวจัดการ

ตัวจัดการฟอร์มโดยทั่วไปคือหน้าเซิร์ฟเวอร์ที่มีสคริปต์สำหรับประมวลผลข้อมูลอินพุต

ตัวจัดการฟอร์มถูกระบุไว้ในแอ็ตทริบิวต์ action ของฟอร์ม:


ทดลองกดตรงนี้


หากคุณข้ามแอตทริบิวต์ค่าปุ่มส่งปุ่มจะได้รับข้อความเริ่มต้น:


ทดลองกดตรงนี้

ประเภทขาเข้ารีเซ็ต

<input type = "reset"> กำหนดปุ่มรีเซ็ตซึ่งจะรีเซ็ตค่ารูปแบบทั้งหมดให้เป็นค่าเริ่มต้น:


ทดลองกดตรงนี้

ประเภทสัญญาณเข้า

<input type = "radio"> กำหนดปุ่มวิทยุ

ปุ่มวิทยุอนุญาตให้ผู้ใช้เลือกเฉพาะหนึ่งในตัวเลือกที่ จำกัด :


ทดลองกดตรงนี้

ช่องทำเครื่องหมายประเภทอินพุต

<input type = "checkbox"> กำหนดช่องทำเครื่องหมาย

ช่องทำเครื่องหมายช่วยให้ผู้ใช้เลือก ZERO หรือ MORE ในตัวเลือกที่ จำกัด


ทดลองกดตรงนี้

ปุ่มประเภทอินพุต

<input type = "button"> กำหนดปุ่ม:


ทดลองกดตรงนี้

ประเภทการป้อนข้อมูล HTML5

HTML5 เพิ่มประเภทการป้อนข้อมูลใหม่ ๆ :

• สี
• วันที่
• วันที่และเวลาท้องถิ่น
• อีเมล
• เดือน
• จำนวน
• พิสัย
• ค้นหา
• โทร
• เวลา
• URL
• สัปดาห์

ประเภทการป้อนข้อมูลใหม่ที่ไม่ได้รับการสนับสนุนจากเว็บเบราเซอร์รุ่นเก่าจะทำหน้าที่เป็น <input type = "text">

---

ประเภทของอินพุต

<input type = "color"> ใช้สำหรับฟิลด์อินพุตที่ควรมีสี

เบราเซอร์สีจะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์


ทดลองกดตรงนี้

ประเภทอินพุต

<input type = "date"> ใช้สำหรับฟิลด์ป้อนข้อมูลที่ควรมีวันที่

ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์


ทดลองกดตรงนี้


นอกจากนี้คุณยังสามารถเพิ่มข้อ จำกัด ในวันที่:


ทดลองกดตรงนี้

ประเภทอินพุต Datetime-local

<input type = "datetime-local"> ระบุฟิลด์ป้อนข้อมูลวันที่และเวลาโดยไม่มีเขตเวลา

ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์


ทดลองกดตรงนี้

ประเภทการป้อนข้อมูลอีเมล

<input type = "email"> ใช้สำหรับฟิลด์ป้อนข้อมูลที่ควรมีอีเมลแอดเดรส

ทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์ที่อยู่อีเมลสามารถตรวจสอบได้โดยอัตโนมัติเมื่อส่ง

มาร์ทโฟนบางประเภทรู้จักประเภทอีเมลและเพิ่ม ". com" ลงในแป้นพิมพ์เพื่อให้ตรงกับการป้อนข้อมูลอีเมล


ทดลองกดตรงนี้

ประเภทการป้อนเดือน

<input type = "month"> อนุญาตให้ผู้ใช้เลือกเดือนและปี

ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์


ทดลองกดตรงนี้

หมายเลขประเภทอินพุต

<input type = "number"> กำหนดฟิลด์ป้อนข้อมูลตัวเลข

นอกจากนี้คุณยังสามารถตั้งค่าข้อ จำกัด เกี่ยวกับตัวเลขที่ยอมรับ

ตัวอย่างต่อไปนี้แสดงฟิลด์ป้อนข้อมูลตัวเลขซึ่งคุณสามารถป้อนค่าตั้งแต่ 1 ถึง 5:


ทดลองกดตรงนี้

ข้อ จำกัด การป้อนข้อมูล

ต่อไปนี้คือรายการข้อ จำกัด การป้อนข้อมูลทั่วไป (บางส่วนมีข้อใหม่ใน HTML5):

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับข้อ จำกัด การป้อนข้อมูลในบทถัดไป

ตัวอย่างต่อไปนี้แสดงฟิลด์ป้อนข้อมูลตัวเลขซึ่งคุณสามารถป้อนค่าตั้งแต่ 0 ถึง 100 ในขั้นตอนที่ 10 ค่าดีฟอลต์คือ 30:

ทดลองกดตรงนี้

ช่วงประเภทอินพุต

<input type = "range"> กำหนดตัวควบคุมสำหรับป้อนหมายเลขที่มีค่าที่แน่นอนไม่สำคัญ (เช่นตัวควบคุมแถบเลื่อน) ช่วงเริ่มต้นคือ 0 ถึง 100 อย่างไรก็ตามคุณสามารถตั้งค่าข้อ จำกัด ว่าจะใช้ตัวเลขใดกับแอตทริบิวต์ min, max และ step:

ทดลองกดตรงนี้

ค้นหาประเภทการป้อนข้อมูล

<input type = "search"> ใช้สำหรับฟิลด์การค้นหา (ช่องค้นหาจะทำงานเหมือนช่องข้อความปกติ)

ทดลองกดตรงนี้

ประเภทอินพุต

<input type = "tel"> ใช้สำหรับฟิลด์ป้อนข้อมูลที่ควรมีหมายเลขโทรศัพท์

ประเภทโทรศัพท์นี้ได้รับการสนับสนุนใน Safari 8 เท่านั้น

ทดลองกดตรงนี้

ประเภทของอินพุต

<input type = "time"> ช่วยให้ผู้ใช้สามารถเลือกเวลา (ไม่มีโซนเวลา)

ตัวเลือกเวลาสามารถแสดงในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์

ทดลองกดตรงนี้

Url ประเภทอินพุต

<input type = "url"> ใช้สำหรับฟิลด์ป้อนข้อมูลที่ควรมีที่อยู่ URL

ฟิลด์ url สามารถตรวจสอบได้โดยอัตโนมัติเมื่อส่งมาทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์

มาร์ทโฟนบางประเภทรู้จักชนิดของ URL และเพิ่ม ". com" ลงในแป้นพิมพ์เพื่อให้ตรงกับการป้อนข้อมูลของ url

ทดลองกดตรงนี้

สัปดาห์ประเภทอินพุต

<input type = "week"> อนุญาตให้ผู้ใช้เลือกสัปดาห์และปี

ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์

ทดลองกดตรงนี้

HTML Input Attributes

ค่าแอตทริบิวต์

แอตทริบิวต์ value ระบุค่าเริ่มต้นสำหรับฟิลด์ป้อนข้อมูล:


ทดลองกดตรงนี้

แอตทริบิวต์อ่านอย่างเดียว

แอตทริบิวต์แบบอ่านอย่างเดียวระบุว่าช่องป้อนข้อมูลเป็นแบบอ่านอย่างเดียว (ไม่สามารถเปลี่ยนแปลงได้):


ทดลองกดตรงนี้

แอตทริบิวต์ที่ถูกปิดใช้งาน

แอตทริบิวต์ที่ถูกปิดใช้ระบุว่าฟิลด์ป้อนข้อมูลถูกปิดใช้งาน

ฟิลด์ป้อนข้อมูลที่ปิดใช้งานใช้งานไม่ได้และไม่สามารถคลิกได้และจะไม่มีการส่งค่าดังกล่าวเมื่อส่งแบบฟอร์ม:


ทดลองกดตรงนี้

ขนาดแอตทริบิวต์

แอตทริบิวต์ size ระบุขนาด (ในอักขระ) สำหรับฟิลด์ป้อนข้อมูล:


ทดลองกดตรงนี้

แอตทริบิวต์ maxlength

แอตทริบิวต์ maxlength ระบุความยาวสูงสุดที่อนุญาตสำหรับฟิลด์ป้อนข้อมูล:


ทดลองกดตรงนี้


ฟิลด์ที่ป้อนข้อมูลจะไม่ยอมรับมากกว่าจำนวนอักขระที่อนุญาต

แอตทริบิวต์ maxlength ไม่ได้ให้ข้อเสนอแนะใด ๆ หากต้องการแจ้งเตือนผู้ใช้คุณต้องเขียนโค้ด JavaScript

หมายเหตุ: ข้อ จำกัด ในการป้อนข้อมูลไม่สามารถเข้าใจผิดได้และ JavaScript มีหลายวิธีในการเพิ่มข้อมูลที่ผิดกฎหมาย เพื่อความปลอดภัยในการป้อนข้อมูลอย่างปลอดภัยจะต้องตรวจสอบโดยผู้รับ (เซิร์ฟเวอร์) เช่นกัน!

---

แอตทริบิวต์ HTML5

HTML5 เพิ่มแอตทริบิวต์ต่อไปนี้สำหรับ <input>:

• การเติมข้อความอัตโนมัติ
• ออโต้โฟกัส
• ฟอร์ม
• formaction
• formenctype
• formmethod
• formnovalidate

• formtarget
• ความสูงและความกว้าง
• รายการ
• นาทีและสูงสุด
• หลายอย่าง
• รูปแบบ (regexp)
• ตัวยึด
• จำเป็นต้องใช้
• ขั้นตอน

และแอตทริบิวต์ต่อไปนี้สำหรับ <form>:

• การเติมข้อความอัตโนมัติ
• novalidate

แอตทริบิวต์การเติมข้อความอัตโนมัติ

แอตทริบิวต์ autocomplete ระบุว่าฟอร์มหรือฟิลด์ป้อนข้อมูลควรจะเปิดหรือปิดการเติมข้อความอัตโนมัติหรือไม่

เมื่อเปิดใช้งานการเติมข้อความอัตโนมัติเบราว์เซอร์จะป้อนค่าที่ป้อนโดยอัตโนมัติตามค่าที่ผู้ใช้ป้อนไว้ก่อนหน้านี้

เคล็ดลับ: สามารถกรอกข้อมูลในแบบ "อัตโนมัติ" สำหรับแบบฟอร์มและ "ปิด" สำหรับช่องป้อนข้อมูลเฉพาะหรือในทางกลับกัน

แอตทริบิวต์ autocomplete ทำงานร่วมกับ <form> และประเภท <input> ต่อไปนี้: ข้อความค้นหา url, tel, email, password, datepickers ช่วงและสี

ทดลองกดตรงนี้

แอตทริบิวต์ novalidate

แอตทริบิวต์ novalidate เป็นแอตทริบิวต์ <form>

เมื่อเป็นปัจจุบัน novalidate ระบุว่าข้อมูลฟอร์มไม่ควรได้รับการตรวจสอบเมื่อส่ง

ทดลองกดตรงนี้

ออโต้โฟกัส

แอตทริบิวต์ออโต้โฟกัสระบุว่าช่องป้อนข้อมูลควรได้รับโฟกัสโดยอัตโนมัติเมื่อโหลดหน้าเว็บ

ทดลองกดตรงนี้

---

แอตทริบิวต์ฟอร์ม

แอตทริบิวต์ form ระบุฟอร์มอย่างน้อยหนึ่งรูปแบบของอิลิเมนต์ <input> ที่เป็นของ

เคล็ดลับ: เมื่อต้องการอ้างถึงมากกว่าหนึ่งรูปแบบให้ใช้รายการรหัสรูปแบบที่คั่นด้วยช่องว่าง

ทดลองกดตรงนี้

Formaction Attribute

แอ็ตทริบิวต์ formaction ระบุ URL ของไฟล์ที่จะประมวลผลตัวควบคุมอินพุตเมื่อส่งฟอร์ม

แอตทริบิวต์ formaction จะแทนที่แอตทริบิวต์ action ของอิลิเมนต์ <form>

แอตทริบิวต์ Formaction ใช้กับ type = "submit" และพิมพ์ = "image"

ทดลองกดตรงนี้

แอตทริบิวต์ formenctype

แอตทริบิวต์ formenctype ระบุว่าข้อมูลฟอร์มควรถูกเข้ารหัสเมื่อส่ง (เฉพาะสำหรับแบบฟอร์มที่มี method = "post")

แอตทริบิวต์ formenctype จะแทนที่แอตทริบิวต์ enctype ของอิลิเมนต์ <form>

แอตทริบิวต์ formenctype ใช้กับ type = "submit" และพิมพ์ = "image"

ทดลองกดตรงนี้

แอตทริบิวต์ formmethod

แอตทริบิวต์ formmethod กำหนดเมธอด HTTP สำหรับการส่งฟอร์มข้อมูลไปยัง URL การทำงาน

แอตทริบิวต์ formmethod จะแทนที่แอตทริบิวต์ method ของอิลิเมนต์ <form>

แอตทริบิวต์ formmethod สามารถใช้กับ type = "submit" และพิมพ์ = "image"

ทดลองกดตรงนี้

แอตทริบิวต์ formnovalidate

แอตทริบิวต์ formnovalidate แทนที่แอตทริบิวต์ novalidate ของอิลิเมนต์ <form>

สามารถใช้แอตทริบิวต์ formnovalidate ได้กับ type = "submit"

ทดลองกดตรงนี้

แอตทริบิวต์ formtarget

แอตทริบิวต์ formtarget ระบุชื่อหรือคำหลักที่ระบุตำแหน่งที่จะแสดงการตอบสนองที่ได้รับหลังจากส่งแบบฟอร์ม

แอตทริบิวต์ formtarget แทนที่แอตทริบิวต์เป้าหมายของอิลิเมนต์ <form>

แอตทริบิวต์ formtarget สามารถใช้ได้กับ type = "submit" และพิมพ์ = "image"

ทดลองกดตรงนี้

ความสูงและความกว้างแอตทริบิวต์

แอตทริบิวต์ความสูงและความกว้างระบุความสูงและความกว้างของ <input type = "image">

ระบุขนาดของภาพเสมอ หากเบราเซอร์ไม่ทราบขนาดหน้าเว็บจะกะพริบขณะโหลดภาพ

ทดลองกดตรงนี้

---

แอตทริบิวต์รายการ

แอ็ตทริบิวต์ list หมายถึงอิลิเมนต์ <datalist> ที่มีอ็อพชันที่กำหนดไว้ล่วงหน้าสำหรับอิลิเมนต์ <input>

ทดลองกดตรงนี้

แอตทริบิวต์ของน้อยสุดและสูงสุด

แอตทริบิวต์ min และ max ระบุค่าต่ำสุดและสูงสุดสำหรับอิลิเมนต์ <input>

แอตทริบิวต์ min และ max ทำงานกับประเภทการป้อนข้อมูลต่อไปนี้: หมายเลขช่วงวันที่ datetime- ท้องถิ่นเดือนเวลาและสัปดาห์

ทดลองกดตรงนี้

แอตทริบิวต์หลายรายการ

แอตทริบิวต์หลายระบุว่าผู้ใช้ได้รับอนุญาตให้ป้อนค่ามากกว่าหนึ่งค่าในอิลิเมนต์ <input>

แอตทริบิวต์หลายตัวทำงานร่วมกับประเภทการป้อนข้อมูลต่อไปนี้: อีเมลและไฟล์

ทดลองกดตรงนี้

แอตทริบิวต์รูปแบบ

แอตทริบิวต์ pattern ระบุนิพจน์ทั่วไปที่มีการตรวจสอบค่าของอิลิเมนต์ <input>

แอตทริบิวต์ pattern ใช้งานได้กับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความค้นหา URL โทรศัพท์อีเมลและรหัสผ่าน

เคล็ดลับ: ใช้แอตทริบิวต์ title ทั่วโลกเพื่ออธิบายรูปแบบที่จะช่วยผู้ใช้

เคล็ดลับ: เรียนรู้เพิ่มเติมเกี่ยวกับนิพจน์ทั่วไปในการสอน JavaScript ของเรา

ทดลองกดตรงนี้

แอตทริบิวต์ตัวยึดตำแหน่ง

แอตทริบิวต์ placeholder ระบุคำแนะนำที่อธิบายค่าที่คาดหวังของฟิลด์ป้อนข้อมูล (ค่าตัวอย่างหรือคำอธิบายสั้น ๆ ของรูปแบบ)

คำแนะนำจะปรากฏในช่องป้อนข้อมูลก่อนที่ผู้ใช้ป้อนค่า

แอตทริบิวต์ placeholder ทำงานร่วมกับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความการค้นหา URL โทรศัพท์อีเมลและรหัสผ่าน

ทดลองกดตรงนี้

แอตทริบิวต์ที่ต้องการ

แอ็ตทริบิวต์ที่ต้องการกำหนดว่าช่องป้อนต้องกรอกข้อมูลก่อนส่งแบบฟอร์ม

แอ็ตทริบิวต์ที่ต้องการทำงานร่วมกับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความการค้นหา URL โทรศัพท์อีเมลรหัสผ่านตัวเก็บรวบรวมข้อมูลวันที่หมายเลขช่องทำเครื่องหมายวิทยุและไฟล์

ทดลองกดตรงนี้

แอตทริบิวต์ขั้นตอน

แอตทริบิวต์ step ระบุช่วงหมายเลขที่ถูกต้องตามกฎหมายสำหรับอิลิเมนต์ <input>

ตัวอย่าง: ถ้าขั้นตอน = "3" หมายเลขตามกฎหมายอาจเป็น -3, 0, 3, 6 ฯลฯ

เคล็ดลับ: คุณสามารถใช้แอตทริบิวต์ step กับแอตทริบิวต์สูงสุดและ min เพื่อสร้างช่วงของค่าทางกฎหมาย

แอตทริบิวต์ step ทำงานร่วมกับประเภทการป้อนข้อมูลต่อไปนี้: หมายเลขช่วงวันที่ datetime-local เดือนเวลาและสัปดาห์

ทดลองกดตรงนี้

---