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

HTMLのinput要素におけるchecked属性の使い方を解説

checked属性とは

input要素のchecked属性は、Webページが読み込まれた時点で、チェックボックス（type="checkbox"）にあらかじめチェックが入った状態で表示するための属性です。ラジオボタン（type="radio"）に対しても同様に使用できます。

基本的な記述方法（構文）は以下のとおりです。

<input type="checkbox" checked>

上記のように「checked」を指定することで、ページ読み込み時にチェックボックスが選択された状態になります。

実装例

それでは、input要素のchecked属性を使った具体的なサンプルコードを見ていきましょう。以下は、会員登録フォームにチェックボックスを配置した例です。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>登録フォーム</h2>
<form action="" method="get">
ID：<input type="text" name="id" placeholder="ユーザーIDを入力してください..." size="25"><br>
パスワード：<input type="password" name="pwd" placeholder="パスワードを入力してください..."><br>
生年月日：<input type="date" name="dob"><br>
電話番号：<input type="tel" name="tel" placeholder="電話番号を入力してください..."><br>
メールアドレス：<input type="email" name="email" placeholder="メールアドレスを入力してください..." size="35"><br><br>
<input type="checkbox" name="vehicle" value="Bike" checked>ニュースレター購読：<br>
<button type="submit" value="Submit">送信</button>
</form>
</body>
</html>

実行結果

HTMLのinput要素におけるchecked属性の使い方を解説

上記の例では、複数の入力項目と送信ボタンを持つフォームを作成しています。その中で、チェックボックス部分は次のように記述しています。

<input type="checkbox" name="vehicle" value="Bike" checked>ニュースレター購読：

ご覧のとおり、checked属性を指定しているため、ページが読み込まれた瞬間に、このチェックボックスにはすでにチェックが入った状態で表示されます。

まとめ

checked属性を活用すれば、利用者にとって便利なデフォルト状態を簡単に設定できます。規約への同意チェックや、よく選択されるオプションの初期値など、ユーザーの操作の手間を減らしたい場面でぜひ活用してみてください。なお、JavaScriptから動的にチェック状態を変更したい場合は、checkedプロパティ（element.checked）を使用します。

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

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

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

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