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