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

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

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

คุณจะเห็นองค์ประกอบ <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

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

การควบคุมแบบฟอร์มมีหลายประเภท ซึ่งทั้งหมดมีฟีเจอร์ในตัวที่มีประโยชน์และใช้งานได้ในเบราว์เซอร์และแพลตฟอร์มต่างๆ เบราว์เซอร์จะแสดงผลอินเทอร์เฟซผู้ใช้ที่แตกต่างกัน แสดงแป้นพิมพ์บนหน้าจอที่แตกต่างกัน ใช้กฎการตรวจสอบที่แตกต่างกัน และอื่นๆ ตามแอตทริบิวต์ 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> หลายรายการได้ โดยแต่ละรายการจะแสดงถึงการเลือก 1 รายการ แทรกไว้ระหว่างแท็กเริ่มต้นและสิ้นสุดขององค์ประกอบ <select><option>

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

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

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

  • องค์ประกอบ <option> รายการหนึ่งมีแอตทริบิวต์ 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> ให้ใช้แอตทริบิวต์ value แทนการใช้องค์ประกอบ <label> เพื่ออธิบาย <input>

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

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

ทดสอบความเข้าใจ

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

คุณเชื่อมต่อ <label> กับตัวควบคุมแบบฟอร์มได้อย่างไร

for='color' ใน <label> และ name='color' ใน <input>
ลองอีกครั้งนะ
for='color' ใน <label> และ id='color' ใน <input>
ถูกต้อง
id='color' ใน <label> และ for='color' ใน <input>
ลองอีกครั้งนะ
name='color' ใน <label> และ for='color ใน <input>
ลองอีกครั้งนะ

คุณใช้การควบคุมแบบฟอร์มหลายบรรทัดกับอะไร

องค์ประกอบ <input> ที่มี type='multi-line'
ลองอีกครั้งนะ
องค์ประกอบ <text>
ลองอีกครั้งนะ
องค์ประกอบ <textarea>
🎉
องค์ประกอบ <input> ที่มี type='long'
ลองอีกครั้งนะ

คุณส่งแบบฟอร์มได้อย่างไร

การคลิกองค์ประกอบ <button>
ถูกต้อง นี่เป็นตัวเลือกหนึ่ง
การใช้แป้น Enter
ถูกต้อง นี่เป็นตัวเลือกหนึ่ง
การคลิกองค์ประกอบ <input> ที่มี type='submit'
ถูกต้อง นี่เป็นตัวเลือกหนึ่ง

แหล่งข้อมูล