เว็บไซต์และแอปพลิเคชันส่วนใหญ่จะมีเว็บฟอร์ม เว็บไซต์มุกตลกอย่าง DoWebsites<form>
องค์ประกอบ HTML <form> จะระบุจุดสังเกตของเอกสารที่มีการควบคุมแบบอินเทอร์แอกทีฟสำหรับการส่งข้อมูล ใน <form> คุณจะพบตัวควบคุมแบบฟอร์มแบบโต้ตอบ (และไม่ใช่แบบโต้ตอบ) ทั้งหมดที่ประกอบกันเป็นแบบฟอร์มดังกล่าว
HTML มีประสิทธิภาพ ส่วนนี้เน้นที่ประสิทธิภาพของ HTML ซึ่งครอบคลุมสิ่งที่ HTML สามารถทำได้โดยไม่ต้องเพิ่ม JavaScript โดยทั่วไปแล้ว การใช้ข้อมูลแบบฟอร์มทางฝั่งไคลเอ็นต์เพื่ออัปเดต UI ด้วยวิธีใดก็ตามจะเกี่ยวข้องกับ CSS หรือ JavaScript ซึ่งไม่ได้กล่าวถึงในที่นี้ มีหลักสูตรเรียนรู้ฟอร์มทั้งหมด เราจะไม่ทำซ้ำส่วนนี้ในที่นี้ แต่จะเปิดตัวการควบคุมหลายรูปแบบและแอตทริบิวต์ HTML ที่เสริมศักยภาพได้
คุณสามารถใช้แบบฟอร์มเพื่อเปิดโอกาสให้ผู้ใช้โต้ตอบกับเว็บไซต์หรือแอปพลิเคชัน ตรวจสอบข้อมูลที่ป้อน และส่งข้อมูลไปยังเซิร์ฟเวอร์ แอตทริบิวต์ HTML อาจเปิดใช้การกำหนดให้ผู้ใช้เลือกตัวควบคุมแบบฟอร์มหรือป้อนค่า แอตทริบิวต์ HTML สามารถกำหนดเกณฑ์เฉพาะว่าค่าที่ตรงกันจะต้องตรงกัน เมื่อผู้ใช้พยายามส่งแบบฟอร์ม ค่าการควบคุมแบบฟอร์มทั้งหมดจะต้องผ่านการตรวจสอบข้อจำกัดฝั่งไคลเอ็นต์ และสามารถป้องกันการส่งได้จนกว่าข้อมูลจะตรงตามเกณฑ์ที่จำเป็น ซึ่งทั้งหมดไม่มี JavaScript คุณยังปิดฟีเจอร์นี้ได้อีกด้วย กล่าวคือ การตั้งค่าแอตทริบิวต์ novalidate ใน <form> หรือบ่อยกว่าการใช้ formnovalidate บนปุ่ม การบันทึกข้อมูลแบบฟอร์มไว้เพื่อกรอกในภายหลัง จะทำให้ไม่สามารถตรวจสอบความถูกต้อง
การส่งแบบฟอร์ม
ระบบจะส่งแบบฟอร์มเมื่อผู้ใช้เปิดใช้งานปุ่มส่งที่ฝังอยู่ในแบบฟอร์ม เมื่อใช้ <input> กับปุ่ม "value" คือป้ายกำกับของปุ่มและจะแสดงในปุ่มนั้น เมื่อใช้ <button> ป้ายกำกับคือข้อความระหว่างแท็ก <button> เปิดและปิด ปุ่มส่งสามารถเขียนได้ 2 วิธีดังนี้
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
สำหรับแบบฟอร์มแบบง่ายๆ คุณต้องมีองค์ประกอบ <form> พร้อมด้วยอินพุตแบบฟอร์มบางอย่างและปุ่มส่ง แต่การส่งแบบฟอร์มมีมากกว่านั้น
แอตทริบิวต์ขององค์ประกอบ <form> จะกำหนดเมธอด HTTP ที่ใช้ส่งแบบฟอร์มและ URL ที่ประมวลผลการส่งแบบฟอร์ม ได้ แบบฟอร์มสามารถส่ง ประมวลผล และโหลดหน้าใหม่ได้โดยไม่ต้องใช้ JavaScript องค์ประกอบ <form> มีประสิทธิภาพมาก
ค่าแอตทริบิวต์ action และ method ขององค์ประกอบ <form> จะกำหนด URL ที่ประมวลผลข้อมูลแบบฟอร์มและเมธอด HTTP ที่ใช้ในการส่งข้อมูลตามลำดับ
โดยค่าเริ่มต้น ระบบจะส่งข้อมูลไปยังหน้าปัจจุบัน หรือตั้งค่าแอตทริบิวต์ action เป็น URL ที่ต้องการส่งข้อมูล
ข้อมูลที่ส่งประกอบด้วยคู่ชื่อ/ค่าของการควบคุมฟอร์มต่างๆ ของฟอร์ม โดยค่าเริ่มต้น จะรวมการควบคุมแบบฟอร์มทั้งหมดที่ฝังอยู่ภายในแบบฟอร์มที่มี name แต่สำหรับแอตทริบิวต์ form คุณอาจรวมตัวควบคุมแบบฟอร์มไว้นอก <form> และละเว้นตัวควบคุมแบบฟอร์มที่ฝังอยู่ภายใน <form> ได้ ซึ่งรองรับในตัวควบคุมแบบฟอร์มและ <fieldset>
โดยแอตทริบิวต์ form จะใช้เป็นค่า id ของแบบฟอร์มที่เชื่อมโยงกับการควบคุม โดยไม่จำเป็นว่าต้องเป็นรูปแบบที่ฝังอยู่ ซึ่งหมายความว่า ตัวควบคุมแบบฟอร์มไม่จําเป็นต้องฝังอยู่ใน <form>
แอตทริบิวต์ method กำหนดโปรโตคอล HTTP ของคำขอ: โดยทั่วไปจะเป็น GET หรือ POST เมื่อใช้ GET ระบบจะส่งข้อมูลแบบฟอร์มเป็นสตริงพารามิเตอร์ของคู่ name=value ต่อท้าย URL ของ action
เมื่อใช้ POST ระบบจะผนวกข้อมูลต่อท้ายเนื้อหาของคำขอ HTTP เมื่อส่งข้อมูลที่ปลอดภัย เช่น รหัสผ่านและข้อมูลบัตรเครดิต ให้ใช้ POST เสมอ
และยังมีเมธอด DIALOG อีกด้วย หาก <form method="dialog"> อยู่ใน <dialog> การส่งแบบฟอร์มจะปิดกล่องโต้ตอบ
กล่าวคือ จะมีเหตุการณ์ "ส่ง" แม้ว่าจะไม่มีการล้างข้อมูลหรือส่งข้อมูล ขอย้ำอีกครั้งว่าไม่ต้องใช้ JavaScript ซึ่งจะกล่าวถึงในส่วนกล่องโต้ตอบ โปรดทราบว่าวิธีนี้ไม่ได้ส่งแบบฟอร์ม คุณอาจต้องใส่ทั้ง formmethod="dialog" และ formnovalidate ไว้ในปุ่มส่ง
ปุ่มของแบบฟอร์มอาจมีมากกว่าแอตทริบิวต์ที่อธิบายไว้ในตอนต้นของส่วนนี้ หากปุ่มมีแอตทริบิวต์ formaction, formenctype, formmethod, formnovalidate หรือ formtarget ค่าที่ตั้งไว้บนปุ่มที่เปิดใช้งานการส่งแบบฟอร์มจะมีความสำคัญเหนือกว่า action, enctype, method และ target ที่กำหนดไว้ใน <form> การตรวจสอบข้อจํากัดจะเกิดขึ้นก่อนการส่งแบบฟอร์ม แต่เฉพาะในกรณีที่ไม่มี formnovalidate บนปุ่มส่งที่เปิดใช้งานหรือ novalidate ใน <form>
หากต้องการจับภาพว่ามีการใช้ปุ่มใดในการส่งแบบฟอร์ม ให้ใส่ name กับปุ่มนั้น ปุ่มที่ไม่มีชื่อหรือค่าจะไม่ถูกส่งไปยังข้อมูลแบบฟอร์มเมื่อส่งแบบฟอร์ม
หลังจากส่งแบบฟอร์ม
เมื่อผู้ใช้ส่งแบบฟอร์มออนไลน์ที่กรอกข้อมูลครบถ้วนแล้ว ชื่อและค่าของตัวควบคุมแบบฟอร์มที่เกี่ยวข้องจะถูกส่ง ชื่อคือค่าของแอตทริบิวต์ name ค่ามาจากเนื้อหาของแอตทริบิวต์ value หรือค่าที่ผู้ใช้ป้อนหรือเลือก ค่าของ <textarea> จะเป็นข้อความภายใน
ค่าของ <select> คือ value ของ <option> ที่เลือก หรือหาก <option> ไม่มีแอตทริบิวต์ value ค่านี้จะเป็นข้อความภายในของตัวเลือกที่เลือกไว้
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
การเลือก "Hoover Sukhdeep" (หรือไม่ดำเนินการใดๆ เมื่อเบราว์เซอร์ปรากฏ จากนั้นเลือกค่าตัวเลือกแรกโดยค่าเริ่มต้น) จากนั้นคลิกปุ่มส่งจะเป็นการโหลดหน้านี้ซ้ำ โดยตั้งค่า URL เป็น
https://web.dev/learn/html/forms?student=hoover
เนื่องจากตัวเลือกที่ 2 ไม่มีแอตทริบิวต์ value ระบบจึงส่งข้อความภายในเป็นค่า การเลือก "Blendan Smooth"
แล้วคลิกปุ่มส่งจะเป็นการโหลดหน้านี้ซ้ำ โดยตั้งค่า URL เป็น
https://web.dev/learn/html/forms?student=Blendan+Smooth
เมื่อส่งแบบฟอร์ม ข้อมูลที่ส่งจะมีชื่อและค่าของตัวควบคุมแบบฟอร์มที่มีชื่อทั้งหมดที่มี name ยกเว้นช่องทำเครื่องหมายที่ไม่ได้เลือก ปุ่มตัวเลือกที่ไม่ได้เลือก ตลอดจนชื่อและค่าของปุ่มอื่นๆ ที่ไม่ใช่ปุ่มที่ใช้ส่งแบบฟอร์ม สำหรับตัวควบคุมแบบฟอร์มอื่นๆ ทั้งหมด หากตัวควบคุมแบบฟอร์มมีชื่อ แต่ไม่ได้ป้อนค่าหรือกำหนดค่าเริ่มต้นไว้ ระบบจะส่ง name ของตัวควบคุมแบบฟอร์มพร้อมค่าว่าง
มีประเภทอินพุต 22 ประเภท เราจึงไม่สามารถครอบคลุมทั้งหมดได้
โปรดทราบว่าการป้อนค่านั้นไม่บังคับ และมักเป็นความคิดที่ไม่น่าพอใจ เมื่อคุณต้องการให้ผู้ใช้ป้อนข้อมูล
สำหรับองค์ประกอบ <input> ที่ผู้ใช้แก้ไขค่าไม่ได้ คุณควรใส่ค่าไว้ด้วยเสมอ ซึ่งรวมถึงสำหรับองค์ประกอบอินพุตที่มีประเภทเป็น hidden, radio, checkbox, submit, button และ reset
การใช้ name ที่ไม่ซ้ำกันสำหรับการควบคุมแบบฟอร์มทำให้การประมวลผลข้อมูลฝั่งเซิร์ฟเวอร์ง่ายขึ้น เราจึงขอแนะนำให้ใช้ช่องทำเครื่องหมายและปุ่มตัวเลือกเป็นข้อยกเว้นของกฎนี้
ปุ่มตัวเลือก
หากคุณสังเกตเห็นว่าเมื่อคุณเลือกปุ่มตัวเลือกภายในกลุ่มปุ่มตัวเลือก คุณจะเลือกได้ทีละปุ่มเท่านั้นเนื่องจากแอตทริบิวต์ name เอฟเฟกต์ที่เลือกได้เพียงรายการเดียวนี้สร้างขึ้นโดยให้ปุ่มตัวเลือกแต่ละปุ่มในกลุ่มมี name เดียวกัน
name ไม่ควรซ้ำกันในกลุ่ม: หากคุณใช้ name เดียวกันสำหรับ 2 กลุ่มแยกกันโดยไม่ได้ตั้งใจ การเลือกปุ่มตัวเลือกในกลุ่มที่ 2 จะยกเลิกการเลือกทุกรายการซึ่งทำไว้ในกลุ่มแรกที่มี name เดียวกัน
ระบบจะส่ง name พร้อมกับ value ของปุ่มตัวเลือกที่เลือกมาพร้อมกับแบบฟอร์ม ตรวจสอบว่าปุ่มตัวเลือกแต่ละปุ่มมีvalueที่เกี่ยวข้อง (และมักจะไม่ซ้ำกัน) ระบบจะไม่ส่งค่าของปุ่มตัวเลือกที่ไม่ได้เลือก
คุณจะมีกลุ่มตัวเลือกกี่กลุ่มในหน้าเว็บก็ได้ตามที่ต้องการ โดยแต่ละกลุ่มทํางานแยกกัน ตราบใดที่แต่ละกลุ่มมี name ที่ไม่ซ้ำสำหรับแต่ละกลุ่ม
หากคุณต้องการโหลดหน้าเว็บโดยใช้ปุ่มตัวเลือกใดปุ่มหนึ่งในกลุ่มชื่อเดียวกันที่เลือกไว้ ให้ใส่แอตทริบิวต์ checked ไว้ด้วย
ปุ่มตัวเลือกนี้จะตรงกับ :default Pseudo-class ของ CSS แม้ว่าผู้ใช้จะเลือกวิทยุอื่นก็ตาม ปุ่มตัวเลือกที่เลือกในปัจจุบันตรงกับคลาส Pseudo :checked
หากกำหนดให้ผู้ใช้เลือกตัวควบคุมวิทยุจากกลุ่มปุ่มตัวเลือก ให้เพิ่มแอตทริบิวต์ required ลงในตัวควบคุมอย่างน้อย 1 รายการ การใส่ required ในปุ่มตัวเลือกในกลุ่มจะเป็นการจำเป็นต้องมีการเลือกสำหรับการส่งแบบฟอร์ม แต่ไม่จำเป็นต้องเป็นวิทยุที่มีแอตทริบิวต์ที่เลือกให้ใช้งานได้ และระบุอย่างชัดเจนใน <legend> ว่าต้องมีตัวควบคุมแบบฟอร์ม เราจะอธิบายการติดป้ายกำกับกลุ่มปุ่มตัวเลือกพร้อมปุ่มแต่ละปุ่มในภายหลัง
ช่องทำเครื่องหมาย
โดยช่องทำเครื่องหมายทั้งหมดภายในกลุ่มจะมี name เหมือนกันได้ เฉพาะช่องทำเครื่องหมายที่เลือกไว้เท่านั้นที่ส่ง name และ value มาพร้อมกับแบบฟอร์ม หากมีช่องทำเครื่องหมายหลายช่องที่ใช้ชื่อเดียวกัน ระบบจะส่งชื่อเดียวกันพร้อมค่าที่ต่างกัน (หวังว่าจะได้) หากคุณมีตัวควบคุมแบบฟอร์มหลายรายการที่ใช้ชื่อเดียวกัน แม้จะไม่ใช่ช่องทำเครื่องหมายทั้งหมด
ระบบจะส่งตัวควบคุมแบบฟอร์มทั้งหมดโดยคั่นด้วยเครื่องหมาย "และ"
หากไม่ได้ใส่ value ในช่องทำเครื่องหมาย ค่าของช่องทำเครื่องหมายที่เลือกจะเป็นค่าเริ่มต้น on ซึ่งอาจไม่มีประโยชน์ หากคุณมีช่องทำเครื่องหมาย 3 ช่องที่ชื่อว่า chk และได้เลือกช่องทำเครื่องหมายทั้งหมดแล้ว คุณจะไม่สามารถถอดรหัสการส่งแบบฟอร์มได้ ดังนี้
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
หากต้องการกำหนดให้ต้องเลือกช่องทำเครื่องหมาย ให้เพิ่มแอตทริบิวต์ required แจ้งให้ผู้ใช้ทราบเสมอเมื่อต้องเลือกช่องทำเครื่องหมาย หรือเมื่อต้องใช้ตัวควบคุมแบบฟอร์ม การเพิ่ม required ลงในช่องทำเครื่องหมายเป็นเพียงการกำหนดให้ต้องเลือกช่องทำเครื่องหมายดังกล่าวเท่านั้น และจะไม่ส่งผลต่อช่องทำเครื่องหมายอื่นๆ ที่มีชื่อเดียวกัน
ป้ายกำกับและชุดฟิลด์
แบบฟอร์มจะต้องเข้าถึงได้เพื่อให้ผู้ใช้ทราบวิธีกรอกแบบฟอร์ม ตัวควบคุมแบบฟอร์มทุกรายการต้องมีป้ายกำกับ
นอกจากนี้คุณยังต้องการติดป้ายกำกับกลุ่มตัวควบคุมแบบฟอร์ม ขณะที่อินพุต เลือก และพื้นที่ข้อความแต่ละรายการมีป้ายกำกับเป็น <label> กลุ่มของตัวควบคุมแบบฟอร์มจะติดป้ายกำกับตามเนื้อหาของ <legend> ของ <fieldset> ที่จัดกลุ่มไว้
ในตัวอย่างก่อนหน้านี้ คุณอาจสังเกตเห็นว่าตัวควบคุมแบบฟอร์มแต่ละรายการยกเว้นปุ่มส่งมี <label> ป้ายกำกับ
ทำให้มีตัวควบคุมแบบฟอร์มพร้อมชื่อที่เข้าถึงได้ ปุ่มต่างๆ จะแสดงชื่อที่เข้าถึงได้จากเนื้อหาหรือค่าของปุ่ม การควบคุมแบบฟอร์มอื่นๆ ทั้งหมดต้องมี <label> ที่เชื่อมโยง หากไม่มีป้ายกํากับที่เกี่ยวข้อง เบราว์เซอร์จะยังคงแสดงตัวควบคุมแบบฟอร์มอยู่
แต่ผู้ใช้จะไม่ทราบว่าคาดหวังข้อมูลใด
หากต้องการเชื่อมโยงตัวควบคุมแบบฟอร์มกับ <label> อย่างชัดแจ้ง ให้ใส่แอตทริบิวต์ for ใน <label>: ค่าที่เป็น id ของตัวควบคุมแบบฟอร์มที่เชื่อมโยงกับตัวควบคุมนั้น
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
การเชื่อมโยงป้ายกำกับกับตัวควบคุมแบบฟอร์มมีประโยชน์หลายประการ ป้ายกำกับทำให้ผู้ใช้โปรแกรมอ่านหน้าจอเข้าถึงการควบคุมแบบฟอร์มได้โดยการระบุชื่อที่เข้าถึงได้ให้กับตัวควบคุม ป้ายกำกับยังเป็น "พื้นที่ยอดนิยม" เช่นกัน เนื่องจากทำให้เว็บไซต์ใช้งานได้มากขึ้นสำหรับผู้ใช้ที่มีปัญหาเรื่องความคล่องตัว โดยการเพิ่มพื้นที่ หากใช้เมาส์ ลองคลิกที่ใดก็ได้ที่ป้ายกำกับ "ชื่อของคุณ" การทำเช่นนี้จะช่วยให้อินพุตมีสมาธิ
หากต้องการใส่ป้ายกำกับโดยนัย ให้รวมการควบคุมฟอร์มระหว่างแท็ก <label> เปิดและปิด เข้าถึงได้ทั้งจากโปรแกรมอ่านหน้าจอและมุมมองของอุปกรณ์ตัวชี้เท่าๆ กัน แต่จะไม่มีฮุกการจัดรูปแบบเหมือนกับป้ายกำกับที่ชัดเจน
<label>Your name
<input type="text" name="name">
</label>
เนื่องจากป้ายกำกับเป็น "พื้นที่ Hit" อย่ารวมองค์ประกอบแบบอินเทอร์แอกทีฟภายในป้ายกำกับที่ไม่เหมาะสม หรือคอมโพเนนต์แบบอินเทอร์แอกทีฟอื่นๆ นอกเหนือจากตัวควบคุมแบบฟอร์มที่มีป้ายกำกับในป้ายกำกับโดยนัย เช่น ถ้าคุณใส่ลิงก์ไว้ในป้ายกำกับ ขณะที่เบราว์เซอร์จะแสดง HTML ผู้ใช้จะยังสับสนหากคลิกป้ายกำกับเพื่อป้อนตัวควบคุมแบบฟอร์ม แต่ระบบเปลี่ยนเส้นทางไปยังหน้าใหม่
โดยทั่วไป <label> จะมาก่อนตัวควบคุมแบบฟอร์ม ยกเว้นในกรณีของปุ่มตัวเลือกและช่องทำเครื่องหมาย แต่ไม่ได้เป็นขั้นตอนบังคับ
ซึ่งเป็นรูปแบบทั่วไปของ UX ชุด "เรียนรู้แบบฟอร์ม" มีข้อมูลเกี่ยวกับการออกแบบแบบฟอร์ม
สำหรับกลุ่มปุ่มตัวเลือกและช่องทำเครื่องหมาย ป้ายกำกับจะแสดงชื่อที่เข้าถึงได้สำหรับตัวควบคุมแบบฟอร์มที่เชื่อมโยงกับกลุ่มของปุ่มตัวเลือกและป้ายกำกับ
แต่กลุ่มตัวควบคุมและป้ายกำกับของตัวควบคุมต้องมีป้ายกำกับด้วย หากต้องการติดป้ายกำกับกลุ่ม ให้จัดกลุ่มองค์ประกอบทั้งหมดไว้ใน <fieldset> โดยที่ <legend> จะระบุป้ายกำกับสำหรับกลุ่ม
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
ในตัวอย่างนี้ <label> โดยนัยจะติดป้ายกำกับปุ่มตัวเลือก และ <legend> มอบป้ายกำกับสำหรับกลุ่มปุ่มตัวเลือก
การฝัง <fieldset> ไว้ใน <fieldset> อีกรายการเป็นแนวทางปฏิบัติมาตรฐาน เช่น หากแบบฟอร์มเป็นแบบสำรวจที่มีคำถามหลายข้อที่แบ่งออกเป็นกลุ่มคำถามที่เกี่ยวข้องกัน <fieldset> "นักเรียนคนโปรด" อาจซ้อนอยู่ใน <fieldset> อื่นที่มีป้ายกำกับว่า "รายการโปรด" ดังนี้
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
ลักษณะที่ปรากฏเริ่มต้นขององค์ประกอบเหล่านี้ส่งผลให้มีการใช้งานต่ำกว่าเกณฑ์ แต่ <legend> และ <fieldset> สามารถจัดรูปแบบด้วย CSS
นอกจากแอตทริบิวต์ส่วนกลางทั้งหมดแล้ว <fieldset> ยังรองรับแอตทริบิวต์ name, disabled และ form ด้วย
เมื่อคุณปิดใช้ชุดฟิลด์ การควบคุมแบบฟอร์มที่ซ้อนกันทั้งหมดจะถูกปิดใช้งาน ทั้งแอตทริบิวต์ name และ form ต่างก็ไม่ได้ใช้งานใน <fieldset> คุณใช้ name เพื่อเข้าถึงชุดฟิลด์ด้วย JavaScript ได้ แต่ตัวชุดฟิลด์เองจะไม่รวมอยู่ในข้อมูลที่ส่ง (รวมตัวควบคุมแบบฟอร์มที่มีชื่อซึ่งฝังอยู่ภายใน)
ประเภทการป้อนข้อมูลและแป้นพิมพ์แบบไดนามิก
ดังที่กล่าวไว้ก่อนหน้านี้ มีอินพุต 22 ประเภท
ในบางกรณี เมื่อผู้ใช้กำลังใช้อุปกรณ์ที่มีแป้นพิมพ์แบบไดนามิกซึ่งแสดงเมื่อจำเป็นเท่านั้น เช่น โทรศัพท์ ประเภทการป้อนข้อมูลที่ใช้จะเป็นตัวกำหนดประเภทแป้นพิมพ์ที่แสดง แป้นพิมพ์เริ่มต้นที่แสดงสามารถปรับให้เหมาะกับประเภทของการป้อนข้อมูลที่ต้องการได้
ตัวอย่างเช่น ประเภท tel จะแสดงปุ่มกดที่เพิ่มประสิทธิภาพสำหรับการป้อนหมายเลขโทรศัพท์ email ประกอบด้วย @ และ . และแป้นพิมพ์แบบไดนามิกสำหรับ url จะมีเครื่องหมายทวิภาคและเครื่องหมายเครื่องหมายทับ น่าเสียดายที่ iPhone ยังคงไม่มี : ใน
แป้นพิมพ์แบบไดนามิกเริ่มต้นสำหรับประเภทอินพุต url ประเภท
แป้นพิมพ์สำหรับ <input type="tel"> ใน iPhone และโทรศัพท์ Android 2 เครื่อง ได้แก่
แป้นพิมพ์สำหรับ <input type="email"> ใน iPhone และโทรศัพท์ Android 2 เครื่อง ได้แก่
การเข้าถึงไมโครโฟนและกล้อง
ประเภทอินพุตไฟล์ <input type="file"> จะเปิดใช้การอัปโหลดไฟล์ผ่านแบบฟอร์ม ไฟล์อาจเป็นไฟล์ประเภทใดก็ได้ที่แอตทริบิวต์ accept กำหนดและจำกัด รายการประเภทไฟล์ที่ยอมรับได้อาจเป็นรายการนามสกุลไฟล์ที่คั่นด้วยเครื่องหมายจุลภาค ประเภทไฟล์ส่วนกลาง หรือประเภทส่วนกลางและนามสกุลไฟล์รวมกัน เช่น accept="video/*, .gif" ยอมรับไฟล์วิดีโอหรือ GIF แบบเคลื่อนไหว
ใช้ "audio/*" สำหรับไฟล์เสียง ใช้ "video/*" สำหรับไฟล์วิดีโอ และ "image/*" สำหรับไฟล์ภาพ
แอตทริบิวต์ capture ที่แจกแจงซึ่งระบุไว้ในข้อกำหนดการจับภาพสื่อจะใช้ได้หากสร้างไฟล์สื่อใหม่โดยใช้กล้องหรือไมโครโฟนของผู้ใช้ คุณสามารถตั้งค่า user สำหรับอุปกรณ์อินพุตที่แสดงต่อผู้ใช้ หรือ environment สำหรับกล้องหลังหรือไมโครโฟนของโทรศัพท์ โดยทั่วไป การใช้ capture โดยไม่มีค่ามักจะใช้ได้ผลเพราะผู้ใช้จะต้องเลือกอุปกรณ์อินพุตที่ต้องการใช้
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
การตรวจสอบในตัว
ขอย้ำอีกครั้งว่าหากไม่มี JavaScript ใดๆ HTML จะป้องกันไม่ให้มีการส่งแบบฟอร์มที่มีค่าที่ไม่ถูกต้องได้
มีตัวเลือก CSS บางรายการที่ตรงกับการควบคุมแบบฟอร์มตามการมีแอตทริบิวต์ HTML ซึ่งรวมถึง :required
และ :optional หากตั้งค่าบูลีน required
ไว้หรือไม่ :default หาก checked
มีฮาร์ดโค้ด และ :enabled หรือ :disabled:disabled เป็นเอลิเมนต์และ :disabledchecked เป็นฮาร์ดโค้ด และ :enabled หรือ :disabled:disabled เป็นเอลิเมนต์และ :disabled ขึ้นอยู่กับว่าองค์ประกอบดังกล่าวเป็นแบบอินเทอร์แอกทีฟหรือไม่disabled คลาส Pseudoclass ของ :read-write จะจับคู่องค์ประกอบที่มีการตั้งค่า
contenteditable และการควบคุมฟอร์มที่แก้ไขได้โดยค่าเริ่มต้น เช่น ประเภทอินพุต number, password และ text (แต่ไม่ใช่ช่องทำเครื่องหมาย ปุ่มตัวเลือก หรือประเภท hidden เป็นต้น) หากองค์ประกอบที่เขียนได้ตามปกติมีการตั้งค่าแอตทริบิวต์ readonly ไว้ องค์ประกอบดังกล่าวจะจับคู่กับ :read-only แทน
เมื่อผู้ใช้ป้อนข้อมูลลงในตัวควบคุมแบบฟอร์ม ตัวเลือก UI ของ CSS ซึ่งได้แก่ :valid,
:invalid, :in-range และ
:out-of-range จะเปิดหรือปิดตามสถานะ เมื่อผู้ใช้ออกจากการควบคุมแบบฟอร์ม คลาส Pseudo-Class ที่ยังไม่รองรับโดยสมบูรณ์หรือ :user-invalid หรือ :user-valid จะตรงกัน
คุณใช้ CSS เพื่อระบุตัวบ่งชี้ได้ว่าจำเป็นต้องใช้ตัวควบคุมแบบฟอร์มหรือไม่และถูกต้องเมื่อผู้ใช้โต้ตอบกับแบบฟอร์ม คุณยังใช้ CSS เพื่อป้องกันไม่ให้ผู้ใช้คลิกปุ่มส่งได้จนกว่าแบบฟอร์มจะถูกต้อง ดังนี้
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
ข้อมูลโค้ด CSS นี้เป็นรูปแบบที่ต่อต้าน แม้ว่า UI ของคุณอาจดูเข้าใจง่ายและชัดเจน แต่ผู้ใช้จำนวนมากพยายามส่งแบบฟอร์มเพื่อเปิดใช้ข้อความแสดงข้อผิดพลาด การทำให้ปุ่มส่งปรากฏเป็นปิดใช้ด้วยวิธีนี้จะไม่อนุญาตให้มีการตรวจสอบข้อจำกัด ซึ่งเป็นฟีเจอร์ที่ผู้ใช้จำนวนมากต้องใช้
CSS ที่ใช้จะอัปเดตอย่างต่อเนื่องตามสถานะปัจจุบันของ UI ตัวอย่างเช่น เมื่อคุณรวมประเภทอินพุตที่มีข้อจํากัด เช่น email, number, url และประเภทวันที่ หากค่าไม่ใช่ Null (ไม่ว่างเปล่า) และค่าปัจจุบันไม่ใช่อีเมล, หมายเลข, URL, วันที่ หรือเวลาที่ถูกต้อง :invalidคลาส Pseudo ของ CSS จะตรงกัน การอัปเดตอย่างต่อเนื่องนี้แตกต่างจากการตรวจสอบข้อจำกัด HTML ในตัวซึ่งจะเกิดขึ้นเมื่อผู้ใช้พยายามส่งแบบฟอร์มเท่านั้น
การตรวจสอบข้อจำกัดในตัวเกี่ยวข้องกับข้อจำกัดที่ตั้งค่าด้วยแอตทริบิวต์ HTML เท่านั้น แม้ว่าคุณจะสามารถจัดรูปแบบองค์ประกอบตามโมเดล Pseudoclass ของ :required และ :valid/:invalid แต่ข้อความแสดงข้อผิดพลาดที่เบราว์เซอร์ให้มาจากข้อผิดพลาดตามแอตทริบิวต์ required, pattern, min, max และแม้กระทั่ง type จะมาถึงการส่งแบบฟอร์ม
เมื่อเราพยายามส่งแบบฟอร์มโดยไม่เลือกนักเรียนคนโปรดที่จำเป็น การตรวจสอบข้อจำกัดจะทำให้ส่งแบบฟอร์มไม่ได้เพราะเกิดข้อผิดพลาดเกี่ยวกับ validityState.valueMissing
หากพร็อพเพอร์ตี้ validityState แสดงผล true แสดงว่าการส่งถูกบล็อก และเบราว์เซอร์แสดงข้อความแสดงข้อผิดพลาดในการควบคุมแบบฟอร์มที่ไม่ถูกต้องครั้งแรก ซึ่งทำให้ระบบโฟกัสที่ที่ส่ง เมื่อผู้ใช้เปิดใช้งานการส่งแบบฟอร์มและมีค่าที่ไม่ถูกต้อง การควบคุมแบบฟอร์มที่ไม่ถูกต้องรายการแรกจะแสดงข้อความแสดงข้อผิดพลาดและมีการโฟกัส หากการควบคุมที่ต้องการไม่ได้กำหนดค่าไว้ หากค่าตัวเลขอยู่นอกช่วง หรือหากค่าไม่ใช่ประเภทที่แอตทริบิวต์ type กำหนด แบบฟอร์มจะไม่ตรวจสอบความถูกต้อง จะไม่ส่ง และข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น
หากค่า number วันที่ หรือเวลาต่ำกว่าค่าต่ำสุดของ min ที่ตั้งค่าไว้หรือสูงกว่าค่าสูงสุดของ max ค่าควบคุมจะเป็น :out-of-range (และ :invalid) และผู้ใช้จะได้รับแจ้งเกี่ยวกับข้อผิดพลาด valididityState.rangeUnderflow validityState.rangeOverflow เมื่อผู้ใช้พยายามส่งแบบฟอร์ม หากค่านี้อยู่นอกขั้นตอนที่มีค่า step ไม่ว่าจะตั้งค่าอย่างชัดแจ้งหรือค่าเริ่มต้นเป็น 1 การควบคุมจะเป็น :out-of-range (และ :invalid) และจะมีข้อผิดพลาด validityState.stepMismatch ข้อผิดพลาดจะปรากฏเป็นลูกโป่งและโดยค่าเริ่มต้นจะให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับวิธีแก้ไขข้อผิดพลาด
ค่าสำหรับความยาวของค่ามีแอตทริบิวต์ที่คล้ายกัน ได้แก่ แอตทริบิวต์ minlength และ maxlength จะแจ้งเตือนผู้ใช้เกี่ยวกับข้อผิดพลาดพร้อมกับ validityState.tooLong หรือ validityState.tooShort เมื่อส่ง
นอกจากนี้ maxlength ยังป้องกันไม่ให้ผู้ใช้ป้อนอักขระมากเกินไปอีกด้วย
การใช้แอตทริบิวต์ maxlength อาจทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่มีคุณภาพ โดยทั่วไปแล้ว ประสบการณ์ที่ดีกว่าคือการอนุญาตให้ผู้ใช้ป้อนอักขระได้เกินความยาวของอักขระที่อนุญาต โดยระบุตัวนับ โดยอาจอยู่ในรูปขององค์ประกอบ <output> ที่ไม่ได้ส่งมาพร้อมกับแบบฟอร์ม และทำให้ผู้ใช้แก้ไขข้อความได้จนกว่าเอาต์พุตจะแสดงความยาวไม่เกินสูงสุดที่อนุญาต คุณใส่ maxlength ไว้ใน HTML ได้ เช่นเดียวกับทุกอย่างที่เราพูดคุยกัน โดยเครื่องมือนี้ทำงานได้โดยไม่ต้องใช้ JavaScript จากนั้นเมื่อโหลด ระบบจะใช้ค่าของแอตทริบิวต์ maxlength ในการสร้างตัวนับอักขระนี้ใน JavaScript
การป้อนข้อมูลบางประเภทดูเหมือนจะมีข้อจํากัดเริ่มต้น แต่จะไม่มี เช่น ประเภทอินพุต tel จะมีปุ่มกดตัวเลขของโทรศัพท์ในอุปกรณ์ที่มีแป้นพิมพ์แบบไดนามิก แต่ไม่ได้จำกัดค่าที่ถูกต้อง สำหรับส่วนนี้และอินพุตประเภทอื่นๆ
จะมีแอตทริบิวต์ pattern คุณสามารถระบุนิพจน์ทั่วไปที่ค่าจะต้องตรงกันจึงจะถือว่าถูกต้อง
หากค่าเป็นสตริงว่างและไม่จำเป็นต้องระบุค่า จะไม่ทำให้เกิดข้อผิดพลาด validityState.patternMismatch หากต้องระบุและเว้นว่างไว้ ข้อความแสดงข้อผิดพลาดเริ่มต้นของ validityState.valueMissing จะแสดงให้ผู้ใช้เห็น แทนข้อความ patternMismatch
สำหรับอีเมล validityState.typeMismatch อาจจะไม่เหมาะกับความต้องการของคุณ คุณอาจต้องระบุแอตทริบิวต์ pattern เพื่อให้ระบบไม่ยอมรับอีเมลอินทราเน็ตที่ไม่มี TLD
แอตทริบิวต์รูปแบบช่วยให้ระบุนิพจน์ทั่วไปที่ค่าจะต้องตรงกัน เมื่อต้องจับคู่รูปแบบ
โปรดตรวจสอบว่าผู้ใช้เข้าใจสิ่งที่คาดหวังไว้อย่างชัดเจน
คุณทำทั้งหมดนี้ได้โดยไม่ต้องใช้ JavaScript บรรทัดเดียว แต่ในกรณีที่เป็น HTML API คุณจะใช้ JavaScript เพื่อรวมข้อความที่กำหนดเองระหว่างการตรวจสอบข้อจำกัดได้ นอกจากนี้ คุณยังสามารถใช้ JavaScript เพื่ออัปเดตจำนวนอักขระที่เหลืออยู่ แสดงแถบความคืบหน้าเพื่อเพิ่มระดับความปลอดภัยของรหัสผ่าน หรือวิธีอื่นๆ ในการปรับปรุงการเติมข้อมูลแบบไดนามิก
ตัวอย่าง
ตัวอย่างนี้มีแบบฟอร์มภายใน <dialog> ที่มี <form> ที่ฝังไว้ พร้อมตัวควบคุมแบบฟอร์ม 3 ปุ่มและปุ่มส่ง 2 ปุ่ม รวมถึงป้ายกำกับและวิธีการที่ชัดเจน
ปุ่ม "ส่ง" ปุ่มแรกจะปิดกล่องโต้ตอบ ใช้ formmethod="dialog" เพื่อลบล้างเมธอดเริ่มต้นของแบบฟอร์ม และปิด <dialog> โดยไม่ส่งข้อมูลหรือลบข้อมูลออก คุณต้องใส่ formnovalidate ด้วย ไม่เช่นนั้นเบราว์เซอร์จะพยายามตรวจสอบว่าช่องที่ต้องกรอกทั้งหมดมีค่าแล้วหรือยัง ผู้ใช้อาจต้องการปิดกล่องโต้ตอบและแบบฟอร์มโดยไม่ป้อนข้อมูลใดๆ เนื่องจากการตรวจสอบจะป้องกันปัญหานี้ ใส่ aria-label="close" เนื่องจาก "X" เป็นสัญลักษณ์แบบภาพที่รู้จัก แต่ไม่ใช่ป้ายกำกับที่สื่อความหมาย
ตัวควบคุมแบบฟอร์มทั้งหมดมีป้ายกำกับโดยนัย คุณจึงไม่ต้องใส่แอตทริบิวต์ id หรือ for ซึ่งทั้ง 2 องค์ประกอบมีแอตทริบิวต์ที่จำเป็น
ทำให้เป็นองค์ประกอบที่จำเป็น ค่าตัวเลขมีการตั้งค่า step อย่างชัดเจนเพื่อสาธิตวิธีการรวม step เนื่องจาก step มีค่าเริ่มต้นเป็น 1 คุณละเว้นแอตทริบิวต์นี้ได้
<select> มีค่าเริ่มต้นที่ทำให้แอตทริบิวต์ required ไม่จำเป็น แทนที่จะใส่แอตทริบิวต์ value ในแต่ละตัวเลือก ค่าเริ่มต้นจะเป็นข้อความภายใน
ปุ่ม "ส่ง" ในตอนท้ายจะกำหนดเมธอดของแบบฟอร์มเป็น POST เมื่อคลิกแล้ว ระบบจะตรวจสอบความถูกต้องของแต่ละค่า หากค่าทั้งหมดถูกต้อง ระบบจะส่งข้อมูลแบบฟอร์ม จากนั้นกล่องโต้ตอบจะปิดขึ้น และหน้าอาจเปลี่ยนเส้นทางไปยัง thankyou.php ซึ่งเป็น URL การดำเนินการ หากค่าใดหายไปหรือค่าตัวเลขมีขั้นตอนไม่ตรงกันหรืออยู่นอกช่วง ข้อความแสดงข้อผิดพลาดซึ่งเบราว์เซอร์กำหนดที่เกี่ยวข้องจะปรากฏขึ้น จะไม่มีการส่งแบบฟอร์ม และกล่องโต้ตอบจะไม่ปิดลง
ข้อความแสดงข้อผิดพลาดเริ่มต้นจะปรับแต่งได้ด้วยเมธอด validityState.setCustomValidity('message here') โปรดทราบว่าหากคุณตั้งค่าข้อความแบบกำหนดเอง ข้อความดังกล่าวจะต้องมีการตั้งค่าที่เป็นสตริงว่างเปล่าอย่างชัดแจ้ง เมื่อข้อมูลทุกอย่างถูกต้อง ไม่เช่นนั้นระบบจะส่งแบบฟอร์มไม่ได้
ข้อควรพิจารณาอื่นๆ
ส่วนนี้ทั้งส่วนมีไว้สำหรับการช่วยให้ผู้ใช้ป้อนข้อมูลที่ถูกต้องในแบบฟอร์ม เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี สิ่งสำคัญคือต้องป้องกันไม่ให้ผู้ใช้ทำข้อผิดพลาดโดยใส่วิธีการและให้คำแนะนำตามที่จำเป็น แม้ว่าส่วนนี้จะกล่าวถึงวิธีที่ HTML เพียงอย่างเดียวสามารถใช้สำหรับการตรวจสอบความถูกต้องฝั่งไคลเอ็นต์ได้ แต่การตรวจสอบจะต้องเป็นฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ การตรวจสอบความถูกต้องอาจทำในรูปแบบที่ไม่ก่อให้เกิดความรำคาญระหว่างการกรอกแบบฟอร์ม เช่น การเพิ่มเครื่องหมายถูกเมื่อค่าถูกต้อง อย่าแสดงข้อความแสดงข้อผิดพลาดก่อนที่การควบคุมแบบฟอร์มจะเสร็จสมบูรณ์ หากผู้ใช้ทำผิดพลาด ให้แจ้งให้ผู้ใช้ทราบว่าข้อผิดพลาดนั้นเกิดจากที่ไหนและสิ่งใดผิดพลาด
ในการออกแบบแบบฟอร์ม คุณต้องตระหนักว่าไม่ใช่ทุกคนเหมือนคุณ บางคนอาจมีตัวอักษรตัวเดียวเป็นนามสกุล (หรือไม่มีนามสกุลเลย) อาจไม่มีรหัสไปรษณีย์ อาจมีที่อยู่แบบ 3 บรรทัด อาจไม่มีที่อยู่ บุคคลเหล่านั้นอาจกำลังดูแบบฟอร์มเวอร์ชันแปลของคุณ
ตัวควบคุมแบบฟอร์ม ป้ายกำกับ และข้อความแสดงข้อผิดพลาดควรมองเห็นได้บนหน้าจอ มีความถูกต้องและมีความหมาย ตรวจสอบได้แบบเป็นโปรแกรม และเชื่อมโยงแบบเป็นโปรแกรมกับองค์ประกอบหรือกลุ่มแบบฟอร์มที่เหมาะสม คุณสามารถใช้แอตทริบิวต์ autocomplete เพื่อให้กรอกแบบฟอร์มได้เร็วขึ้นและปรับปรุงการช่วยเหลือพิเศษ
HTML มีเครื่องมือทั้งหมดที่ช่วยให้เข้าถึงการควบคุมแบบฟอร์มพื้นฐานได้ ยิ่งองค์ประกอบหรือกระบวนการของฟอร์มเป็นแบบอินเทอร์แอกทีฟมากเท่าไหร่ คุณก็ยิ่งต้องให้ความสนใจเรื่องการช่วยเหลือพิเศษในส่วนที่เกี่ยวกับการจัดการโฟกัส การตั้งค่าและอัปเดตชื่อ บทบาท และค่า ARIA ตามความจำเป็นและประกาศแบบเรียลไทม์ของ ARIA ตามที่จำเป็น แต่อย่างที่เราได้เรียนรู้ไปแล้ว การใช้ HTML เพียงอย่างเดียวจะช่วยให้คุณบรรลุเป้าหมายด้านการเข้าถึงและความถูกต้องได้อย่างยาวนานโดยไม่ต้องเปลี่ยนไปใช้ ARIA หรือ JavaScript
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับฟอร์ม
คุณจะทำให้ปุ่มตัวเลือกเป็นส่วนหนึ่งของกลุ่มเดียวกันได้อย่างไร
name เดียวกันทั้งหมดid เดียวกันทั้งหมดองค์ประกอบ HTML ใดที่ใช้เพื่อแจ้งให้ผู้ใช้ทราบว่าช่องฟอร์มนี้ใช้ทำอะไร
<h1><title><label>