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