programming html

Hộp tổ hợp trong HTML

Ví dụ triển khai Mẫu Combobox sau đây minh họa tiện ích hộp tổ hợp chọn một lần có chức năng tương tự như phần tử _______ _ _ HTML. Không giống như các ví dụ về hộp tổ hợp có thể chỉnh sửa, hộp tổ hợp chỉ chọn này không được tạo bằng phần tử và nó không chấp nhận đầu vào của người dùng dạng tự do. Tuy nhiên, giống như phần tử HTML , users can type characters to select matching options. Similar examples include: Keyboard Support The example combobox on this page implements the following keyboard interface. Other variations and options for the keyboard interface are described in the Keyboard Interaction section of the combobox pattern. Closed Combobox Key Function Down Arrow Opens the listbox if it is not already displayed without moving focus or changing selection. DOM focus remains on the combobox. Alt + Down Arrow Opens the listbox without moving focus or changing selection. Up Arrow First opens the listbox if it is not already displayed and then moves visual focus to the first option. DOM focus remains on the combobox. Enter Opens the listbox without moving focus or changing selection. Space Opens the listbox without moving focus or changing selection. Home Opens the listbox and moves visual focus to the first option. End Opens the listbox and moves visual focus to the last option. Printable Characters First opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character. If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string. If the same character is typed in succession, visual focus cycles among the options starting with that character. Listbox Popup NOTE: When visual focus is in the listbox, DOM focus remains on the combobox and the value of aria-activedescendant on the combobox is set to a value that refers to the listbox option that is visually indicated as focused. Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. For more information about this focus management technique, see Managing Focus in Composites Using aria-activedescendant. Key Function Enter Sets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox. Space Sets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox. Tab Sets the value to the content of the focused option in the listbox. Closes the listbox. Performs the default action, moving focus to the next focusable element. Note: the native đóng hộp danh sách nhưng không di chuyển tiêu điểm trên tab. Mẫu này khớp với hành vi của các hộp tổ hợp khác chứ không phải phần tử gốc trong trường hợp này. Bỏ trốn

  • Đóng hộp danh sách
  • Đặt tiêu điểm trực quan trên hộp tổ hợp
mũi tên xuống
  • Di chuyển tiêu điểm trực quan sang tùy chọn tiếp theo
  • Nếu tiêu điểm hình ảnh ở tùy chọn cuối cùng, tiêu điểm hình ảnh không di chuyển
Mũi tên lên
  • Di chuyển tiêu điểm trực quan đến tùy chọn trước đó
  • Nếu tiêu điểm hình ảnh ở tùy chọn đầu tiên, tiêu điểm hình ảnh không di chuyển
Alt + Mũi tên lên
  • Đặt giá trị cho nội dung của tùy chọn tập trung trong hộp danh sách
  • Đóng hộp danh sách
  • Đặt tiêu điểm trực quan trên hộp tổ hợp
Trang chủ Di chuyển tiêu điểm trực quan đến tùy chọn đầu tiên. Kết thúc Di chuyển tiêu điểm trực quan đến tùy chọn cuối cùng. PageUp Nhảy tập trung trực quan lên 10 tùy chọn [hoặc tùy chọn đầu tiên]. PageDown Nhảy tiêu điểm trực quan xuống 10 tùy chọn [hoặc đến tùy chọn cuối cùng]. Nhân vật có thể in
  • Đầu tiên mở hộp danh sách nếu nó chưa được hiển thị và sau đó di chuyển tiêu điểm trực quan đến tùy chọn đầu tiên khớp với ký tự đã nhập
  • Nếu nhiều phím được nhập liên tiếp, tiêu điểm trực quan sẽ di chuyển đến tùy chọn đầu tiên khớp với toàn bộ chuỗi
  • Nếu cùng một ký tự được nhập liên tiếp, tiêu điểm hình ảnh sẽ xoay vòng giữa các tùy chọn bắt đầu bằng ký tự đó

Ví dụ trên cho thấy cách sử dụng điển hình. Nó được cung cấp một thuộc tính id để cho phép nó được liên kết với một cho mục đích truy cập, cũng như một thuộc tính name để biểu thị tên của điểm dữ liệu được liên kết được gửi tới máy chủ. Mỗi tùy chọn menu được xác định bởi một phần tử 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
0 được lồng bên trong

Mỗi phần tử 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
0 phải có một thuộc tính chứa giá trị dữ liệu để gửi tới máy chủ khi tùy chọn đó được chọn. Nếu không bao gồm thuộc tính 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
3, giá trị sẽ mặc định là văn bản chứa bên trong phần tử. Bạn có thể bao gồm một thuộc tính trên một phần tử 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
0 để làm cho nó được chọn theo mặc định khi tải trang lần đầu tiên

Phần tử có một số thuộc tính duy nhất mà bạn có thể sử dụng để kiểm soát nó, chẳng hạn như 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
8 để chỉ định liệu có thể chọn nhiều tùy chọn hay không và 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
9 để chỉ định số lượng tùy chọn sẽ được hiển thị cùng một lúc. Nó cũng chấp nhận hầu hết các thuộc tính đầu vào của biểu mẫu chung như 

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
0, 

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
1, 

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
2, v.v.

Bạn có thể lồng thêm các phần tử 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
0 bên trong các phần tử 

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
4 để tạo các nhóm tùy chọn riêng biệt bên trong danh sách thả xuống

Để biết thêm ví dụ, xem

Phần tử này bao gồm các thuộc tính toàn cục

Một chuỗi cung cấp gợi ý cho tính năng tự động hoàn thành của tác nhân người dùng. Xem Thuộc tính tự động hoàn thành HTML để biết danh sách đầy đủ các giá trị và chi tiết về cách sử dụng tự động hoàn thành

Thuộc tính Boolean này cho phép bạn chỉ định rằng điều khiển biểu mẫu phải có tiêu điểm đầu vào khi tải trang. Chỉ một thành phần biểu mẫu trong tài liệu có thể có thuộc tính 


  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
2

Thuộc tính Boolean này chỉ ra rằng người dùng không thể tương tác với điều khiển. Nếu thuộc tính này không được chỉ định, điều khiển sẽ kế thừa cài đặt của nó từ phần tử chứa, ví dụ: 


  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
9;

Phần tử 

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
2 để liên kết với [chủ sở hữu biểu mẫu của nó]. Giá trị của thuộc tính này phải là của một 
body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
2 trong cùng một tài liệu. [Nếu thuộc tính này không được đặt, thì phần tử được liên kết với phần tử tổ tiên của nó là 
body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
2, nếu có. ]

Thuộc tính này cho phép bạn liên kết các phần tử với các 

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
2 ở bất kỳ đâu trong tài liệu, không chỉ bên trong một 
body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
2. Nó cũng có thể ghi đè một phần tử tổ tiên 
body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
2

Thuộc tính Boolean này chỉ ra rằng có thể chọn nhiều tùy chọn trong danh sách. Nếu nó không được chỉ định, thì chỉ có thể chọn một tùy chọn tại một thời điểm. Khi 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
8 được chỉ định, hầu hết các trình duyệt sẽ hiển thị hộp danh sách cuộn thay vì một dòng thả xuống

Thuộc tính này được sử dụng để chỉ định tên của điều khiển

Một thuộc tính Boolean cho biết rằng phải chọn một tùy chọn có giá trị chuỗi không trống

Nếu điều khiển được trình bày dưới dạng hộp danh sách cuộn [e. g. khi 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
8 được chỉ định], thuộc tính này biểu thị số lượng hàng trong danh sách sẽ hiển thị cùng một lúc. Trình duyệt không bắt buộc phải trình bày phần tử được chọn dưới dạng hộp danh sách cuộn. Giá trị mặc định là 
const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};
8

Ghi chú. Theo đặc tả HTML, giá trị mặc định cho kích thước phải là 

const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};
9;

Trên máy tính để bàn, có một số cách để chọn nhiều tùy chọn trong phần tử có thuộc tính 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
8

Người dùng chuột có thể giữ các phím Ctrl, Command hoặc Shift [tùy thuộc vào ý nghĩa của hệ điều hành của bạn] rồi nhấp vào nhiều tùy chọn để chọn/bỏ chọn chúng

Cảnh báo. Cơ chế chọn nhiều mục không liền kề qua bàn phím được mô tả dưới đây dường như chỉ hoạt động trong Firefox

Trên macOS, các phím tắt Ctrl + Lên và Ctrl + Xuống xung đột với các phím tắt mặc định của hệ điều hành cho các cửa sổ Ứng dụng và Điều khiển nhiệm vụ, vì vậy bạn sẽ phải tắt các phím tắt này trước khi phím tắt hoạt động

Người dùng bàn phím có thể chọn nhiều mục liền kề bằng cách

  • Tập trung vào yếu tố [e. g. sử dụng Tab ]
  • Chọn một mục ở trên cùng hoặc dưới cùng của phạm vi mà họ muốn chọn bằng cách sử dụng các phím con trỏ Lên và Xuống để đi lên và xuống các tùy chọn
  • Giữ phím Shift và sau đó sử dụng các phím con trỏ Lên và Xuống để tăng hoặc giảm phạm vi các mục đã chọn

Người dùng bàn phím có thể chọn nhiều mục không liền kề bằng cách

  • Tập trung vào yếu tố [e. g. sử dụng Tab ]
  • Giữ phím Ctrl rồi sử dụng các phím con trỏ Lên và Xuống để thay đổi tùy chọn chọn "tiêu điểm", tôi. e. cái sẽ được chọn nếu bạn chọn làm như vậy. Tùy chọn chọn "tiêu điểm" được đánh dấu bằng đường viền chấm, giống như cách liên kết tập trung vào bàn phím
  • Nhấn Space để chọn/bỏ chọn các tùy chọn chọn "tiêu điểm"

Phần tử nổi tiếng là khó tạo kiểu hiệu quả bằng CSS. Bạn có thể tác động đến một số khía cạnh như bất kỳ yếu tố nào — ví dụ: thao tác với mô hình hộp, phông chữ được hiển thị, v.v. , và bạn có thể sử dụng thuộc tính 6 để xóa hệ thống mặc định 6

Tuy nhiên, các thuộc tính này không tạo ra kết quả nhất quán trên các trình duyệt và rất khó để thực hiện những việc như sắp xếp các loại phần tử biểu mẫu khác nhau trong một cột với nhau. Cấu trúc bên trong của phần tử rất phức tạp và khó kiểm soát. Nếu bạn muốn có toàn quyền kiểm soát, bạn nên cân nhắc sử dụng một thư viện có các phương tiện tốt để tạo kiểu dáng cho các tiện ích biểu mẫu hoặc thử cuộn menu thả xuống của riêng bạn bằng cách sử dụng các phần tử phi ngữ nghĩa, JavaScript và WAI-ARIA để cung cấp ngữ nghĩa

Để biết thêm thông tin hữu ích về kiểu dáng , hãy xem

  • Tạo kiểu biểu mẫu HTML
  • Kiểu dáng nâng cao cho biểu mẫu HTML

Ngoài ra, hãy xem ví dụ "Tùy chỉnh kiểu chọn" bên dưới để biết ví dụ về việc bạn có thể thử tạo kiểu đơn giản

Ví dụ sau tạo một menu thả xuống rất đơn giản, tùy chọn thứ hai được chọn theo mặc định



  First Value
  Second Value
  Third Value

Ví dụ sau đây phức tạp hơn, hiển thị nhiều tính năng hơn mà bạn có thể sử dụng trên phần tử ________ 45 ______

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross

bạn sẽ thấy rằng

  • Có thể chọn nhiều tùy chọn vì chúng tôi đã bao gồm thuộc tính 
    Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    8
  • Thuộc tính 
    Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    9 chỉ hiển thị 4 dòng tại một thời điểm;
  • Chúng tôi đã bao gồm các yếu tố 
    
  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    4 để chia các tùy chọn thành các nhóm khác nhau. Đây là một nhóm hoàn toàn trực quan, trực quan hóa của nó thường bao gồm tên nhóm được in đậm và các tùy chọn được thụt vào
  • Tùy chọn "Hamster" bao gồm thuộc tính 
    
  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    1 và do đó không thể chọn được

Ví dụ này cho thấy cách bạn có thể sử dụng một số CSS và JavaScript để cung cấp kiểu dáng tùy chỉnh mở rộng cho hộp

Ví dụ này về cơ bản

  • Sao chép bối cảnh của [các 
    Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
    0] trong trình bao bọc gốc và triển khai lại hành vi dự kiến ​​tiêu chuẩn bằng cách sử dụng các phần tử HTML và JavaScript bổ sung. Điều này bao gồm hành vi tab cơ bản để cung cấp khả năng truy cập bàn phím
  • Ánh xạ một số tiêu chuẩn gốc từ 9 đến id0 của các phần tử mới để quản lý trạng thái và CSS

Ghi chú. Không phải tất cả các tính năng gốc đều được hỗ trợ, đó là Bằng chứng về khái niệm. CNTT bắt đầu từ HTML tiêu chuẩn nhưng có thể đạt được kết quả tương tự khi bắt đầu từ dữ liệu JSON, HTML tùy chỉnh hoặc các giải pháp khác

HTML


  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis

CSS

body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-disabled] {
  color: gray;
}

html
  body
  form
  fieldset#custom
  div.select
  div.optgroup
  div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}

JavaScript

const selects = custom.querySelectorAll['select'];
for [const select of selects] {
  const div = document.createElement['div'];
  const header = document.createElement['div'];
  const datalist = document.createElement['datalist'];
  const optgroups = select.querySelectorAll['optgroup'];
  const span = document.createElement['span'];
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute['multiple'];
  function  title[e] {
    const disabled = this.hasAttribute['data-disabled'];
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if [disabled] return;
    if [multiple] {
      if [e.shiftKey] {
        const checked = this.hasAttribute["data-checked"];
        if [checked] {
          this.removeAttribute["data-checked"];
        } else {
          this.setAttribute["data-checked", ""];
        }
      } else {
        const options = div.querySelectorAll['.option'];
        for [let i = 0; i  {
    if [!multiple] {
      const open = this.hasAttribute["data-open"];
      e.stopPropagation[];
      if [open] {
        div.removeAttribute["data-open"];
      } else {
        div.setAttribute["data-open", ""];
      }
    }
  };

  div.onkeyup = [event] => {
    event.preventDefault[];
    if [event.keyCode === 13] {
      div.click[];
    }
  };

  document.addEventListener['click', [e] => {
    if [div.hasAttribute["data-open"]] {
      div.removeAttribute["data-open"];
    }
  }];

  const width = Math.max[...Array.from[options].map[[e] => {
    span.innerText = e.label;
    return div.offsetWidth;
  }]];

  console.log[width];
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = [e] => {
  const data = new FormData[this];
  e.preventDefault[];
  submit.innerText = JSON.stringify[[...data.entries[]]];
};

Kết quả

Danh mục nội dung, , , , , và phần tửNội dung được phépKhông hoặc nhiều hơn 

Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
0 hoặc 

  
    Standard controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
    
  
  
    Custom controls
    
      Carrots
      Peas
      Beans
      Pneumonoultramicroscopicsilicovolcanoconiosis
4 phần tử. Bỏ sót thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận. Vai trò ARIA ngầm địnhid3 không có thuộc tính 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
8 và không có thuộc tính 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
9 nào lớn hơn 1, nếu không thì id6Các vai trò ARIA được phépid7 không có thuộc tính 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
8 và không có thuộc tính 
Please choose one or more pets:
  
    
      Dog
      Cat
      Hamster
    
    
      Parrot
      Macaw
      Albatross
9 nào lớn hơn 1, nếu không thì không có giao diện 0 cho phépDOM_______47_______1

Hộp tổ hợp trong HTML là gì?

Hộp tổ hợp về cơ bản là ĐẦU VÀO HTML của loại văn bản và CHỌN HTML được nhóm lại với nhau để cung cấp cho bạn chức năng của hộp tổ hợp . Bạn có thể đặt văn bản trong điều khiển INPUT bằng cách sử dụng điều khiển SELECT hoặc nhập trực tiếp vào trường văn bản. Trong ví dụ này, CHỌN sẽ được điền từ thuộc tính id=year.

Sự khác biệt giữa ComboBox và thả xuống trong HTML là gì?

Danh sách thả xuống là danh sách trong đó mục đã chọn luôn hiển thị và các mục khác hiển thị theo yêu cầu bằng cách nhấp vào nút thả xuống. Hộp tổ hợp là sự kết hợp của hộp danh sách tiêu chuẩn hoặc danh sách thả xuống và hộp văn bản có thể chỉnh sửa, do đó cho phép người dùng nhập một giá trị không có trong danh sách.

Thẻ chính xác để nhận hộp tổ hợp hoặc danh sách thả xuống để nhập vào trong HTML là gì?

name: The HTML name attribute is used to specify a name for the drop-down list. It is used to reference the form data after submitting the form or to reference the element in JavaScript.

Thẻ nào trong trang HTML được sử dụng để đặt trường ComboBox?

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ủ

Bài Viết Liên Quan

Tự động hóa Python có được yêu cầu không?
Cách mở tệp CSV trong Excel
Sữa Cô Gái Hà Lan bao nhiêu một hộp?
Sự khác biệt giữa Subaru Forester 2022 và 2023 là gì?
Cách thêm style css vào theme wordpress
Làm cách nào để tìm kiếm mảng nhiều chiều trong PHP?
Mảng kết hợp so với đối tượng PHP
Là phía máy chủ html
Trong tình huống nào vòng lặp foreach được sử dụng trong PHP?
Làm cách nào để sử dụng AJAX trong WordPress từng bước?
Tắt JavaScript có an toàn không?
Ngoại lệ hết thời gian chờ ổ cắm python
Cài đặt apache php mysql
Chức năng javascript cho người mới bắt đầu
Chức năng gọi Python mà không cần chờ trả về
Bạn có thể nối các mảng trong Python không?
Mysql trái tham gia
Xóa khoảng cách giữa các từ trong excel
Mảng có thể có giá trị khóa JavaScript không?
Yến sào Song Yến 13 giá bao nhiêu

Toplist mới

#1
Top 9 tập bản đồ lớp 8 bài 31 2023
5 tháng trước
#2
Top 6 kết quả thi hsg đà nẵng 2022 2023
5 tháng trước
#3
Top 9 tủ nhựa đài loan 4 cánh 3d 2023
5 tháng trước
#4
Top 9 chất khí có thể làm mất màu dung dịch nước brom là: a. so2. b. co2. c. o2. d. hcl. 2023
5 tháng trước
#5
Top 8 tìm việc làm tiện, phay bảo q7 2023
5 tháng trước
#6
Top 3 tôi xuyên thành tiểu kiều the của lão đại phản 2 2023
5 tháng trước
#7
Top 9 đổi mới phong cách, thái độ phục vụ của cán bộ y tế hướng tới sự hài lòng của người bệnh 2023
5 tháng trước
#8
Top 2 bài the dục phát triển chung lớp 6 2022 2023
5 tháng trước
#9
Top 3 bài giảng vũ điệu sắc màu (lớp 4) 2023
5 tháng trước

Bài mới nhất

Camera điều khiển tren không gọi là gì năm 2024
Ký hiệu ext trên tay cầm ps4 pro là gì năm 2024
Nghĩa vụ cơ bản của hợp đồng là gì năm 2024
Dùng ram như thế nào cho máy tính xem phim năm 2024
Qua tiêu hóa lipid sẽ được biến đổi thành gì năm 2024
Anh không có font nền gọi là gì năm 2024
Lỗi page fault in nonpaged area win 7 năm 2024
Bài tập định luật bôi lơ ma ri ốt năm 2024
Quỹ đầu tư pdf là viết tắt của từ gì năm 2024
Top 100 gương mặt nữ đẹp nhất thế giới 2023 năm 2024

Chủ Đề

programming Hỏi Đáp Toplist Mẹo Hay Là gì Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn Xây Đựng So Sánh Bài tập So sánh Tiếng anh Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Máy tính Tại sao Đại học Món Ngon Khoa Học