หากต้องการให้แบบฟอร์มเป็นแบบอินเทอร์แอกทีฟ คุณต้องเพิ่มองค์ประกอบแบบฟอร์ม ซึ่งใช้สำหรับป้อนและเลือกข้อมูล องค์ประกอบต่างๆ ที่อธิบายการควบคุม องค์ประกอบที่จัดกลุ่มช่อง และปุ่มสำหรับส่งแบบฟอร์ม
องค์ประกอบแบบฟอร์มคืออะไร
คุณจะเห็นองค์ประกอบ <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
ประเภทอินพุต
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
- ผู้ใช้เลือกตัวเลือกอื่น
เลือกตัวเลือกล่วงหน้า
คุณเลือกตัวเลือกไว้ล่วงหน้า 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>
แทนที่จะใช้องค์ประกอบ <label>
เพื่ออธิบาย
<input>
ให้ใช้แอตทริบิวต์ value
แทน
<input type="submit" value="Submit">
นอกจากนี้ คุณยังสามารถส่งแบบฟอร์มโดยใช้คีย์ Enter
เมื่อโฟกัสที่ช่องของแบบฟอร์ม
ตรวจสอบความเข้าใจ
ทดสอบความรู้ขององค์ประกอบแบบฟอร์ม
คุณจะเชื่อมต่อ <label>
กับตัวควบคุมแบบฟอร์มได้อย่างไร
for='color'
ใน <label>
และ id='color'
ใน <input>
id='color'
ใน <label>
และ for='color'
ใน <input>
name='color'
ใน <label>
และ for='color
ใน <input>
for='color'
ใน <label>
และ name='color'
ใน <input>
คุณใช้อะไรสําหรับการควบคุมแบบฟอร์มหลายบรรทัด
<input>
ที่มี type='long'
<text>
<input>
ที่มี type='multi-line'
<textarea>
คุณจะส่งแบบฟอร์มได้อย่างไร
<input>
ที่มี type='submit'
Enter
<button>