ฟอร์ม

เว็บไซต์และแอปพลิเคชันส่วนใหญ่มีเว็บฟอร์ม เว็บไซต์ล้อเล่น เช่น DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com อาจไม่มีแบบฟอร์ม แต่แม้แต่ MachineLearningWorkshop.com (MLW) ซึ่งเริ่มต้นมาจากมุกตลกวันโกหกก็ยังต้องมีแบบฟอร์ม แม้ว่าจะเป็นแบบฟอร์มปลอมก็ตาม "คำกระตุ้นให้ดำเนินการ" หลักของ MLW คือแบบฟอร์มการลงทะเบียนสำหรับเครื่องจักรเพื่อลงชื่อสมัครเข้าร่วมเวิร์กช็อป แบบฟอร์มนี้อยู่ในองค์ประกอบ <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> ได้ แอตทริบิวต์ 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 จะยกเลิกการเลือกที่ทำในกลุ่มที่ 1 ที่มี name เดียวกัน

ระบบจะส่ง name พร้อมกับ value ของปุ่มตัวเลือกที่เลือกไปพร้อมกับแบบฟอร์ม ตรวจสอบว่าปุ่มตัวเลือกแต่ละปุ่มมี value ที่เกี่ยวข้อง (และมักจะไม่ซ้ำกัน) ระบบจะไม่ส่งค่าของปุ่มตัวเลือกที่ไม่ได้เลือก

คุณมีกลุ่มตัวเลือกในหน้าเว็บกี่กลุ่มก็ได้ โดยแต่ละกลุ่มจะทำงานแยกกัน ตราบใดที่แต่ละกลุ่มมี name ที่เฉพาะเจาะจงสำหรับกลุ่มนั้นๆ

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

หากผู้ใช้ต้องเลือกตัวควบคุมวิทยุจากกลุ่มปุ่มตัวเลือก ให้เพิ่มแอตทริบิวต์ required ลงในตัวควบคุมอย่างน้อย 1 รายการ การใส่ required ในปุ่มตัวเลือกในกลุ่มจะทำให้ต้องเลือกตัวเลือกเพื่อส่งแบบฟอร์ม แต่ไม่จำเป็นต้องเป็นปุ่มตัวเลือกที่มีแอตทริบิวต์ที่เลือกให้ถูกต้อง นอกจากนี้ ให้ระบุใน <legend> ให้ชัดเจนว่าต้องมีการควบคุมแบบฟอร์ม เราจะอธิบายการติดป้ายกำกับกลุ่มปุ่มตัวเลือกพร้อมกับปุ่มแต่ละปุ่มในภายหลัง

ช่องทำเครื่องหมาย

ช่องทําเครื่องหมายทั้งหมดภายในกลุ่มต้องมี name เดียวกัน เฉพาะช่องทําเครื่องหมายที่เลือกเท่านั้นที่จะมีnameและvalueส่งไปกับแบบฟอร์ม หากคุณเลือกช่องทําเครื่องหมายหลายช่องที่มีชื่อเดียวกัน ระบบจะส่งชื่อเดียวกันพร้อมค่าที่แตกต่างกัน (หวังว่าจะเป็นเช่นนั้น) หากคุณมีตัวควบคุมแบบฟอร์มหลายรายการที่มีชื่อเดียวกัน แม้ว่าจะไม่ใช่ช่องทําเครื่องหมายทั้งหมด ระบบจะส่งตัวควบคุมทั้งหมดโดยคั่นด้วยเครื่องหมายแอมเพอร์แซนด์

หากไม่ได้ใส่ value ในช่องทําเครื่องหมาย ค่าของช่องทําเครื่องหมายที่เลือกจะเป็น on โดยค่าเริ่มต้น ซึ่งอาจไม่เป็นประโยชน์ หากคุณมีช่องทําเครื่องหมาย 3 ช่องชื่อ chk และเลือกทั้ง 3 ช่องไว้ ระบบจะไม่สามารถถอดรหัสการส่งแบบฟอร์มได้

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 ด้วย เมื่อปิดใช้ fieldset ระบบจะปิดใช้ตัวควบคุมแบบฟอร์มที่ฝังอยู่ทั้งหมด แอตทริบิวต์ 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 หรือไม่ คลาสจำลอง :read-write จะจับคู่องค์ประกอบกับชุด contenteditable และตัวควบคุมแบบฟอร์มที่แก้ไขได้โดยค่าเริ่มต้น เช่น ประเภทอินพุต number, password และ text (แต่ไม่ใช่ช่องทำเครื่องหมาย ปุ่มตัวเลือก หรือประเภท hidden และอื่นๆ) หากองค์ประกอบที่เขียนได้ปกติมีการตั้งค่าแอตทริบิวต์ readonly ระบบจะจับคู่กับ :read-only แทน

เมื่อผู้ใช้ป้อนข้อมูลลงในตัวควบคุมแบบฟอร์ม ตัวเลือก UI ของ CSS ซึ่งรวมถึง :valid, :invalid, :in-range และ :out-of-range จะเปิดและปิดตามสถานะ เมื่อผู้ใช้ออกจากตัวควบคุมแบบฟอร์ม ระบบจะจับคู่กับคลาสจำลอง :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 CSS Pseudo-Class จะตรงกัน การอัปเดตอย่างต่อเนื่องนี้แตกต่างจากการตรวจสอบข้อจำกัดของ HTML ในตัว ซึ่งจะเกิดขึ้นเมื่อผู้ใช้พยายามส่งแบบฟอร์มเท่านั้น

การตรวจสอบข้อจำกัดในตัวเกี่ยวข้องกับข้อจำกัดที่ตั้งค่าไว้ด้วยแอตทริบิวต์ HTML เท่านั้น แม้ว่าคุณจะจัดรูปแบบองค์ประกอบตามคลาสจำลอง :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

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับแบบฟอร์ม