CSS cho đầu vào

Ghi chú. Các nút chọn tương tự như hộp kiểm, nhưng có một điểm khác biệt quan trọng — các nút chọn được nhóm thành một bộ trong đó chỉ có thể chọn một nút chọn tại một thời điểm, trong khi các hộp kiểm cho phép bạn bật và tắt các giá trị đơn lẻ. Khi có nhiều điều khiển, các nút radio cho phép chọn một trong số tất cả các điều khiển đó, trong khi các hộp kiểm cho phép chọn nhiều giá trị

Một chuỗi đại diện cho giá trị của hộp kiểm. Điều này không được hiển thị ở phía máy khách, nhưng trên máy chủ, đây là

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?label>
  div>
  <div>
    <button type="submit">Subscribebutton>
  div>
form>

Trong ví dụ này, chúng ta có tên là

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Nếu thuộc tính

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g.

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Ngoài các thuộc tính chung được chia sẻ bởi tất cả các phần tử , đầu vào "checkbox" hỗ trợ các thuộc tính sau

Thuộc tính Boolean cho biết hộp kiểm này có được chọn theo mặc định hay không (khi tải trang). Nó không cho biết liệu hộp kiểm này hiện có được chọn hay không. nếu trạng thái của hộp kiểm bị thay đổi, thuộc tính nội dung này không phản ánh sự thay đổi. (Chỉ thuộc tính IDL của

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Ghi chú. Không giống như các điều khiển đầu vào khác, giá trị của hộp kiểm chỉ được bao gồm trong dữ liệu đã gửi nếu hộp kiểm hiện tại là

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Thuộc tính

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Chúng tôi đã đề cập đến cách sử dụng hộp kiểm cơ bản nhất ở trên. Bây giờ chúng ta hãy xem các tính năng và kỹ thuật phổ biến khác liên quan đến hộp kiểm mà bạn sẽ cần

Ví dụ chúng ta thấy ở trên chỉ chứa một hộp kiểm; . Nếu chúng hoàn toàn không liên quan, thì bạn có thể giải quyết chúng một cách riêng biệt, như được hiển thị ở trên. Tuy nhiên, nếu tất cả chúng đều có liên quan với nhau thì mọi chuyện không đơn giản như vậy

Ví dụ: trong bản demo sau, chúng tôi bao gồm nhiều hộp kiểm để cho phép người dùng chọn sở thích của họ (xem phiên bản đầy đủ trong phần)

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Trong ví dụ này, bạn sẽ thấy rằng chúng tôi đã đánh dấu cho mỗi hộp kiểm giống nhau

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

inputInstance.indeterminate = true;

inputInstance.indeterminate = true;

Để làm cho hộp kiểm được chọn theo mặc định, bạn đặt cho nó thuộc tính

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

Trong các ví dụ trên, bạn có thể nhận thấy rằng bạn có thể chuyển đổi một hộp kiểm bằng cách nhấp vào phần tử

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

Ngoài khả năng truy cập, đây là một lý do chính đáng khác để thiết lập đúng các yếu tố

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

Ngoài các trạng thái được chọn và không được chọn, có một trạng thái thứ ba mà một hộp kiểm có thể ở. không xác định. Đây là trạng thái không thể nói mục đó được bật hay tắt. Điều này được đặt bằng thuộc tính

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

<fieldset>
  <legend>Choose your interestslegend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Codinglabel>
  div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Musiclabel>
  div>
fieldset>

inputInstance.indeterminate = true;

Một hộp kiểm ở trạng thái không xác định có một đường ngang trong hộp (trông hơi giống dấu gạch nối hoặc dấu trừ) thay vì dấu kiểm/đánh dấu trong hầu hết các trình duyệt

Không có nhiều trường hợp sử dụng cho tài sản này. Phổ biến nhất là khi có sẵn một hộp kiểm "sở hữu" một số tùy chọn phụ (cũng là hộp kiểm). Nếu tất cả các tùy chọn phụ được chọn, hộp kiểm sở hữu cũng được chọn và nếu tất cả chúng không được chọn, hộp kiểm sở hữu sẽ không được chọn. Nếu bất kỳ một hoặc nhiều tùy chọn phụ nào có trạng thái khác với các tùy chọn khác, thì hộp kiểm sở hữu ở trạng thái không xác định

Điều này có thể được nhìn thấy trong ví dụ dưới đây (nhờ CSS Tricks cho nguồn cảm hứng). Trong ví dụ này, chúng tôi theo dõi các thành phần mà chúng tôi đang thu thập cho một công thức. Khi bạn chọn hoặc bỏ chọn hộp kiểm của một thành phần, hàm JavaScript sẽ kiểm tra tổng số thành phần đã chọn

• Nếu không có cái nào được chọn, hộp kiểm của tên công thức được đặt thành không được chọn
• Nếu một hoặc hai được chọn, hộp kiểm của tên công thức được đặt thành

  const overall = document.querySelector('#enchantment');
  const ingredients = document.querySelectorAll('ul input');
  
  overall.addEventListener('click', (e) => {
    e.preventDefault();
  });
  
  for (const ingredient of ingredients) {
    ingredient.addEventListener('click', updateDisplay);
  }
  
  function updateDisplay() {
    let checkedCount = 0;
    for (const ingredient of ingredients) {
      if (ingredient.checked) {
        checkedCount++;
      }
    }
  
    if (checkedCount === 0) {
      overall.checked = false;
      overall.indeterminate = false;
    } else if (checkedCount === ingredients.length) {
      overall.checked = true;
      overall.indeterminate = false;
    } else {
      overall.checked = false;
      overall.indeterminate = true;
    }
  }
  

  4
• Nếu cả ba đều được chọn, hộp kiểm của tên công thức được đặt thành

  <fieldset>
    <legend>Choose your interestslegend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" checked />
      <label for="coding">Codinglabel>
    div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Musiclabel>
    div>
  fieldset>
  

  3

Vì vậy, trong trường hợp này, trạng thái

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

Ghi chú. Nếu bạn gửi biểu mẫu có hộp kiểm không xác định, điều tương tự sẽ xảy ra như thể hộp kiểm không được chọn — không có dữ liệu nào được gửi để đại diện cho hộp kiểm

Các hộp kiểm hỗ trợ xác thực (được cung cấp cho tất cả các ). Tuy nhiên, hầu hết các

const overall = document.querySelector('#enchantment');
const ingredients = document.querySelectorAll('ul input');

overall.addEventListener('click', (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener('click', updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

<form>
  <fieldset>
    <legend>Choose your interestslegend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Codinglabel>
    div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Musiclabel>
    div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Artlabel>
    div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sportslabel>
    div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cookinglabel>
    div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Otherlabel>
      <input type="text" id="otherValue" name="other" />
    div>
    <div>
      <button type="submit">Submit formbutton>
    div>
  fieldset>
form>

<form>
  <fieldset>
    <legend>Choose your interestslegend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Codinglabel>
    div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Musiclabel>
    div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Artlabel>
    div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sportslabel>
    div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cookinglabel>
    div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Otherlabel>
      <input type="text" id="otherValue" name="other" />
    div>
    <div>
      <button type="submit">Submit formbutton>
    div>
  fieldset>
form>

<form>
  <fieldset>
    <legend>Choose your interestslegend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Codinglabel>
    div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Musiclabel>
    div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Artlabel>
    div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sportslabel>
    div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cookinglabel>
    div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Otherlabel>
      <input type="text" id="otherValue" name="other" />
    div>
    <div>
      <button type="submit">Submit formbutton>
    div>
  fieldset>
form>

Ví dụ sau đây là phiên bản mở rộng của ví dụ "nhiều hộp kiểm" mà chúng ta đã thấy ở trên — ví dụ này có nhiều tùy chọn tiêu chuẩn hơn, cộng với hộp kiểm "khác" mà khi được chọn sẽ khiến một trường văn bản xuất hiện để nhập giá trị cho tùy chọn "khác". Điều này đạt được với một khối JavaScript đơn giản. Ví dụ này cũng bao gồm một số CSS để cải thiện kiểu dáng

Làm cách nào để gọi đầu vào trong CSS?

Làm cách nào để thay đổi giá trị đầu vào trong CSS?

Làm cách nào để tạo kiểu CSS cho tệp đầu vào?

Đầu vào trong CSS là gì?