ช่วยผู้ใช้ป้อนข้อมูลในแบบฟอร์ม

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

องค์ประกอบแบบฟอร์มคืออะไร

คุณจะเห็นองค์ประกอบ <input> 2 รายการ ได้แก่ <input type="text"> และ <input type="file"> เหตุใดหน้าเหล่านั้นจึงดูแตกต่างออกไป

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

ป้ายกำกับสำหรับองค์ประกอบแบบฟอร์ม

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

หากต้องการอธิบายการควบคุมแบบฟอร์ม ให้ใช้ <label> สำหรับการควบคุมแบบฟอร์มแต่ละรายการ

<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">

แอตทริบิวต์ for ในองค์ประกอบป้ายกำกับตรงกับแอตทริบิวต์ id ในอินพุต

กำลังบันทึกข้อมูลจากผู้ใช้

ระบบใช้องค์ประกอบ <input> เพื่อรวบรวมอินพุตจากผู้ใช้อย่างชื่อบอก

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

ดังที่ได้กล่าวไปก่อนหน้านี้ แอตทริบิวต์ id จะเชื่อมต่อ <input> กับ <label> ในตัวอย่างนี้ แอตทริบิวต์ชื่อและประเภทจะเป็นอย่างไร

แอตทริบิวต์ชื่อ

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

ลองเปลี่ยน ชื่อของตัวควบคุมแบบฟอร์มเป็น hill หากคุณทำอย่างถูกต้องและส่งแบบฟอร์มแล้ว hill จะปรากฏใน URL

ประเภทอินพุต

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

เมื่อใช้ type="checkbox" เบราว์เซอร์จะแสดงช่องทำเครื่องหมายแทนช่องข้อความ ช่องทำเครื่องหมายมาพร้อมกับแอตทริบิวต์เพิ่มเติมด้วย คุณตั้งค่าแอตทริบิวต์ checked ให้แสดงเป็น "เลือกไว้" ได้

มีประเภทอื่นๆ อีกมากมายให้คุณเลือก เราจะดูรายละเอียดในโมดูลภายหลัง

อนุญาตให้มีข้อความหลายบรรทัด

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

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

เลือกจากรายการตัวเลือก

คุณจะให้รายการตัวเลือกแก่ผู้ใช้อย่างไร คุณใช้องค์ประกอบ <select> เพื่อดำเนินการดังกล่าวได้

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

ขั้นแรก ให้เพิ่มองค์ประกอบ <select> คุณเชื่อมต่อการควบคุมแบบฟอร์มกับ <label> ด้วยแอตทริบิวต์ id ได้เช่นเดียวกับการควบคุมแบบฟอร์มอื่นๆ ทั้งหมด และตั้งชื่อที่ไม่ซ้ำโดยใช้แอตทริบิวต์ name

อยู่ระหว่างแท็กเริ่มต้นและแท็กสิ้นสุดขององค์ประกอบ <select> คุณสามารถเพิ่มองค์ประกอบ <option> ได้หลายรายการ โดยแต่ละรายการจะแสดงการเลือก 1 รายการ

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

หากคุณส่งแบบฟอร์มโดยใช้ <select> นี้โดยไม่เปลี่ยนแปลงการเลือก คำขอจะรวม color=orange แต่เบราว์เซอร์จะรู้ได้อย่างไรว่าควรใช้ตัวเลือกใด

เบราว์เซอร์จะใช้ตัวเลือกแรกในรายการ ยกเว้นในกรณีต่อไปนี้

• องค์ประกอบ <option> 1 รายการมีแอตทริบิวต์ selected
• ผู้ใช้เลือกตัวเลือกอื่น

เลือกตัวเลือกล่วงหน้า

คุณเลือกตัวเลือกไว้ล่วงหน้า 1 รายการได้ด้วยแอตทริบิวต์ selected ตัวเลือกนี้จะกลายเป็นค่าเริ่มต้น ไม่ว่าจะกำหนดลำดับขององค์ประกอบ <option> ตามลำดับใดก็ตาม

การควบคุมแบบฟอร์มการจัดกลุ่ม

บางครั้งคุณต้องจัดกลุ่มการควบคุมแบบฟอร์ม คุณใช้องค์ประกอบ <fieldset> เพื่อดำเนินการดังกล่าวได้

<fieldset>
    <legend>What is your favorite web technology</legend>

    <label for="html">HTML</label>
    <input type="radio" name="webfeature" value="html" id="html">

    <label for="css">CSS</label>
    <input type="radio" name="webfeature" value="css" id="css">
</fieldset>

คุณสังเกตเห็นองค์ประกอบ <legend> ภายในองค์ประกอบ <fieldset> ไหม คุณคิดว่าโปรไฟล์นี้มีไว้เพื่ออะไร

หากคำตอบคือ "เพื่ออธิบายกลุ่มของการควบคุมแบบฟอร์ม" แสดงว่าคุณตอบถูกแล้ว

องค์ประกอบ <fieldset> ทุกรายการต้องมีองค์ประกอบ <legend> เหมือนการควบคุมแบบฟอร์มทุกอย่างต้องการเอลิเมนต์ <label> ที่เชื่อมโยง นอกจากนี้ <legend> ต้องเป็นองค์ประกอบแรกใน <fieldset> หลังองค์ประกอบ <legend> คุณจะกำหนดตัวควบคุมแบบฟอร์มที่ควรเป็นส่วนหนึ่งของกลุ่มได้

การส่งแบบฟอร์ม

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

ตัวเลือกแรกคือการใช้องค์ประกอบ <button>

<button>Submit</button>

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

คุณยังใช้องค์ประกอบ <input> กับ type="submit" แทนองค์ประกอบ <button> ได้ด้วย ข้อมูลที่ป้อนมีหน้าตาและทำงานเหมือนกับ <button> แทนที่จะใช้องค์ประกอบ <label> เพื่ออธิบาย <input> ให้ใช้แอตทริบิวต์ value แทน

<input type="submit" value="Submit">

นอกจากนี้ คุณยังสามารถส่งแบบฟอร์มโดยใช้คีย์ Enter เมื่อโฟกัสที่ช่องของแบบฟอร์ม

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

ทดสอบความรู้ขององค์ประกอบแบบฟอร์ม

แหล่งข้อมูล

• องค์ประกอบของป้ายกำกับ
• องค์ประกอบอินพุต
• องค์ประกอบพื้นที่ข้อความ
• องค์ประกอบการเลือก
• องค์ประกอบชุดฟิลด์
• องค์ประกอบปุ่ม