แอตทริบิวต์แบบฟอร์มโดยละเอียด

แอตทริบิวต์ขององค์ประกอบ HTML ช่วยเพิ่มประสิทธิภาพให้กับ <form> และการควบคุมแบบฟอร์มได้

ช่วยให้ผู้ใช้กรอกข้อมูลในการควบคุมแบบฟอร์ม

ให้ใช้แอตทริบิวต์ type ที่เหมาะสมสำหรับองค์ประกอบ <input> ของคุณเพื่อให้ผู้ใช้กรอกแบบฟอร์มได้ง่ายขึ้น

เบราว์เซอร์จะแสดงอินเทอร์เฟซผู้ใช้ที่เหมาะสำหรับ type เช่น เครื่องมือเลือกวันที่สำหรับ <input> ประเภท date เบราว์เซอร์ในอุปกรณ์เคลื่อนที่จะแสดงแป้นพิมพ์บนหน้าจอที่ปรับเปลี่ยน เช่น ปุ่มกดหมายเลขโทรศัพท์สำหรับ type="tel"

<input> บางประเภทยังเปลี่ยนกฎการตรวจสอบขององค์ประกอบเมื่อส่งแบบฟอร์มด้วย ตัวอย่างเช่น <input type="url"> จะใช้ได้เฉพาะในกรณีที่ไม่ว่างเปล่าและค่าเป็น URL

ตรวจสอบว่าผู้ใช้ป้อนข้อมูล

การระบุแป้นพิมพ์บนหน้าจอที่เหมาะสมในอุปกรณ์แบบสัมผัสมีแอตทริบิวต์ที่แตกต่างกัน ตัวเลือกแรกคือการใช้แอตทริบิวต์ type ตามที่กล่าวไว้ข้างต้น

อีกตัวเลือกหนึ่งคือแอตทริบิวต์ inputmode ที่ Android และ iOS รองรับ แอตทริบิวต์ inputmode แตกต่างจากแอตทริบิวต์ type ตรงที่จะเปลี่ยนเฉพาะแป้นพิมพ์บนหน้าจอ ไม่ได้เปลี่ยนลักษณะการทำงานขององค์ประกอบนั้น การใช้ inputmode เป็นตัวเลือกที่ดีในกรณีที่คุณต้องการรักษาอินเทอร์เฟซผู้ใช้เริ่มต้นและกฎการตรวจสอบเริ่มต้นของ <input> แต่ต้องการแป้นพิมพ์บนหน้าจอที่เพิ่มประสิทธิภาพแล้ว

ภาพหน้าจอโทรศัพท์ Android สองภาพแสดงแป้นพิมพ์ที่เหมาะสำหรับการป้อนที่อยู่อีเมล (โดยใช้ type=email) และการป้อนหมายเลขโทรศัพท์ (ที่มี type=tel)

คุณเปลี่ยนแป้น Enter บนแป้นพิมพ์บนหน้าจอได้ด้วยแอตทริบิวต์ enterkeyhint ตัวอย่างเช่น enterkeyhint="next" หรือ enterkeyhint="done" เปลี่ยนป้ายกำกับปุ่มเป็นไอคอนที่เหมาะสม ซึ่งจะช่วยให้ผู้ใช้เข้าใจได้ชัดเจนขึ้นว่าจะเกิดอะไรขึ้นเมื่อส่งแบบฟอร์มปัจจุบัน

ภาพหน้าจอ 2 ภาพของแบบฟอร์มที่อยู่ใน Android ซึ่งแสดงให้เห็นว่าแอตทริบิวต์อินพุต Enterkeyhint เปลี่ยนไอคอนปุ่มแป้น Enter อย่างไร

ตรวจสอบว่าผู้ใช้ส่งแบบฟอร์มได้

สมมติว่าคุณกรอกข้อมูลใน <form> คลิกปุ่มส่ง แต่ไม่มีอะไรเกิดขึ้น ปัญหาอาจเกิดจากปุ่มถูกปิดใช้ด้วยแอตทริบิวต์ disabled ปิดใช้ปุ่มส่งจนกว่าแบบฟอร์มจะผ่านรูปแบบทั่วไป

ในทางทฤษฎี วิธีนี้ฟังดูสมเหตุสมผล แต่คุณไม่ควรปิดใช้ปุ่มส่งขณะที่รอให้อินพุตผู้ใช้เสร็จสมบูรณ์และถูกต้อง แต่ให้ไฮไลต์ข้อมูลที่ไม่ถูกต้องเมื่อป้อนข้อมูล และไฮไลต์ช่องที่เป็นปัญหาให้ผู้ใช้เห็นเมื่อผู้ใช้ส่งแบบฟอร์ม

อย่างไรก็ตาม คุณอาจต้องการปิดใช้ปุ่มส่งเมื่อส่งแบบฟอร์มเรียบร้อยแล้ว แต่ยังไม่ได้ประมวลผล ดูข้อมูลเพิ่มเติมเกี่ยวกับปุ่มที่ปิดใช้

ช่วยเหลือผู้ใช้ด้วยการแสดงข้อมูลที่ผู้ใช้ป้อนไว้ก่อนหน้านี้

สมมติว่าคุณมีแบบฟอร์มการชำระเงินที่มีหลายขั้นตอน คุณจะแน่ใจได้อย่างไรว่าค่าที่ป้อนไว้ก่อนหน้าจะยังคงอยู่เมื่อผู้ใช้กลับไปที่ขั้นตอนก่อนหน้า ใช้แอตทริบิวต์ value เพื่อแสดงค่าที่เสร็จสมบูรณ์แล้ว

<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">

การเรียกค่าตัวควบคุมแบบฟอร์มใน JavaScript มีหลายวิธี คุณสามารถใช้พร็อพเพอร์ตี้ value หรือจะเข้าถึงค่าด้วย getAttribute('value') ก็ได้ มีข้อแตกต่างสำคัญอย่างหนึ่งคือ พร็อพเพอร์ตี้ value จะแสดงผลค่าปัจจุบันเสมอ และการใช้ getAttribute() จะแสดงผลค่าเริ่มต้นเสมอ

ลองใช้เลย! เปลี่ยนข้อความของช่องชื่อและตรวจดูคอนโซล สังเกตว่าพร็อพเพอร์ตี้ value แสดงผลข้อความที่ปรากฏอยู่ในปัจจุบัน ส่วน getAttribute('value') จะแสดงค่าเริ่มต้นเสมอ

ดูข้อมูลเพิ่มเติมเกี่ยวกับความแตกต่างระหว่างแอตทริบิวต์ DOM และพร็อพเพอร์ตี้ DOM

สำหรับองค์ประกอบ <input> ประเภท checkbox หรือ radio ให้ใช้แอตทริบิวต์ checked เพิ่มช่องนี้หากผู้ใช้เลือกตัวเลือกไว้ แล้วนำออกหากนำออกแทน

ตรวจสอบว่าผู้ใช้เข้าใจรูปแบบที่คาดไว้

ค่าของแอตทริบิวต์ placeholder เป็นสัญญาณบอกถึงประเภทข้อมูลที่ต้องการ 

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">

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

โดยทั่วไปแล้ว โปรดระมัดระวังเมื่อใช้แอตทริบิวต์ placeholder และอย่าใช้แอตทริบิวต์ placeholder เพื่ออธิบายการควบคุมแบบฟอร์ม โปรดใช้องค์ประกอบ <label> แทน ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุผลที่คุณควรหลีกเลี่ยงแอตทริบิวต์ placeholder

วิธีที่ดีกว่าในการให้คำแนะนำแก่ผู้ใช้เกี่ยวกับประเภทของข้อมูลที่คาดไว้คือการใช้องค์ประกอบ HTML เพิ่มเติม ใต้การควบคุมแบบฟอร์มเพื่อเพิ่มคำอธิบายหรือตัวอย่าง

ตรวจสอบว่าตัวควบคุมแบบฟอร์มพร้อมสำหรับการตรวจสอบความถูกต้อง

มีแอตทริบิวต์ HTML มากมายที่พร้อมให้คุณเปิดใช้งานการตรวจสอบในตัว ใช้แอตทริบิวต์ required เพื่อป้องกันไม่ให้มีการส่งช่องว่าง สามารถบังคับใช้การตรวจสอบเพิ่มเติมได้ด้วยแอตทริบิวต์ type เช่น ค่าของ <input> type="url" ที่ต้องระบุจะต้องเป็น URL

โปรดใช้แอตทริบิวต์ minlength เพื่อให้แน่ใจว่าผู้ใช้ป้อนอักขระตามจำนวนขั้นต่ำ หากต้องการไม่อนุญาตให้ใช้ค่าที่มีอักขระเกินจำนวนสูงสุด ให้ใช้แอตทริบิวต์ maxlength สำหรับประเภทอินพุตที่เป็นตัวเลข เช่น <input type="number"> ให้ใช้แอตทริบิวต์ min และ max แทน

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบ: ช่วยผู้ใช้ป้อนข้อมูลที่ถูกต้องในแบบฟอร์ม

ทดสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับแอตทริบิวต์แบบฟอร์ม

แอตทริบิวต์ใดที่คุณใช้เปลี่ยนป้ายกำกับของแป้น Enter บนแป้นพิมพ์บนหน้าจอได้

enterkey
ลองอีกครั้งนะ
enterkeyhint
🎉
enterkeytext
ลองอีกครั้งนะ
enterkeylabel
ลองอีกครั้งนะ

พร็อพเพอร์ตี้ value และ getAttribute('value') แตกต่างกันอย่างไร

พร็อพเพอร์ตี้ value แสดงค่าปัจจุบัน getAttribute('value') จะแสดงผลค่าเริ่มต้น
🎉
พร็อพเพอร์ตี้ value แสดงค่าเริ่มต้น getAttribute('value') จะแสดงผลค่าปัจจุบัน
ลองอีกครั้งนะ
ไม่มีความแตกต่าง
ลองอีกครั้งนะ
พร็อพเพอร์ตี้ value จะแสดงผลคีย์และค่า getAttribute('value') จะแสดงผลค่าเท่านั้น
ลองอีกครั้งนะ

แหล่งข้อมูล