HTML 체크박스 태그-HTML 튜토리얼-php.cn

HTML 체크박스 태그 예시

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

예 #2 – 다중 선택 요소.

예 #3 – 속성 확인

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

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML 체크박스 태그

PHPz

Sep 04, 2024 pm 04:30 PM

html html5 HTML Tutorial HTML Properties HTML tags

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

구문:

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

<input type = "checkbox">

로그인 후 복사

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

HTML 체크박스 태그 기능

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

HTML 체크박스 태그 예시

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

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

코드:

<!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>

로그인 후 복사

출력:

HTML 체크박스 태그

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

예 #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>

로그인 후 복사

출력:

HTML 체크박스 태그

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

예 #3 – 속성 확인

지금까지의 예에서 볼 수 있듯이 웹페이지 로딩 시 확인란이 선택 취소되어 있습니다. 체크박스를 기본값으로 표시하려면 체크박스 요소와 함께 “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>

로그인 후 복사

출력:

HTML 체크박스 태그

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

예 #4 – 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 : 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>

로그인 후 복사

출력:

HTML 체크박스 태그