Cái gì được chọn trong select html?

Thí dụ

Đính kèm một sự kiện thay đổi vào lựa chọn nhận văn bản cho từng tùy chọn đã chọn và ghi chúng vào div. Sau đó, nó kích hoạt sự kiện để vẽ văn bản ban đầu

Bạn sử dụng thẻ select HTML để tạo menu thả xuống để người dùng có thể chọn giá trị họ muốn. Đây là một tính năng công cụ trong việc thu thập dữ liệu để gửi đến máy chủ

Thẻ chọn thường nằm trong một phần tử biểu mẫu, với các mục để chọn được mã hóa trong một thẻ khác,

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;
   }

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo menu thả xuống với thẻ select để bạn có thể bắt đầu sử dụng nó để thu thập dữ liệu trong các dự án mã hóa của mình. Tôi cũng sẽ đề cập đến cách tạo kiểu cho thẻ select vì nó nổi tiếng là khó tạo kiểu

Các thuộc tính của Select Tag

Trước khi tôi tìm hiểu sâu về cách tạo menu thả xuống với thẻ chọn, chúng ta cần thảo luận về các thuộc tính mà thẻ chọn sử dụng

Đây là những thuộc tính của nó

• Tên. Bạn cần đính kèm tên cho mọi điều khiển biểu mẫu vì tên này được dùng để tham chiếu dữ liệu sau khi được gửi tới máy chủ
• nhiều. Thuộc tính này cho phép người dùng chọn nhiều tùy chọn từ menu thả xuống
• yêu cầu. Điều này thường được sử dụng để xác nhận. Với nó, biểu mẫu sẽ không gửi trừ khi người dùng chọn ít nhất một tùy chọn từ danh sách thả xuống
• Vô hiệu hóa. Thuộc tính này ngăn người dùng tương tác với các tùy chọn
• kích thước. Được biểu thị bằng số, thuộc tính kích thước được sử dụng để chỉ định số lượng tùy chọn sẽ hiển thị cùng một lúc
• tự động lấy nét. Thuộc tính này được sử dụng trên tất cả các đầu vào biểu mẫu, bao gồm chọn, để chỉ định rằng đầu vào phải được lấy nét khi tải trang

Cách tạo Menu thả xuống bằng thẻ chọn

Để tạo menu thả xuống với thẻ chọn, trước tiên bạn cần có phần tử biểu mẫu. Điều này là do bạn cũng sẽ có một nút gửi bên trong nó [phần tử biểu mẫu] để gửi dữ liệu đến máy chủ

      Language
      
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

Tôi đã thêm một số CSS đơn giản để căn giữa menu thả xuống và nút, đồng thời tạo cho phần thân một nền màu xám nhạt

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;
   }

Để làm cho nó phức tạp hơn và dễ truy cập hơn, bạn cũng có thể đính kèm hộp chọn vào một thành phần nhãn để nó được lấy tiêu điểm khi nhấp vào văn bản nhãn. Bạn có thể làm điều đó với mã này

      Language
      
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

Tôi đặt ký hiệu số [#] làm giá trị của thuộc tính hành động để bạn không nhận được lỗi 404 khi nhấp vào nút gửi

Nhưng bây giờ chúng ta phải thực hiện một chút thay đổi trong CSS

 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;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

Cuối cùng thì đây là kết quả

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

 
      Language
      
        Select a language
        JavaScript
        PHP
        Java
        Golang
        Python
        C#
        C++
        Erlang
      
      

Khi 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

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;
   }

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 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

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;
   }

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

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;
   }

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

Sự 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