แบบฟอร์ม 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>
ทดลองกดตรงนี้
ทดลองกดตรงนี้
อักขระในฟิลด์รหัสผ่านจะถูกสวมหน้ากาก (แสดงเป็นเครื่องหมายดอกจันหรือแวดวง)
ตัวจัดการฟอร์มโดยทั่วไปคือหน้าเซิร์ฟเวอร์ที่มีสคริปต์สำหรับประมวลผลข้อมูลอินพุต
ตัวจัดการฟอร์มถูกระบุไว้ในแอ็ตทริบิวต์ action ของฟอร์ม:
ทดลองกดตรงนี้
หากคุณข้ามแอตทริบิวต์ค่าปุ่มส่งปุ่มจะได้รับข้อความเริ่มต้น:
ทดลองกดตรงนี้
ทดลองกดตรงนี้
ปุ่มวิทยุอนุญาตให้ผู้ใช้เลือกเฉพาะหนึ่งในตัวเลือกที่ จำกัด :
ทดลองกดตรงนี้
ช่องทำเครื่องหมายช่วยให้ผู้ใช้เลือก ZERO หรือ MORE ในตัวเลือกที่ จำกัด
ทดลองกดตรงนี้
ทดลองกดตรงนี้
ประเภทการป้อนข้อมูลใหม่ที่ไม่ได้รับการสนับสนุนจากเว็บเบราเซอร์รุ่นเก่าจะทำหน้าที่เป็น <input type = "text">
เบราเซอร์สีจะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์
ทดลองกดตรงนี้
ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์
ทดลองกดตรงนี้
นอกจากนี้คุณยังสามารถเพิ่มข้อ จำกัด ในวันที่:
ทดลองกดตรงนี้
ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์
ทดลองกดตรงนี้
ทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์ที่อยู่อีเมลสามารถตรวจสอบได้โดยอัตโนมัติเมื่อส่ง
มาร์ทโฟนบางประเภทรู้จักประเภทอีเมลและเพิ่ม ". com" ลงในแป้นพิมพ์เพื่อให้ตรงกับการป้อนข้อมูลอีเมล
ทดลองกดตรงนี้
ตัวเลือกวันที่จะแสดงขึ้นในฟิลด์ป้อนข้อมูลทั้งนี้ขึ้นอยู่กับการสนับสนุนของเบราเซอร์
ทดลองกดตรงนี้
นอกจากนี้คุณยังสามารถตั้งค่าข้อ จำกัด เกี่ยวกับตัวเลขที่ยอมรับ
ตัวอย่างต่อไปนี้แสดงฟิลด์ป้อนข้อมูลตัวเลขซึ่งคุณสามารถป้อนค่าตั้งแต่ 1 ถึง 5:
ทดลองกดตรงนี้
ต่อไปนี้คือรายการข้อ จำกัด การป้อนข้อมูลทั่วไป (บางส่วนมีข้อใหม่ใน HTML5):
พิมพ์ข้อความประเภท
<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 เดือนเวลาและสัปดาห์
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น