เมื่อเราเพิ่มพูนความรู้เกี่ยวกับ HTML สิ่งหนึ่งที่เราต้องเริ่มพิจารณาก็คือสิ่งที่เราสร้างจะส่งผลต่อประสบการณ์ของผู้ที่ใช้เพจของเราอย่างไร สิ่งหนึ่งที่เราต้องพิจารณาก็คือการจัดระเบียบหน้าเว็บจะเปลี่ยนแปลงประสบการณ์ได้อย่างไร เพจที่รกเกินไปจะส่งผลอย่างแน่นอนไม่ว่าลูกค้าจะตัดสินใจอยู่ในเพจและทำสิ่งที่ตั้งใจจะทำในขณะที่อยู่บนไซต์หรือไม่
วิธีหนึ่งที่เราสามารถจัดระเบียบแบบฟอร์มบนไซต์ของเราได้คือการซ้อนสิ่งที่จะเป็นอินพุตของปุ่มตัวเลือกหรือช่องทำเครื่องหมายลงในดรอปดาวน์ของตัวเอง เพื่อให้ผู้ใช้สามารถเลื่อนดูรายการเพื่อค้นหาตัวเลือกหนึ่งตัวเลือก
ในบทความนี้ เราจะเรียนรู้วิธีใช้ประโยชน์จาก HTML เพื่อให้เราสามารถสร้าง <select> ดรอปดาวน์ที่จะใช้เป็นองค์ประกอบของแบบฟอร์ม หากคุณต้องการดูวิธีการสร้างเมนูดรอปดาวน์ของแถบนำทาง โปรดชำระเงิน CSS Dropdowns
โครงสร้างพื้นฐาน
โครงสร้างพื้นฐานของเมนูแบบเลื่อนลง HTML คือ <select> องค์ประกอบที่ตั้งชื่อและระบุการจัดกลุ่มและหลาย <option> แท็กที่ประกอบขึ้นเป็นเนื้อหาของดรอปดาวน์ของคุณ
ในการเริ่มต้น มาสร้างโครงกระดูกของดรอปดาวน์นั้นกัน เขียน <select> องค์ประกอบที่มีรหัสและชื่อ "ทีมเบสบอล" id จะช่วยเราได้ถ้าเราต้องการปรับสไตล์ แอตทริบิวต์ชื่อช่วยเราเมื่อเราต้องการใช้ข้อมูลแบบฟอร์มหลังจากเลือกทีมแล้วและเราต้องการส่งข้อมูลไปยังเซิร์ฟเวอร์
<!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>
เมื่อรันโค้ดของคุณ ณ จุดนี้ คุณจะเห็นเมนูแบบเลื่อนลงขั้นพื้นฐาน ตัวเลือกแรกจะบอกว่าค่าของตัวเลือกดรอปดาวน์คืออะไร ในกรณีนี้พวกเขาต้องการให้เราเลือกทีมเบสบอล คลิกที่ดรอปดาวน์แล้วคุณจะเห็นค่าของทุกทีมในเมเจอร์ลีก
เมื่อคุณเลือกค่า มันจะกำหนดค่าให้กับดัชนีที่เลือกของ <select> . นี่คือสิ่งที่จะช่วยให้คุณมีตรรกะประเภทใดก็ได้เมื่อคุณตัดสินใจว่าจะทำอย่างไรกับข้อมูล การรู้ชื่อและค่าของดัชนีที่เลือกนั้นสำคัญมากหากคุณต้องการทำอะไรกับข้อมูลนั้น
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสิ่งที่ควรทำกับข้อมูลในแบบฟอร์มเมื่อคุณศึกษาแบ็กเอนด์ - ไม่ต้องกังวลกับสิ่งที่เกิดขึ้นกับ JavaScript ที่ด้านล่างของเอกสาร เพียงกังวลว่าต้องทำอย่างไรจึงจะได้ดรอปดาวน์ในหน้า – <select> และ <option> องค์ประกอบ
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
บทสรุป
ในบทความนี้ เราได้เรียนรู้เกี่ยวกับวิธีสร้างเมนูดรอปดาวน์สำหรับแบบฟอร์ม ใช้ <select> และ <option> องค์ประกอบเพื่อให้ผู้ใช้ของคุณมีทางเลือกในการเลือกจากหลายตัวเลือก เมื่อคุณเข้าใจพื้นฐานที่นี่แล้ว ให้ดูว่า <optgroup> . คืออะไร ทำ!
