체크박스는 HTML에서 사용할 수 있는 입력 요소 유형으로, 사용자가 선택하거나 선택하지 않은 상태로 둘 수 있으며 웹페이지에 표시되는 옵션을 선택하거나 선택 취소할 수 있습니다. 확인란을 사용하면 애플리케이션이 선택을 위한 입력을 상자 형태로 표시할 수 있으며 사용자가 표시된 옵션을 선택하거나 선택 취소할 수 있습니다. HTML 체크박스는 예/아니오 진술 또는 동의 종류 진술의 형태로 사용자 선택에 사용될 수 있습니다. 이 값에 따라 다양한 기능을 구현할 수 있습니다.
구문:
다른 입력 유형 매개변수와 마찬가지로 체크박스의 경우 입력 유형을 '체크박스'로 변경하겠습니다.
<input type = "checkbox">
다른 유형의 입력과 마찬가지로 구문에 추가 매개변수를 추가할 수 있습니다.
HTML 체크박스 태그 기능
다음은 HTML 체크박스 태그의 예입니다.
코드:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> 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" >
</br>
Checkbox 2 <input type = "checkbox" name = "checkbox2" >
<p id = "result"> </p>
</div>
</body>
</html>출력:
여기서는 웹 페이지에서 두 개의 입력 요소인 Checkbox 1과 Checkbox 2를 선언했습니다. 체크박스 클릭 시 아무런 조치도 취하지 않았습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> 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>
</body>
</html>출력:
이 예는 여러 체크박스 입력 요소를 동시에 만드는 방법을 보여줍니다. 여기서는 언어 선택을 위한 총 4개의 확인란 요소를 만들었습니다. 한 번에 두 개 이상의 확인란을 선택할 수 있습니다. 이는 표시된 모든 요소 옵션 중에서 하나의 옵션만 선택할 수 있는 라디오 버튼 입력과 대조됩니다.
지금까지의 예에서 볼 수 있듯이 웹페이지 로딩 시 확인란이 선택 취소되어 있습니다. 체크박스를 기본값으로 표시하려면 체크박스 요소와 함께 “checked” 속성을 사용하면 됩니다.
코드:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> Check Box Example: </h2>
<!-- Declare two input boxes with type as checkbox -->
<h4> 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>
</body>
</html>출력:
여기서는 4개의 체크박스 요소 중 기본적으로 체크된 상태로 로드되도록 2개의 체크박스를 만들었습니다. 처음 두 언어는 기본적으로 선택되어 표시됩니다.
체크박스를 사용하는 또 다른 방법입니다. HTML 형식으로 추가될 예정이며, 체크박스 체크 여부를 어떻게 식별하는지 살펴보겠습니다.
코드:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<div class = "results">
<h2> 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>
</br>
<div>
<button type = "submit" > Submit </button>
</div>
</form>
<p id = "result"> </p>
</div>
</body>
</html>출력:
여기서는 양식 요소 내에 체크박스 요소를 포함했습니다. 이는 서버의 확인란 값을 처리하는 데 유용합니다. 제출에는 양식을 서버로 보낼 때 확인란 값이 포함됩니다. URL 값은 체크박스 이름과 체크박스 요소의 값 속성을 결합하여 생성됩니다.
예를 들어 우리의 경우 두 확인란이 모두 선택된 상태로 전송되면 URL에 "checkbox1=Yes&checkbox2=Yes"가 포함됩니다.
체크박스라는 입력 요소를 사용하면 사용자가 HTML에 표시된 옵션을 선택하거나 선택 취소할 수 있습니다. 이 기사에서는 동일한 사용 사례를 여러 개 살펴보았습니다.
위 내용은 HTML 체크박스 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
