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