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

HTMLでページ読み込み時にinput要素を初期選択状態にする方法｜checked属性の使い方

checked属性とは

ページが読み込まれたときに<input>要素をあらかじめ選択済みの状態にしておくには、checked属性を使用します。この属性により、ユーザーが操作する前からチェックボックスやラジオボタンに初期値を設定できます。

checked属性は、次の2種類の入力タイプで利用できます。

<input type="checkbox">
<input type="radio">

使用例

以下のコードを実行すると、HTMLにおけるchecked属性の実際の動作を確認できます。この例では、「サッカー」と「クリケット」のチェックボックスが、ページ読み込み時に最初から選択された状態で表示されます。

<!DOCTYPE html>
<html>
    <body>
        <p>どのスポーツが好きですか？</p>
        <form action="" method="get">
            <input type="checkbox" name="vehicle" value="football" checked> サッカー<br>
            <input type="checkbox" name="vehicle" value="cricket" checked> クリケット<br>
            <input type="checkbox" name="vehicle" value="hockey"> ホッケー<br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

補足ポイント

checked属性はブール属性（論理属性）のため、値を指定する必要はなく、属性名を記述するだけで有効になります。また、チェックボックスでは複数の項目を同時に選択済みにできますが、ラジオボタンの場合は同じname属性を持つグループ内で1つの項目のみを選択できるという違いがあります。フォームの初期状態を意図的に設定したい場合に、この属性は非常に便利です。

  1. HTMLのmeta要素の使い方完全ガイド｜description・viewport・robotsタグの基礎とSEO対策

    この記事では、HTMLの<meta>要素の基本的な使い方から、SEO対策につながる実践的な活用方法までをわかりやすく解説します。 meta要素とは？ <meta>要素は、HTML文書に関するさまざまな種類のメタデータ（メタ情報）を定義するために使用される要素です。メタデータとは「情報」のことであり、より正確に言えば、他のデータについての説明や付加情報を提供するデータのことを指します。 <meta>要素には複数の属性と値が存在しますが、その中でもname属性は最も重要な属性の一つです。 name属性とdescriptionの設定 name属性にはいくつかの

  2. HTMLの<title>要素の正しい使い方とSEO対策のポイント

    この記事では、HTMLの<title>要素の基本的な使い方から、SEOにおける重要性までをわかりやすく解説します。 HTMLの<title>要素は、ウェブサイトのページタイトルを表す要素です。 ページタイトルの確認方法 閲覧中のウェブサイトのページタイトルを確認したい場合は、ブラウザのタブにマウスカーソルを合わせて数秒間静止してみましょう。完全なページタイトルがポップアップ表示されます。 以下はYouTubeで実際に試した例です。 <title>要素の書き方 <title>要素を作成するには、開始タグと終了タグを使い、その間にタイトルとなるテキ