เมื่อขยายความรู้ HTML หนึ่งในสิ่งที่ต้องพิจารณาคือสิ่งที่เราสร้างจะส่งผลต่อประสบการณ์ผู้ใช้อย่างไร สิ่งหนึ่งคือการจัดระเบียบหน้าเว็บ หน้าที่擁擠เกินไปจะส่งผลต่อการที่ลูกค้าตัดสินใจอยู่ต่อและทำสิ่งที่ตั้งใจไว้
หนึ่งในวิธีจัดระเบียบฟอร์มคือการ nest radio buttons หรือ checkboxes เข้า dropdown ให้ผู้ใช้เลื่อนหาตัวเลือก
บทความนี้เรียนรู้การใช้ HTML สร้าง <select> dropdown เป็นองค์ประกอบฟอร์ม หากต้องการดู navbar dropdown menu โปรดดู CSS Dropdowns
โครงสร้างพื้นฐาน
โครงสร้างพื้นฐานของ HTML dropdown menu คือเอลิเมนต์ <select> ที่ตั้งชื่อและระบุกลุ่ม และแท็ก <option> หลายตัวที่เป็นเนื้อหาของ dropdown
เริ่มต้นสร้างโครงสร้าง dropdown เขียน <select> พร้อม id และ name "baseball-teams" id ช่วยปรับสไตล์ name ช่วยตอนใช้ข้อมูลฟอร์มหลังเลือกทีมและส่งไปเซิร์ฟเวอร์
<!DOCTYPE html> <html> <body> <h1>The select element</h1> <p>The select element is used to create a drop-down list.</p> <form onsubmit=handleSubmit(event)> <label for="baseball-teams">Choose a baseball team:</label> <select id="baseball-teams" name="baseball-teams"> <option selected value="">Select Team</option> <option value="Arizona Diamondbacks">Arizona Diamondbacks</option> <option value="Atlanta Braves">Atlanta Braves</option> <option value="Baltimore Orioles">Baltimore Orioles</option> <option value="Boston Red Sox">Boston Red Sox</option> <option value="Chicago Cubs">Chicago Cubs</option> <option value="Chicago White Sox">Chicago White Sox</option> <option value="Cincinnati Reds">Cincinnati Reds</option> <option value="Cleveland Indians">Cleveland Indians</option> <option value="Colorado Rockies">Colorado Rockies</option> <option value="Detroit Tigers">Detroit Tigers</option> <option value="Houston Astros">Houston Astros</option> <option value="Kansas City Royals">Kansas City Royals</option> <option value="LA Angels">Los Angeles Angels of Anaheim</option> <option value="LA Dodgers">Los Angeles Dodgers</option> <option value="Miami Marlins">Miami Marlins</option> <option value="Milwaukee Brewers">Milwaukee Brewers</option> <option value="Minnesota Twins">Minnesota Twins</option> <option value="NY Mets">New York Mets</option> <option value="NY Yankees">New York Yankees</option> <option value="Oakland Athletics">Oakland Athletics</option> <option value="Philadelphia Phillies">Philadelphia Phillies</option> <option value="Pittsburgh Pirates">Pittsburgh Pirates</option> <option value="San Diego Padres">San Diego Padres</option> <option value="San Francisco Giants">San Francisco Giants</option> <option value="Seattle Mariners">Seattle Mariners</option> <option value="STL">St. Louis Cardinals</option> <option value="Tampa">Tampa Bay Rays</option> <option value="TX">Texas Rangers</option> <option value="Toronto" value="LA Angels">Toronto Blue Jays</option> <option value="Washington">Washington Nationals</option> </select> <br><br> <input type="submit" value="Submit"> </form> <p>Click the "Submit" button and the form's data will be shown below.</p> <h3></h3> <script async defer> const handleSubmit = (event) => { event.preventDefault() let select = document.getElementById('baseball-teams'); let option = select.options[select.selectedIndex]; let result = document.querySelector('h3'); result.textContent = option.text; } </script> </body> </html>
รันโค้ด จะเห็น dropdown พื้นฐาน option แรกบอกค่าของ dropdown ตัวเลือก ในกรณีนี้เลือกทีมเบสบอล คลิก dropdown จะเห็นค่าทีมทุกลีก
เมื่อเลือกค่า จะ assign ให้ selected index ของ <select> นี่คือสิ่งที่ช่วย logic เมื่อตัดสินใจทำอะไรกับข้อมูล การรู้ name และ value ของ selected index สำคัญมากหากต้องการใช้ข้อมูลนั้น
คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับการจัดการข้อมูลฟอร์มตอนเรียน backend ไม่ต้องกังวลเรื่อง JavaScript ท้ายเอกสาร ให้เน้นแค่การทำให้ dropdown ปรากฏบนหน้า – <select> และ <option>
สรุป
บทความนี้เรียนรู้การสร้าง dropdown menu สำหรับฟอร์ม ใช้ <select> และ <option> ให้ผู้ใช้เลือกจากหลายตัวเลือก เมื่อเก่งพื้นฐานแล้ว ลองดู <optgroup> ด้วย!
