HTML入力のradioに関する例

HTML input radioは、選択肢を1つ選択するための入力要素です。ユーザーは選択肢のグループから1つ選択できます。

以下に、HTML入力ラジオのサンプルを示します。

<form>
<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label>

<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>

<input type="radio" id="option3" name="options" value="option3">
<label for="option3">Option 3</label>
</form>

上記の例では、3つの選択肢を持つラジオ ボタン グループを作成しています。選択肢は、input 要素と label 要素のペアで構成されています。

input 要素の type 属性を radio に設定して、ラジオボタンであることを指定します。

id属性は各選択肢を一意に識別するために使用されます。

name属性は、オプションをグループ化するために使用されます。これにより、ユーザーは同じグループから1つのオプションのみを選択できるようになります。

value属性はオプションの値を指定します。この値はユーザーがこのオプションを選択したときにサーバに送信されます。

ラベル要素のfor属性は対応する入力要素のid属性と一致するように設定し、ユーザーがラベルをクリックしたときに、対応するオプションが選択されるようにします。

上記の例では、ユーザーは1つの選択肢のみを選択できます。それぞれが同じ「name」属性を持っているためです。複数の選択肢を選択できるようにしたい場合、各選択肢の「name」属性を異なる値に設定します。

CSSスタイルを使用してラジオボタンの見た目をカスタマイズできます。選択されたオプションを強調するために、さまざまなスタイルを適用できます。

HTML input radio の基本的な使い方と簡単なサンプルを示しました。必要に応じて、サンプルを拡張してカスタマイズできます。