HTML에서 확인란 활성화 및 비활성화

1. HTML의 확인란
2. checked 속성을 사용하여 HTML에서 기본적으로 체크박스 활성화
3. disabled 속성을 사용하여 HTML에서 기본적으로 확인란 비활성화

이 문서에서는 HTML에서 확인란을 활성화 및 비활성화하는 방법을 살펴봅니다.

HTML의 확인란

확인란은 긍정 또는 부정을 표시하도록 토글할 수 있는 대화형 상자입니다. 양식 및 대화 상자에서 널리 사용됩니다.

확인란은 몇 가지 옵션이 있을 때 사용되며 사용자는 0을 포함하여 원하는 수의 옵션을 자유롭게 선택할 수 있습니다. 즉, 하나를 선택해도 다른 옵션은 자동으로 선택 해제되지 않습니다.

확인란은 상호 배타적이지 않은 옵션이 있을 때 주로 사용됩니다. 전환할 수 있는 각 옵션 옆에 작은 상자가 나타납니다.

기본적으로 상자는 비어 있습니다. 빈 상자는 부정을 나타내거나 사용자가 옵션을 선택하지 않았습니다.

클릭하면 상자 안에 확인 표시가 나타납니다. 확인 표시는 확인을 나타냅니다.

다시 클릭하면 체크 표시가 사라집니다.

<input> 태그를 사용하고 type 속성을 checkbox로 설정하여 HTML에서 확인란을 만들 수 있습니다. <input> 태그 뒤에 항목 이름을 작성할 수 있습니다.

예를 들어 ul 태그를 사용하여 정렬되지 않은 목록을 만들고 style을 list-style: none;으로 설정합니다. 목록 항목에 글머리 기호가 나타나지 않도록 합니다. 4개의 목록 항목을 만들고 <input type="checkbox">를 사용하여 각 목록 항목에 대한 확인란을 만듭니다.

코드 예:

<ul style="list-style: none;">
    <li><input type="checkbox">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox">Repeat</li>
</ul>

각 목록 항목은 기본적으로 해당 확인란에 토글 기능이 있습니다.

checked 속성을 사용하여 HTML에서 기본적으로 체크박스 활성화

옵션이 기본적으로 항상 선택되어 있는 확인란이 필요한 경우 <input> 태그에 속성을 구현할 수 있습니다. 사용할 속성은 checked 속성입니다.

속성 값을 checked로 설정하기만 하면 기본적으로 선택되도록 설정할 수 있습니다.

예를 들어 Drink 및 Repeat 옵션의 경우 checked 속성을 추가하고 해당 값을 "checked"로 설정합니다. 이렇게 하면 이 두 값의 확인란이 기본적으로 선택되어 있는지 확인합니다.

예제 코드:

<ul style="list-style: none;">
    <li><input type="checkbox" checked="checked">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked="checked">Repeat</li>
</ul>

체크된 옵션은 클릭 한 번으로 언제든지 해제할 수 있습니다.

checked만 사용하여 동일한 출력을 얻을 수도 있습니다.

예제 코드:

<ul style="list-style: none;">
    <li><input type="checkbox" checked>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" checked>Repeat</li>
</ul>

disabled 속성을 사용하여 HTML에서 기본적으로 확인란 비활성화

HTML에서 기본적으로 확인란을 비활성화하려면 disabled 속성을 사용할 수 있습니다. disabled 속성 값을 disabled로 지정하면 사용자가 확인란을 선택할 수 없습니다.

다음 예를 고려하십시오.

예제 코드:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled="disabled">Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled="disabled">Repeat</li>
</ul>

출력에서 네 가지 옵션 중 두 가지에만 토글 기능이 있음이 분명합니다. Eat 및 Code는 눈금 표시를 표시하도록 전환할 수 있지만 Drink 및 Repeat는 표시할 수 없습니다.

Drink 및 Repeat 옵션은 기본적으로 비활성화되어 있습니다. Drink 및 Repeat 옵션 옆에 있는 확인란을 클릭하면 확인란이 클릭에 응답하지 않습니다.

이렇게 하면 네 가지 옵션 중 두 가지만 선택할 수 있습니다.

disabled만 사용해도 동일한 결과를 얻을 수 있습니다.

예제 코드:

<ul style="list-style: none;">
    <li><input type="checkbox" disabled>Drink</li>
    <li><input type="checkbox">Eat</li>
    <li><input type="checkbox">Code</li>
    <li><input type="checkbox" disabled>Repeat</li>
</ul>

따라서 HTML에서 확인란을 활성화 또는 비활성화하는 방법입니다.