Khi chúng ta mở rộng kiến thức về HTML, một trong nhiều điều chúng ta cần bắt đầu xem xét là những gì chúng ta tạo ra sẽ ảnh hưởng đến trải nghiệm như thế nào đối với những người sử dụng trang của chúng ta. Một trong những điều chúng ta cần xem xét là cách tổ chức của một trang web sẽ thay đổi trải nghiệm. Một trang quá lộn xộn chắc chắn sẽ ảnh hưởng đến việc khách hàng có quyết định ở lại trang hay không và hoàn thành những gì họ dự định làm khi ở trên trang web.
Một trong những cách chúng tôi có thể tổ chức các biểu mẫu trên trang web của mình là lồng những gì sẽ là đầu vào của nút radio hoặc hộp kiểm vào menu thả xuống của chính nó để người dùng có thể cuộn qua danh sách để tìm một tùy chọn.
Trong bài viết này, chúng ta sẽ học cách tận dụng HTML để có thể tạo một <select> trình đơn thả xuống sẽ được sử dụng như một phần tử biểu mẫu. Nếu bạn muốn xem trình đơn thả xuống của thanh điều hướng có thể được tạo như thế nào, vui lòng kiểm tra Trình đơn thả xuống CSS.
Cấu trúc cơ bản
Cấu trúc cơ bản của trình đơn HTML thả xuống là <select> phần tử đặt tên và xác định nhóm và nhiều <option> các thẻ tạo nên nội dung của danh sách thả xuống của bạn.
Để bắt đầu, hãy tạo khung của menu thả xuống đó. Viết ra một <select> phần tử có id và tên của "đội bóng chày". Id sẽ giúp chúng ta nếu chúng ta muốn điều chỉnh kiểu dáng. Thuộc tính name giúp chúng tôi khi chúng tôi muốn sử dụng dữ liệu biểu mẫu sau khi một nhóm được chọn và chúng tôi muốn gửi thông tin đến máy chủ.
<!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>
Chạy mã của bạn tại thời điểm này, bạn sẽ thấy một menu thả xuống rất cơ bản. Tùy chọn đầu tiên cho biết giá trị của các tùy chọn thả xuống là bao nhiêu. Trong trường hợp này, họ muốn chúng tôi chọn một đội bóng chày. Nhấp vào menu thả xuống và bạn sẽ thấy các giá trị cho tất cả các đội trong giải đấu lớn.
Khi bạn chọn một giá trị, nó sẽ gán nó vào chỉ mục đã chọn của <select> . Đây là điều sẽ giúp ích cho bất kỳ loại logic nào bạn có khi quyết định phải làm gì với dữ liệu. Biết tên và giá trị của chỉ mục đã chọn là cực kỳ quan trọng nếu bạn muốn làm bất cứ điều gì với dữ liệu đó.
Bạn sẽ nghiên cứu thêm về những việc cần làm với dữ liệu biểu mẫu khi nghiên cứu phần phụ trợ - đừng lo lắng về những gì đang xảy ra với JavaScript ở cuối tài liệu. Chỉ lo lắng về việc phải làm gì để có menu thả xuống trên trang - <select> và <option> các yếu tố.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Kết luận
Trong bài viết này, chúng ta đã tìm hiểu về cách tạo menu thả xuống cho biểu mẫu. Sử dụng <select> và <option> để cung cấp cho người dùng của bạn một cách để thực hiện lựa chọn từ nhiều tùy chọn. Sau khi bạn nắm được kiến thức cơ bản ở đây, hãy xem <optgroup> gì làm!