ホームページ > 記事 > ウェブフロントエンド > HTMLチェックボックスタグ
HTMLチェックボックスタグ
- PHPzオリジナル
- 2024-09-04 16:30:43407ブラウズ
チェックボックスは、HTML で使用できる入力要素の一種で、ユーザーがチェックボックスをオンまたはオフのままにし、Web ページに表示されるオプションを選択または選択解除できるようにします。チェックボックスを使用すると、アプリケーションで選択用の入力をボックスの形式で表示できるようになり、表示されたオプションを選択または選択解除するためのユーザー アクセスが提供されます。 HTML チェックボックスは、はい/いいえステートメントまたは同意の種類のステートメントの形式でユーザー選択に使用できます。この値に応じて、さまざまな機能を実現できます。
構文:
他の入力タイプのパラメーターと同様に、チェックボックスの場合は入力のタイプを「チェックボックス」に変更します。
<input type = "checkbox">
他のタイプの入力と同様に、構文にパラメータを追加できます。
HTMLチェックボックスタグの機能
- HTML チェックボックス タグは、true または false の値をパラメータ「checked」として入力要素に割り当てます。
- チェックボックスをクリックすると、この要素の値が 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>
出力:
ここでは、Web ページ上で 2 つの入力要素をチェックボックス 1 とチェックボックス 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>
出力:
この例は、複数のチェックボックス入力要素を同時に作成する方法を示しています。ここでは、言語を選択するために合計 4 つのチェックボックス要素を作成しました。一度に複数のチェックボックスを選択できることに注意してください。これは、表示されるすべての要素オプションから 1 つのオプションのみを選択できるラジオ ボタン入力とは対照的です。
例 #3 – チェックされた属性。
これまでの例からわかるように、Web ページの読み込み時にはチェックボックスがオフになっています。デフォルトとしてチェックされたチェックボックスを表示したい場合は、checkbox 要素で「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 つのチェックボックスを作成しました。最初の 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>
出力:
ここでは、form 要素内にチェックボックス要素を含めています。これは、サーバー上のチェックボックスの値を処理する場合に便利です。フォームをサーバーに送信するときに、送信にはチェックボックスの値が含まれます。 URL 値は、チェックボックス名とチェックボックス要素の value 属性を組み合わせて生成されます。
たとえば、この場合、両方のチェックボックスがチェックされた状態で送信されると、URL には「checkbox1=Yes&checkbox2=Yes」が含まれます。
結論
チェックボックスと呼ばれる入力要素を使用すると、ユーザーは HTML で表示されるオプションを選択または選択解除できます。この記事では、同じものの複数の使用例を見てきました。
以上がHTMLチェックボックスタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。