Thẻ HTML nhân le tùy chọn. Thẻ
Các hộp lựa chọn là một phần quan trọng của nhiều biểu mẫu web. Các hộp lựa chọn cho phép bạn chấp nhận đầu vào của người dùng và giới hạn các tùy chọn mà người dùng có thể chọn đối với những tùy chọn bạn đã chỉ định.
HTML thẻ tạo một phần tử biểu mẫu cung cấp danh sách các tùy chọn mà từ đó người dùng có thể chọn một hoặc nhiều. chỉ định các tùy chọn xuất hiện trong hộp lựa chọn.
Hướng dẫn này sẽ thảo luận về cách sử dụng thẻ HTML
Biểu mẫu HTML
Biểu mẫu là một phần thiết yếu của nhiều trang web và cho phép bạn chấp nhận dữ liệu từ người dùng mà bạn có thể xử lý trên trang web của mình. Ví dụ:nếu bạn đang thiết kế trang web cho một quán cà phê, bạn có thể muốn tạo một biểu mẫu chấp nhận phản hồi từ khách hàng.
Trong HTML, được sử dụng để khai báo một biểu mẫu. Sau đó, bạn có thể sử dụng các phần tử HTML như và chọn để xác định dữ liệu mà biểu mẫu sẽ thu thập. Đối với hướng dẫn này, chúng tôi sẽ tập trung vào và cách nó có thể được sử dụng để thu thập dữ liệu trong một biểu mẫu.
Để tìm hiểu thêm về các biểu mẫu HTML, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về các biểu mẫu HTML.
Thẻ
HTML thẻ tạo danh sách mà từ đó người dùng có thể chọn một hoặc nhiều tùy chọn. Phần 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ọ.
thẻ tạo một trường biểu mẫu, khi được nhấp vào, sẽ hiển thị danh sách thả xuống với các tùy chọn mà từ đó người dùng có thể chọn.
Cú pháp cho như sau:
<select></select>
Tự nó, thẻ không có tùy chọn. Chúng tôi cần sử dụng để xác định các tùy chọn xuất hiện trong thẻ thẻ.
Đây là cú pháp cho thẻ:
<select> <option value="optionOne">Option One</option> </select>
xuất hiện trong thẻ nhãn. Trong ví dụ này, chúng tôi cũng đã chỉ định giá trị thuộc tính của chúng tôi thẻ.
Điều này được sử dụng để lưu trữ giá trị dữ liệu sẽ được gửi đến máy chủ nếu người dùng chọn một tùy chọn cụ thể. Trong trường hợp này, nếu người dùng chọn Tùy chọn một từ danh sách, optionOne sẽ được gửi đến máy chủ.
Mỗi thẻ phải có một thuộc tính giá trị được chỉ định.
HTML được hỗ trợ bởi tất cả các trình duyệt hiện đại chính.
Tại sao bạn nên sử dụng thẻ HTML
Sử dụng có lợi khi bạn muốn hạn chế các giá trị mà người dùng có thể nhập vào trường biểu mẫu. Dưới đây là một vài ví dụ mà thẻ
- Cung cấp cho người dùng danh sách các quốc gia để chọn.
- Cung cấp cho người dùng danh sách các màu có sẵn cho một sản phẩm để họ chọn.
- Để cho phép người dùng chọn số lượng sản phẩm họ muốn mua (tức là từ 1 đến 10).
Trong những trường hợp này, các tùy chọn bị hạn chế. Sử dụng menu thả xuống có nghĩa là bạn có thể nhận được phản hồi phù hợp với mã của mình. Điều này là do người dùng không thể nhập bất kỳ giá trị nào họ muốn, giống như họ có thể nhập vào một trường được chọn mà bạn có thể không đoán trước được.
HTML
Giả sử chúng ta đang tạo một biểu mẫu web cho một tiệm bánh ở địa phương. Chúng tôi đã được yêu cầu tạo một biểu mẫu cho phép người dùng đặt bánh mì. Biểu mẫu này sẽ trình bày một danh sách thả xuống của các loại bánh mì mà từ đó người dùng có thể chọn một loại bánh mì. Các tùy chọn sẽ xuất hiện là:
- Trắng trơn
- Màu nâu trơn
- Toàn bộ hạt
- Bột chua
Theo mặc định, Trắng trơn nên được chọn.
Để tạo menu thả xuống HTML này, chúng tôi có thể sử dụng mã sau:
<select name="breadType"> <option value="plainWhite" selected>Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
Mã của chúng tôi trả về:
Đầu tiên, chúng tôi sử dụng để xác định danh sách lựa chọn của chúng tôi. Chúng tôi chỉ định tên thuộc tính này, chỉ định tên của điều khiển biểu mẫu chọn và chúng tôi gán cho thuộc tính giá trị breadType .
Tiếp theo, chúng tôi sử dụng bốn để tạo danh sách các tùy chọn sẽ được hiển thị cho người dùng. Mỗi thẻ có giá trị thuộc tính được chỉ định. Thuộc tính này lưu trữ giá trị của tùy chọn sẽ được gửi đến máy chủ khi người dùng gửi biểu mẫu.
đầu tiên thẻ có văn bản nhãn hiển thị Trắng trơn, cũng có một đã chọn thuộc tính được chỉ định. Điều này làm cho Plain White tùy chọn đã chọn mặc định.
Chúng tôi có thể cho phép người dùng của mình chọn nhiều tùy chọn trong danh sách bằng cách sử dụng nhiều thuộc tính:
<select name="breadType" multiple> <option value="plainWhite" selected="">Plain White</option> <option value="plainBrown">Plain Brown</option> <option value="wholeGrain">Whole Grain</option> <option value="sourdough">Sourdough</option> </select>
Thuộc tính nhiều là một từ khóa. Điều này có nghĩa là bạn không cần sử dụng dấu bằng để gán giá trị cho thuộc tính.
Để chọn nhiều giá trị, hãy giữ nút Ctrl trên Windows hoặc nút Cmd trên Mac.
HTML
thẻ có một số thuộc tính HTML cụ thể có thể được áp dụng cho thẻ. Những điều này như sau:
| Thuộc tính | Giá trị | Mô tả |
| tự động lấy nét | tự động lấy nét | Cung cấp tiêu điểm danh sách thả xuống khi tài liệu được tải. |
| bị vô hiệu hóa | bị vô hiệu hóa | Cho biết rằng danh sách thả xuống đã bị vô hiệu hóa (vì vậy người dùng không thể gửi giá trị bằng cách sử dụng danh sách) |
| biểu mẫu | form_id | Chỉ định biểu mẫu mà phần tử |
| nhiều | nhiều | Cho phép người dùng chọn nhiều tùy chọn. |
| tên | tên | Chỉ định tên cho phần tử. |
| bắt buộc | bắt buộc | Cho biết rằng trường biểu mẫu phải được điền trước khi được gửi. |
| kích thước | số | Chỉ định số lượng tùy chọn sẽ được hiển thị cho người dùng. |
Kết luận
HTML phần tử tạo một trường biểu mẫu hiển thị danh sách các giá trị mặc định. Người dùng có thể chọn một hoặc nhiều giá trị từ danh sách. các trường hữu ích khi bạn muốn người dùng chọn một giá trị từ danh sách các giá trị tiềm năng được xác định trước.
Hướng dẫn này đã thảo luận, có tham chiếu đến một ví dụ, cách bạn có thể sử dụng thẻ
Bạn có muốn tìm hiểu thêm về lập trình HTML? Hãy xem hướng dẫn Cách học HTML của chúng tôi. Hướng dẫn này chứa các mẹo hàng đầu về cách học HTML và danh sách các tài nguyên học tập để giúp bạn xây dựng kiến thức của mình.