แท็ก HTML ทวีคูณ ตัวเลือกต่างๆ แท็ก
กล่องการเลือกเป็นส่วนสำคัญของเว็บฟอร์มต่างๆ ช่องการเลือกช่วยให้คุณสามารถยอมรับการป้อนข้อมูลของผู้ใช้และจำกัดตัวเลือกที่ผู้ใช้สามารถเลือกได้เฉพาะกับสิ่งที่คุณได้ระบุไว้
HTML แท็กสร้างองค์ประกอบแบบฟอร์มที่แสดงรายการตัวเลือกที่ผู้ใช้สามารถเลือกหนึ่งหรือหลายรายการ องค์ประกอบระบุตัวเลือกที่ปรากฏในกล่องการเลือก
บทแนะนำนี้จะกล่าวถึงวิธีใช้แท็ก HTML
แบบฟอร์ม HTML
แบบฟอร์มเป็นส่วนสำคัญของเว็บไซต์จำนวนมาก และอนุญาตให้คุณยอมรับข้อมูลจากผู้ใช้ซึ่งคุณสามารถดำเนินการบนเว็บไซต์ของคุณได้ ตัวอย่างเช่น หากคุณกำลังออกแบบเว็บไซต์สำหรับร้านกาแฟ คุณอาจต้องการสร้างแบบฟอร์มที่รับคำติชมจากลูกค้า
ใน HTML tag ใช้ในการประกาศแบบฟอร์ม จากนั้น คุณสามารถใช้องค์ประกอบ HTML เช่น และเลือกกำหนดข้อมูลที่แบบฟอร์มจะรวบรวม สำหรับบทช่วยสอนนี้ เราจะเน้นที่ และวิธีการใช้เก็บข้อมูลในแบบฟอร์ม
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแบบฟอร์ม HTML โปรดอ่านคู่มือเริ่มต้นเกี่ยวกับแบบฟอร์ม HTML
HTML
HTML แท็กสร้างรายการที่ผู้ใช้สามารถเลือกหนึ่งหรือหลายตัวเลือก
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
tag สร้างฟิลด์แบบฟอร์ม ซึ่งเมื่อคลิกแล้ว จะแสดงรายการดรอปดาวน์พร้อมตัวเลือกที่ผู้ใช้สามารถเลือกได้
ไวยากรณ์สำหรับ แท็กเป็นดังนี้:
<select></select>
โดยตัวมันเอง แท็กไม่มีตัวเลือก เราจำเป็นต้องใช้ เพื่อกำหนดตัวเลือกที่ปรากฏใน แท็ก.
นี่คือไวยากรณ์สำหรับ แท็ก:
<select> <option value="optionOne">Option One</option> </select>
แท็กปรากฏใน แท็ก ในตัวอย่างนี้ เรายังระบุ ค่า แอตทริบิวต์ด้วย . ของเรา แท็ก.
ใช้เพื่อเก็บค่าข้อมูลที่จะถูกส่งไปยังเซิร์ฟเวอร์หากผู้ใช้เลือกตัวเลือกเฉพาะ ในกรณีนี้ หากผู้ใช้เลือก ตัวเลือกที่หนึ่ง จากรายการ optionOne จะถูกส่งไปยังเซิร์ฟเวอร์
แต่ละ แท็กควรมีแอตทริบิวต์ค่าที่ระบุ
HTML แท็กได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่ที่สำคัญทั้งหมด
เหตุใดคุณจึงควรใช้
การใช้ มีประโยชน์เมื่อคุณต้องการจำกัดค่าที่ผู้ใช้สามารถป้อนลงในฟิลด์แบบฟอร์ม ต่อไปนี้คือตัวอย่างบางส่วนที่แท็ก
- ระบุรายชื่อประเทศที่ผู้ใช้จะเลือก
- ระบุรายการสีที่มีให้เลือกให้กับผู้ใช้
- เพื่อให้ผู้ใช้สามารถเลือกปริมาณของผลิตภัณฑ์ที่ต้องการซื้อได้ (เช่น ระหว่าง 1 ถึง 10)
ในกรณีเหล่านี้ ตัวเลือกมีจำกัด การใช้เมนูแบบเลื่อนลงหมายความว่าคุณจะได้รับการตอบสนองที่เหมาะสมกับโค้ดของคุณ เนื่องจากผู้ใช้ไม่สามารถป้อนค่าใด ๆ ที่ต้องการได้เช่นเดียวกับในช่อง Select ซึ่งคุณอาจคาดไม่ถึง
HTML
สมมติว่าเรากำลังสร้างเว็บฟอร์มสำหรับร้านเบเกอรี่ในท้องถิ่น เราถูกขอให้สร้างแบบฟอร์มที่อนุญาตให้ผู้ใช้สั่งขนมปัง แบบฟอร์มนี้ควรแสดงรายการขนมปังที่ผู้ใช้สามารถเลือกขนมปังได้ ตัวเลือกที่ควรปรากฏคือ:
- สีขาวล้วน
- สีน้ำตาลล้วน
- โฮลเกรน
- แป้งเปรี้ยว
โดยค่าเริ่มต้น สีขาวล้วน ควรเลือก
ในการสร้างเมนูแบบเลื่อนลง HTML เราสามารถใช้โค้ดต่อไปนี้:
<select name="breadType"> <option value="plainWhite" selected>Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
รหัสของเราส่งคืน:
ขั้นแรก เราใช้ เพื่อกำหนดรายการการเลือกของเรา เราระบุ ชื่อ คุณลักษณะซึ่งระบุชื่อของตัวควบคุมรูปแบบที่เลือกและเรากำหนดค่าแอตทริบิวต์ breadType ให้กับแอตทริบิวต์ .
ต่อไป เราใช้ . สี่รายการ แท็กเพื่อสร้างรายการตัวเลือกที่ควรนำเสนอต่อผู้ใช้ แต่ละ . เหล่านี้ แท็กมี ค่า แอตทริบิวต์ที่ระบุ คุณลักษณะนี้เก็บค่าของตัวเลือกที่จะถูกส่งไปยังเซิร์ฟเวอร์เมื่อผู้ใช้ส่งแบบฟอร์ม
ตัวแรก ป้ายที่มีข้อความป้ายแสดง Plain White, ยังมี เลือก แอตทริบิวต์ที่ระบุ ทำให้ Plain White ตัวเลือกที่เลือกเริ่มต้น
เราสามารถให้ผู้ใช้เลือกหลายตัวเลือกในรายการโดยใช้แอตทริบิวต์หลายรายการ:
<select name="breadType" multiple> <option value="plainWhite" selected="">Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
แอตทริบิวต์หลายรายการเป็นคีย์เวิร์ด ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้เครื่องหมายเท่ากับเพื่อกำหนดค่าให้กับแอตทริบิวต์
หากต้องการเลือกหลายค่า ให้กดปุ่ม Ctrl บน Windows หรือปุ่ม Cmd บน Mac ค้างไว้
HTML
แท็กมีแอตทริบิวต์ HTML เฉพาะบางรายการซึ่งสามารถนำไปใช้กับแท็กได้ ดังต่อไปนี้:
แอตทริบิวต์ | คุณค่า | คำอธิบาย |
ออโต้โฟกัส | ออโต้โฟกัส | ให้รายการดรอปดาวน์โฟกัสเมื่อโหลดเอกสาร |
ปิดการใช้งาน | ปิดการใช้งาน | ระบุว่ารายการแบบเลื่อนลงถูกปิดใช้งาน (เพื่อให้ผู้ใช้ไม่สามารถส่งค่าโดยใช้รายการ) |
แบบฟอร์ม | form_id | ระบุรูปแบบที่ |
หลายรายการ | หลายรายการ | อนุญาตให้ผู้ใช้เลือกได้หลายตัวเลือก |
ชื่อ | ชื่อ | ระบุชื่อสำหรับองค์ประกอบ |
จำเป็น | จำเป็น | ระบุว่าต้องกรอกข้อมูลในช่องแบบฟอร์มก่อนส่ง |
ขนาด | หมายเลข | ระบุจำนวนตัวเลือกที่ควรแสดงให้ผู้ใช้เห็น |
บทสรุป
HTML องค์ประกอบสร้างฟิลด์แบบฟอร์มที่แสดงรายการค่าเริ่มต้น ผู้ใช้สามารถเลือกค่าหนึ่งหรือหลายค่าจากรายการ ฟิลด์มีประโยชน์เมื่อคุณต้องการให้ผู้ใช้เลือกค่าจากรายการค่าที่เป็นไปได้ที่กำหนดไว้ล่วงหน้า
บทช่วยสอนนี้กล่าวถึงตัวอย่างว่าคุณสามารถใช้แท็ก
คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโปรแกรม HTML หรือไม่? ดูคู่มือวิธีการเรียนรู้ HTML ของเรา คู่มือนี้มีเคล็ดลับสำคัญเกี่ยวกับวิธีการเรียนรู้ HTML และรายการแหล่งข้อมูลการเรียนรู้ที่จะช่วยคุณสร้างความรู้