Select và Action là một trong những thẻ quan trọng nhất trong HTML và không thể tạo DropDown Menu mà không sử dụng nó. Hãy bắt đầu hành trình lựa chọn và thẻ tùy chọn trong HTML theo cách sau
Thẻ Chọn và Tùy chọn trong HTML là gì?
Thẻ được sử dụng trong biểu mẫu để xác định danh sách chọn trong HTML. Xuất hiện khi nhấp vào phần tử biểu mẫu và nó sẽ tiến hành người dùng chọn một trong các tùy chọn. Các
đầu ra
Thẻ tùy chọn này là thẻ có thể được sử dụng để cung cấp bất kỳ tùy chọn thả xuống số nào. Chủ đề trong lĩnh vực này có thể được thay đổi theo yêu cầu
Danh sách các thuộc tính của Select Tag
AttributeDescriptionNameNó được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. SizeIt được sử dụng để trình bày hộp danh sách cuộn. MultipleNếu nó được đặt thành “multiple” thì cho phép người dùng chọn nhiều mục từ menuVí dụ về thẻ tùy chọn trong HTML
HTML option tag
Nó không kết thúc ở đó. Một trong các mục thả xuống xuất hiện theo mặc định và sẽ được chọn nếu người dùng nhấp vào nút gửi ngay khi họ truy cập trang
Nhưng đây không phải là trải nghiệm người dùng tốt. Bạn có thể loại bỏ nó bằng cách viết mã trong “chọn ngôn ngữ” làm mục đầu tiên của danh sách thả xuống
________số 8Khi người dùng nhấp vào hộp chọn để chọn một mục, menu thả xuống cũng che nút gửi – một điều khác ảnh hưởng tiêu cực đến trải nghiệm người dùng tốt
Bạn có thể thay đổi điều này bằng thuộc tính
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
Điều này cũng cho phép bạn loại bỏ mục giả đầu tiên, bởi vì một số mục sẽ tự động hiển thị cho người dùng
HTML option tag0
Với thuộc tính
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
HTML option tag2
Điều này làm cho 4 mục hiển thị theo mặc định. Để chọn nhiều mục, người dùng phải giữ phím shift hoặc ctrl, sau đó chọn bằng chuột
Đó không phải là tất cả những gì bạn có thể làm với các thẻ select và
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
height: 100vh;
background-color: #f1f1f1;
}
input {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
Bạn có thể chuyển đổi danh sách thả xuống đã được tạo thành hộp chọn nhiều lớp như thế này
HTML option tag6
Cách tạo kiểu cho phần tử chọn
Việc tạo kiểu cho phần tử chọn thường gây nhầm lẫn và hiển thị không nhất quán trong các trình duyệt. Nhưng bạn luôn có thể thử như sau
HTML option tag7____18
Trong đoạn mã CSS ở trên, tôi đã cho văn bản trong hộp chọn có dạng như sau
- một họ phông chữ thảo và một màu trắng,
- đường viền bằng 0 để loại bỏ đường viền xấu xí khi nó được lấy nét,
- một nền màu xanh lá cây,
- đường viền màu đỏ thẫm đánh dấu 1 pixel,
- bán kính đường viền là 4 pixel để có đường viền hơi tròn ở tất cả các bên,
- và một phần đệm 4 pixel để tạo khoảng trống cho mọi thứ một chút
Hộp chọn bây giờ trông đẹp hơn
Phần kết luận
Thẻ select rất hữu ích khi bạn tạo danh sách thả xuống và danh sách kết hợp trong HTML. Nó giống như một nút radio và hộp kiểm trong một gói
Hãy nhớ rằng với các nút radio, bạn chỉ có thể chọn một mục từ danh sách – nhưng với hộp kiểm, bạn có thể chọn nhiều mục. Lựa chọn linh hoạt hơn vì bạn có thể định cấu hình để chỉ chấp nhận một mặt hàng hoặc nhiều mặt hàng
Một vấn đề với thẻ select là rất khó tạo kiểu. Một giải pháp hợp lý là sử dụng thư viện CSS cung cấp các lớp tiện ích tuyệt vời để tạo kiểu cho biểu mẫu cùng với phần tử chọn
Tôi hy vọng hướng dẫn này đã giúp bạn quen thuộc hơn với thẻ select để bạn có thể bắt đầu sử dụng nó trong các dự án của mình
Cảm ơn bạn đã đọc và tiếp tục mã hóa
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu