HTMLフォームでラジオボタンを使用する方法をわかりやすく解説
HTMLフォームを使えば、ユーザーからの入力を簡単に受け取ることができます。<form>タグの中に各種フォーム要素を配置することで入力欄を作成でき、テキスト入力、ラジオボタン、送信ボタンなど、さまざまな種類の要素が用意されています。
この記事では、HTMLフォームでラジオボタンを使ってユーザーの選択を受け取る方法を解説します。ラジオボタンは、複数の選択肢の中から1つだけを選ばせたい場合に使用します。他のフォーム要素と同様に<input>タグを使って作成し、type属性に「radio」を指定するのがポイントです。
ラジオボタンの主な属性
| No. | 属性と説明 |
|---|---|
| 1 | type 入力コントロールの種類を示します。ラジオボタンの場合は「radio」を指定します。 |
| 2 | name コントロールに名前を付ける属性です。同じnameを持つラジオボタンは同じグループとして扱われ、サーバーへは「name=値」の形式で送信されます。 |
| 3 | value そのラジオボタンが選択されたときにサーバーへ送信される値です。 |
| 4 | checked 初期状態で選択された状態にしたい場合に指定します。この属性を付けた項目が、ページ表示時にあらかじめ選択された状態になります。 |
なお、同じグループ内のラジオボタンには必ず同じname属性を設定してください。nameが異なると、それぞれ独立したグループとみなされ、複数の項目を同時に選択できるようになってしまいます。
サンプルコード
以下のコードを実行すると、HTMLでのラジオボタンの動作を実際に確認できます。
<!DOCTYPE html> <html> <head> <title>HTMLラジオボタンの例</title> </head> <body> <p>性別</p> <form> <input type="radio" name="gender" value="male">男性 <br> <input type="radio" name="gender" value="female">女性 </form> </body> </html>
この例では、「男性」と「女性」の2つのラジオボタンを作成しています。どちらもname属性が「gender」で共通しているため、同じグループとして認識され、片方を選ぶともう片方の選択が自動的に解除されます。
使いやすさを高めるポイント
実務では、<label>タグでラジオボタンとテキストを関連付けておくと、文字部分をクリックしても選択できるようになり、操作性が向上します。また、checked属性を活用すれば、よく選ばれる選択肢をデフォルトに設定することも可能です。アンケートフォームや申し込み画面など、単一選択が必要な場面でぜひ活用してみてください。
-
HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法
テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html> <body&
-
HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順
HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep