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 で使用できる入力要素の一種で、ユーザーがチェックボックスをオンまたはオフのままにし、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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

出力:

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>

ログイン後にコピー

出力:

HTMLチェックボックスタグ

ここでは、form 要素内にチェックボックス要素を含めています。これは、サーバー上のチェックボックスの値を処理する場合に便利です。フォームをサーバーに送信するときに、送信にはチェックボックスの値が含まれます。 URL 値は、チェックボックス名とチェックボックス要素の value 属性を組み合わせて生成されます。

たとえば、この場合、両方のチェックボックスがチェックされた状態で送信されると、URL には「checkbox1=Yes&checkbox2=Yes」が含まれます。