ฟอร์ม

เว็บไซต์และแอปพลิเคชันส่วนใหญ่มีเว็บฟอร์ม เว็บไซต์ตลกๆ อย่าง DoWebsites WantToLookExactlyTheSameInEveryBrowser.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> ปุ่ม "ส่ง" สามารถเขียนโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

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

แอตทริบิวต์ขององค์ประกอบ <form> ตั้งค่าเมธอด HTTP โดยใช้ แบบฟอร์มที่ส่งและ URL ที่ประมวลผลการส่งแบบฟอร์ม ได้ คุณสามารถส่ง ประมวลผลแบบฟอร์ม และ หน้าเว็บใหม่สามารถโหลดได้โดยไม่ต้องมี JavaScript ใดๆ องค์ประกอบ <form> คือสิ่งที่ทรงพลัง

องค์ประกอบ <form> action และ method ค่าแอตทริบิวต์จะกำหนด 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>

เลือกนักเรียน: ฮูเวอร์ สุขดีป์ ผิวเรียบเนียน แมคโทสต์เฟซ Toasty

เลือก "Hover Sukhdeep" (หรือไม่ทำอะไรเลย เนื่องจากเบราว์เซอร์แสดงขึ้น ดังนั้นจึงเลือกค่าตัวเลือกแรกโดยค่าเริ่มต้น) จากนั้นคลิกปุ่ม "ส่ง" จะโหลดหน้านี้ซ้ำโดยตั้งค่า URL เป็น

https://web.dev/learn/html/forms?student=hoover

เนื่องจากตัวเลือกที่ 2 ไม่มีแอตทริบิวต์ value ระบบจึงส่งข้อความด้านในเป็นค่า เลือก "ผสมผสานอย่างนุ่มนวล" การคลิกปุ่มส่งจะเป็นการโหลดหน้านี้ซ้ำ โดยตั้งค่า 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 ปุ่มตัวเลือกนี้จะตรงกับคลาสเทียมของ CSS :default แม้ว่าผู้ใช้จะเลือกวิทยุอื่นก็ตาม ปุ่มตัวเลือกที่เลือกไว้ในปัจจุบันตรงกับ :checked Pseudo-class

หากผู้ใช้ต้องเลือกตัวควบคุมวิทยุจากกลุ่มปุ่มตัวเลือก ให้เพิ่มแอตทริบิวต์ 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">

ชื่อของคุณ

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

หากต้องการระบุป้ายกํากับโดยนัย ให้ใส่ตัวควบคุมแบบฟอร์มระหว่างแท็ก <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">

การตรวจสอบในตัว

ขอย้ำอีกครั้งว่า HTML จะป้องกันไม่ให้ส่งแบบฟอร์มที่มีค่าไม่ถูกต้องได้ โดยไม่รวม JavaScript ใดๆ

มีตัวเลือก CSS บางรายการที่ตรงกับการควบคุมแบบฟอร์มโดยอิงตามแอตทริบิวต์ HTML ที่มีอยู่ ซึ่งรวมถึง :required และ :optional หากบูลีน required มีการตั้งค่าหรือไม่ :default หาก checked มีการฮาร์ดโค้ด และ :enabled หรือ :disabled โดยขึ้นอยู่กับว่าองค์ประกอบนั้นเป็นแบบอินเทอร์แอกทีฟหรือไม่ และ disabled ที่มีอยู่ Pseudoclass ของ :read-write จะจับคู่องค์ประกอบที่มี ตั้งค่า contenteditable และ ตัวควบคุมแบบฟอร์มที่แก้ไขได้โดยค่าเริ่มต้น เช่น ประเภทอินพุต number, password และ text (แต่ไม่ใช่ช่องทำเครื่องหมาย ปุ่มตัวเลือก หรือประเภท hidden เป็นต้น) หากองค์ประกอบที่เขียนได้ปกติมี readonly ที่ตั้งค่าไว้ ก็จะตรงกับ :read-only แทน

ขณะที่ผู้ใช้ป้อนข้อมูลลงในตัวควบคุมแบบฟอร์ม ตัวเลือก UI ของ CSS ซึ่งรวมถึง :valid :invalid, :in-range และ :out-of-range จะสลับเป็นเปิดหรือปิดโดยขึ้นอยู่กับรัฐ เมื่อผู้ใช้ ออกจากตัวควบคุมแบบฟอร์ม ไม่ว่าจะเป็น :user-invalid ที่ยังไม่รองรับโดยสมบูรณ์หรือ Pseudo-Class จะตรงกัน :user-valid

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

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

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

CSS ที่นำไปใช้จะได้รับการอัปเดตอย่างต่อเนื่องตามสถานะปัจจุบันของ UI ตัวอย่างเช่น เมื่อคุณรวมประเภทอินพุตที่มี ข้อจำกัด เช่น email, number, url และประเภทวันที่ หากค่าไม่ใช่ค่าว่าง (ไม่ว่างเปล่า) และค่าปัจจุบัน ไม่ใช่อีเมล, หมายเลข, URL, วันที่ หรือเวลาที่ถูกต้อง :invalid CSS Pseudo-class จะถือว่าตรงกัน ค่าคงที่นี้ การอัปเดตแตกต่างจากการตรวจสอบข้อจำกัด HTML ในตัว ซึ่งจะเกิดขึ้นเมื่อผู้ใช้พยายามส่งแบบฟอร์มเท่านั้น

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

<select> มีค่าเริ่มต้นทำให้แอตทริบิวต์ required ไม่จำเป็น แทนที่จะระบุแอตทริบิวต์ value ในแต่ละตัวเลือก ค่าเริ่มต้นจะเป็นข้อความด้านใน

ปุ่มส่งที่ส่วนท้ายจะตั้งค่าเมธอดของแบบฟอร์มเป็น POST เมื่อคลิก ระบบจะตรวจสอบความถูกต้องของแต่ละค่า หากทั้งหมด ถูกต้อง ระบบจะส่งข้อมูลในแบบฟอร์ม กล่องโต้ตอบจะปิด และหน้าเว็บอาจเปลี่ยนเส้นทางไปยัง thankyou.php ซึ่งเป็น URL การดำเนินการ ถ้ามีค่าใดขาดหายไป หรือค่าตัวเลขมีขั้นตอนไม่ตรงกันหรืออยู่นอกช่วง ข้อความแสดงข้อผิดพลาดที่เบราว์เซอร์กำหนดซึ่งเกี่ยวข้องจะปรากฏขึ้น ระบบจะไม่ส่งแบบฟอร์มและกล่องโต้ตอบจะไม่ปิด คุณปรับแต่งข้อความแสดงข้อผิดพลาดเริ่มต้นได้ด้วยvalidityState.setCustomValidity('message here') โปรดทราบว่าถ้าคุณตั้งข้อความที่กำหนดเอง ข้อความนั้นจะต้องตั้งค่าเป็นสตริงว่างเปล่าอย่างชัดเจนเมื่อทุกอย่าง ถูกต้อง มิฉะนั้นระบบจะไม่ส่งแบบฟอร์ม

ข้อควรพิจารณาอื่นๆ

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

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

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

HTML มีเครื่องมือทั้งหมดที่ช่วยให้สามารถเข้าถึงการควบคุมแบบฟอร์มพื้นฐาน ยิ่งองค์ประกอบแบบฟอร์มหรือกระบวนการมีการโต้ตอบมาก ต้องให้ความสำคัญกับการช่วยเหลือพิเศษมากขึ้นในด้านการจัดการโฟกัส การตั้งค่า และการอัปเดตชื่อ บทบาท และรายการ ARIA ในกรณีที่จำเป็น รวมถึงประกาศแบบ ARIA แบบสดตามความจำเป็น แต่อย่างที่เราได้เรียนรู้ไปแล้วเมื่อใช้ HTML เพียงอย่างเดียว คุณสามารถ ยาวไปถึงเป้าหมายการช่วยเหลือพิเศษและความถูกต้องโดยไม่ต้องอาศัย ARIA หรือ JavaScript

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

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