この記事では、実際の例を使用して HTML ラジオ ボタンを作成する方法を説明します。
HTMLにラジオボタンを追加する方法は?
HTML でラジオ ボタンを追加するには、以下の構文に従います。
< 入力 タイプ = '無線' 名前 = '' 価値 = '' >
記載されている構文の説明は次のとおりです。
- 「 タイプ 」: この属性は、テキスト、ラジオ、チェックボックスなど、作成する入力のタイプを指定します。ラジオ ボタンを作成するには、属性値を「radio」に設定する必要があります。
- 「 名前 ”: 入力要素の名前を定義します。この属性は、ラジオ ボタンのリストと同じである必要があります。
- 「 価値 ”: これは、ラジオ ボタンがチェックされているときにサーバーに送信される値を指定します。
例: HTML でのラジオ ボタンの追加
この例では、input ラジオ ボタンを使用して HTML にラジオ ボタンを追加する手順について説明します。の
ステップ 1: HTML ファイルの作成
まず、HTML ファイルに
タグを追加します。
< 分周 > 分周 >
作成された
内:
< p > あなたの好きな色はどれですか？ p >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '赤' チェック済み >
< ラベル 為に = 「ラジオ1」 > 赤 ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '青い' >
< ラベル 為に = 「ラジオ1」 > 青い ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '緑' >
< ラベル 為に = 「ラジオ1」 > 緑 ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '紫の' >
< ラベル 為に = 「ラジオ1」 > 紫の ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = 「その他」 >
< ラベル 為に = 「ラジオ1」 > その他 ラベル >
背景色: #8197f0;
ボーダー: 5px ドット #13023a;
パディング: 20px 100px;
フォントサイズ: 20px;
font-family: 筆記体。
}
- まず、「 」タグを使用して、ページに見出しを付けます。
- 次に、「 」 段落またはテキスト行のタグ。
- その後、入力タグに属性「」が追加されます タイプ 「価値がある」 無線 」、名前は選択として設定され、「 価値 ' なので ' 赤 」。同じ名前のすべてのラジオ ボタンに異なる値が与えられます。同じ名前は、同じグループまたはリストを表します。
- デフォルトでチェック済みとしてマークされているボタンを追加する場合は、属性「 チェック済み 」をそのボタンに。
- 最後に、「 <ラベル> 各ラジオ ボタンの ” 要素を使用して、キャプションを追加します。また、アクセシビリティも向上します。
以下のコードは、上記のシナリオの解釈です。
< h1 > HTMLラジオボタン h1 >< p > あなたの好きな色はどれですか？ p >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '赤' チェック済み >
< ラベル 為に = 「ラジオ1」 > 赤 ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '青い' >
< ラベル 為に = 「ラジオ1」 > 青い ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '緑' >
< ラベル 為に = 「ラジオ1」 > 緑 ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = '紫の' >
< ラベル 為に = 「ラジオ1」 > 紫の ラベル >
< br >
< 入力 タイプ = '無線' 名前 = 「色を選ぶ」 価値 = 「その他」 >
< ラベル 為に = 「ラジオ1」 > その他 ラベル >
ラジオ ボタンが正常に作成されていることがわかります。
以下の CSS コードに従って、上記で作成したラジオ ボタンにスタイルを適用することもできます。
ステップ 2: スタイルを HTML に適用する
「 分周 」は、HTML ファイルで作成した div タグを示します。
- まず、「 背景色 」プロパティは「 #8197f0 」。
- 「 国境 」プロパティは「 5px 点線 #13023a ここで、5px は境界線の幅を表し、点線は線の種類を示し、次は境界線の色を示します。
- 「 パディング 」は「 20px 100px ここで、20px は上下からのパディングを指定し、100px は左右からのパディングを示します。
- フォントのスタイリングには、「 フォントファミリー ”プロパティ値として” 筆記体 」。
CSS
分周 {背景色: #8197f0;
ボーダー: 5px ドット #13023a;
パディング: 20px 100px;
フォントサイズ: 20px;
font-family: 筆記体。
}
div 要素が正常にスタイル設定されていることがわかります。
それでおしまい！ HTMLラジオボタンについて詳しく説明しました。
結論
ラジオ ボタンは、2 つ以上のオプションのグループとして常に表示される入力です。このグループから、ユーザーは 1 つのオプションのみを選択できます。 HTML では、「 <入力> ” 値を持つ属性 type を持つタグ “ 無線 」。このブログでは、HTML にラジオ ボタンを追加する方法を示しました。