HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのchecked属性とは？チェックボックス・ラジオボタンを初期選択状態にする方法

HTMLのchecked属性は、Webページが読み込まれた時点で<input>要素をあらかじめ選択済み（チェック済み）の状態にするために使用される属性です。

この属性は、ラジオボタン（type="radio"）とチェックボックス（type="checkbox"）の2つの入力タイプで有効です。

ここでは、チェックボックスに対してchecked属性を使用する方法を詳しく見ていきましょう。

checked属性の基本構文

<input type="checkbox" checked>

上記のように「checked」を記述するだけで、ページ読み込み時にそのチェックボックスが最初から選択された状態で表示されます。

実装例

それでは、<input>要素のchecked属性を使った具体的なコード例を見てみましょう。ユーザー登録フォームに、初期状態でチェックが入った「ニュースレター購読」のチェックボックスを追加しています。

<!DOCTYPE html>
<html>
<body>
<h2>Register</h2>
<form action="" method="get">
    Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
    Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
    DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
    Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
    Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
    <input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
    <button type="submit" value="Submit">Submit</button>
</form>
</body>
</html>

出力結果

HTMLのchecked属性とは？チェックボックス・ラジオボタンを初期選択状態にする方法

コードの解説

上記の例では、テキスト入力欄やパスワード欄、日付選択欄など複数の入力要素と送信ボタンを含むフォームを作成しています。

<form action="" method="get">
    Id: <input type="text" name="id" placeholder="Enter UserId here..." size = "25"><br>
    Password: <input type="password" name="pwd" placeholder="Enter password here..."><br>
    DOB: <input type="date" name="dob" placeholder="Enter date of birth here..."><br>
    Telephone: <input type="tel" name="tel" placeholder="Enter mobile number here..."><br>
    Email: <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br>
    <input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription: <br>
    <button type="submit" value="Submit">Submit</button>
</form>

このうち、チェックボックスはtype="checkbox"によって作成しています。ページ読み込み時に初期状態でチェックを入れるために、checked属性を次のように指定しています。

<input type="checkbox" name="vehicle" value="Bike" checked>Newsletter Subscription:

補足ポイント

checked属性は真偽値属性（ブール型属性）のため、「checked」とだけ書けばよく、値は不要です。厳密に書きたい場合は「checked="checked"」と記述することも可能です。

また、JavaScriptから動的に状態を変更したい場合は、element.checked = true / falseのようにプロパティを操作します。初期表示の制御にはHTMLのchecked属性、動的な切り替えにはJavaScriptという使い分けを覚えておくと便利です。

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属