แอตทริบิวต์ขององค์ประกอบ HTML ช่วยเพิ่มประสิทธิภาพให้กับ <form>
และการควบคุมแบบฟอร์มได้
ช่วยให้ผู้ใช้กรอกข้อมูลในการควบคุมแบบฟอร์ม
ให้ใช้แอตทริบิวต์ type
ที่เหมาะสมสำหรับองค์ประกอบ <input>
ของคุณเพื่อให้ผู้ใช้กรอกแบบฟอร์มได้ง่ายขึ้น
เบราว์เซอร์จะแสดงอินเทอร์เฟซผู้ใช้ที่เหมาะสำหรับ type
เช่น เครื่องมือเลือกวันที่สำหรับ <input>
ประเภท date
เบราว์เซอร์ในอุปกรณ์เคลื่อนที่จะแสดงแป้นพิมพ์บนหน้าจอที่ปรับเปลี่ยน
เช่น ปุ่มกดหมายเลขโทรศัพท์สำหรับ type="tel"
<input>
บางประเภทยังเปลี่ยนกฎการตรวจสอบขององค์ประกอบเมื่อส่งแบบฟอร์มด้วย
ตัวอย่างเช่น <input type="url">
จะใช้ได้เฉพาะในกรณีที่ไม่ว่างเปล่าและค่าเป็น URL
ตรวจสอบว่าผู้ใช้ป้อนข้อมูล
การระบุแป้นพิมพ์บนหน้าจอที่เหมาะสมในอุปกรณ์แบบสัมผัสมีแอตทริบิวต์ที่แตกต่างกัน
ตัวเลือกแรกคือการใช้แอตทริบิวต์ type
ตามที่กล่าวไว้ข้างต้น
อีกตัวเลือกหนึ่งคือแอตทริบิวต์ inputmode
ที่
Android และ iOS รองรับ
แอตทริบิวต์ inputmode
แตกต่างจากแอตทริบิวต์ type
ตรงที่จะเปลี่ยนเฉพาะแป้นพิมพ์บนหน้าจอ ไม่ได้เปลี่ยนลักษณะการทำงานขององค์ประกอบนั้น การใช้ inputmode
เป็นตัวเลือกที่ดีในกรณีที่คุณต้องการรักษาอินเทอร์เฟซผู้ใช้เริ่มต้นและกฎการตรวจสอบเริ่มต้นของ <input>
แต่ต้องการแป้นพิมพ์บนหน้าจอที่เพิ่มประสิทธิภาพแล้ว
คุณเปลี่ยนแป้น Enter
บนแป้นพิมพ์บนหน้าจอได้ด้วยแอตทริบิวต์ enterkeyhint
ตัวอย่างเช่น enterkeyhint="next"
หรือ enterkeyhint="done"
เปลี่ยนป้ายกำกับปุ่มเป็นไอคอนที่เหมาะสม
ซึ่งจะช่วยให้ผู้ใช้เข้าใจได้ชัดเจนขึ้นว่าจะเกิดอะไรขึ้นเมื่อส่งแบบฟอร์มปัจจุบัน
ตรวจสอบว่าผู้ใช้ส่งแบบฟอร์มได้
สมมติว่าคุณกรอกข้อมูลใน <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')
จะแสดงผลค่าเท่านั้น