HTML 체크박스 태그

체크박스는 HTML에서 사용할 수 있는 입력 요소 유형으로, 사용자가 선택하거나 선택하지 않은 상태로 둘 수 있으며 웹페이지에 표시되는 옵션을 선택하거나 선택 취소할 수 있습니다. 확인란을 사용하면 애플리케이션이 선택을 위한 입력을 상자 형태로 표시할 수 있으며 사용자가 표시된 옵션을 선택하거나 선택 취소할 수 있습니다. HTML 체크박스는 예/아니오 진술 또는 동의 종류 진술의 형태로 사용자 선택에 사용될 수 있습니다. 이 값에 따라 다양한 기능을 구현할 수 있습니다.

구문:

다른 입력 유형 매개변수와 마찬가지로 체크박스의 경우 입력 유형을 '체크박스'로 변경하겠습니다.

<input type="checkbox">

다른 유형의 입력과 마찬가지로 구문에 추가 매개변수를 추가할 수 있습니다.

HTML 체크박스 태그 기능

• HTML 체크박스 태그는 'checked' 매개변수로 입력 요소에 true 또는 false 값을 할당합니다.
• 체크박스를 클릭하면 이 요소의 값이 true 또는 false로 수정되어 추가 확인에 사용될 수 있습니다.

HTML 체크박스 태그 예시

다음은 HTML 체크박스 태그의 예입니다.

예 #1 – 간단한 체크박스 만들기

코드:

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 150px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare input box with type as checkbox, we have also assigned name to this element-->
Checkbox 1 <input type="checkbox" name="checkbox1">

Checkbox 2 <input type="checkbox" name="checkbox2">
<p id="result"> </p>
</div>

출력:

여기서는 웹 페이지에서 두 개의 입력 요소인 Checkbox 1과 Checkbox 2를 선언했습니다. 체크박스 클릭 시 아무런 조치도 취하지 않았습니다.

예 #2 – 다중 선택 요소.

코드:

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4 id="Choose-languages"> Choose languages </h4>
<div>
<input type="checkbox" name="English">
<label for="English"> English </label>
</div>
<div>
<input type="checkbox" name="Hindi">
<label for="Hindi"> Hindi </label>
</div>
<div>
<input type="checkbox" name="German">
<label for="German"> German </label>
</div>
<div>
<input type="checkbox" name="French">
<label for="French"> French </label>
</div>
<p id="result"> </p>
</div>

출력:

이 예는 여러 체크박스 입력 요소를 동시에 만드는 방법을 보여줍니다. 여기서는 언어 선택을 위한 총 4개의 확인란 요소를 만들었습니다. 한 번에 두 개 이상의 확인란을 선택할 수 있습니다. 이는 표시된 모든 요소 옵션 중에서 하나의 옵션만 선택할 수 있는 라디오 버튼 입력과 대조됩니다.

예 #3 – 속성 확인

지금까지의 예에서 볼 수 있듯이 웹페이지 로딩 시 확인란이 선택 취소되어 있습니다. 체크박스를 기본값으로 표시하려면 체크박스 요소와 함께 “checked” 속성을 사용하면 됩니다.

코드:

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4 id="Choose-languages"> Choose languages </h4>
<div>
<input type="checkbox" name="English" checked>
<label for="English"> English </label>
</div>
<div>
<input type="checkbox" name="Hindi" checked>
<label for="Hindi"> Hindi </label>
</div>
<div>
<input type="checkbox" name="German">
<label for="German"> German </label>
</div>
<div>
<input type="checkbox" name="French">
<label for="French"> French </label>
</div>
<p id="result"> </p>
</div>

출력:

여기서는 4개의 체크박스 요소 중 기본적으로 체크된 상태로 로드되도록 2개의 체크박스를 만들었습니다. 처음 두 언어는 기본적으로 선택되어 표시됩니다.

예 #4 – HTML 형식의 체크박스

체크박스를 사용하는 또 다른 방법입니다. HTML 형식으로 추가될 예정이며, 체크박스 체크 여부를 어떻게 식별하는지 살펴보겠습니다.

코드:

<title>
Checkbox in HTML
</title>
<style>
.results {
border : green 1px solid;
background-color : aliceblue;
text-align : left;
padding-left : 20px;
height : 200px;
width : 95%;
}
.resultText {
font-size : 20px;
font-style : normal;
color : blue;
}
</style>


<div class="results">
<h2 id="Check-Box-Example"> Check Box Example: </h2>
<form>
<div>
Checkbox 1 <input type="checkbox" name="checkbox1" id="selected" value="Yes">
</div>
<br>
<div>
Checkbox 2 <input type="checkbox" name="checkbox2" id="selected" value="Yes">
</div>

<div>
<button type="submit"> Submit </button>
</div>
</form>
<p id="result"> </p>
</div>

출력:

여기서는 양식 요소 내에 체크박스 요소를 포함했습니다. 이는 서버의 확인란 값을 처리하는 데 유용합니다. 제출에는 양식을 서버로 보낼 때 확인란 값이 포함됩니다. URL 값은 체크박스 이름과 체크박스 요소의 값 속성을 결합하여 생성됩니다.

예를 들어 우리의 경우 두 확인란이 모두 선택된 상태로 전송되면 URL에 "checkbox1=Yes&checkbox2=Yes"가 포함됩니다.

결론

체크박스라는 입력 요소를 사용하면 사용자가 HTML에 표시된 옵션을 선택하거나 선택 취소할 수 있습니다. 이 기사에서는 동일한 사용 사례를 여러 개 살펴보았습니다.

위 내용은 HTML 체크박스 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!