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