ラジオボタンを必須入力にする方法
ラジオボタンを必須入力にする方法を紹介します。複数の選択肢を用意したフォームでは、ユーザーが何も選ばないまま送信してしまうことがあります。このサンプルでは、送信ボタンを押した時点でラジオボタンの選択状態を確認し、未選択の場合はエラーメッセージを表示します。
HTMLでラジオボタンと送信ボタンを配置し、CSSでフォームやエラーメッセージのデザインを整え、JavaScriptで入力チェックを行います。いずれかの項目が選択されている場合は送信完了メッセージを表示し、選択内容も画面上で確認できます。外部ライブラリを使用しないため、コードの仕組みを理解しやすく、初心者でも導入しやすい構成です。
お問い合わせフォームの連絡方法、会員登録画面のプラン選択、ECサイトの配送方法や支払い方法、アンケートの回答など、必ず1つ選択してもらいたい場面で利用できます。選択肢の追加や項目名の変更、エラー文や完了メッセージの編集も行えるため、実際のWebフォームへ合わせてカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
何も選択せずに送信するとエラーメッセージが表示されます。配送方法を1つ選択して送信すると、選択した内容が表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<meta charset="UTF-8">
<!-- スマートフォンやタブレットの画面幅へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>ラジオボタンを必須入力にする方法</title>
<!-- フォームのデザインを設定するCSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 必須入力のラジオボタンフォーム -->
<form class="required-radio-button_form" id="required-radio-button-form" novalidate>
<!-- フォームのタイトル -->
<div class="required-radio-button_title">
配送方法を選択
<!-- 必須項目であることを示す表示 -->
<span class="required-radio-button_required">
必須
</span>
</div>
<!-- 操作方法を案内する説明文 -->
<p class="required-radio-button_text">
配送方法を1つ選択してから送信してください。
</p>
<!-- ラジオボタン一覧 -->
<div class="required-radio-button_list">
<!-- 通常配送の選択項目 -->
<label class="required-radio-button_label">
<!-- 通常配送を選択するラジオボタン -->
<input
class="required-radio-button_input"
type="radio"
name="delivery"
value="通常配送">
<!-- 通常配送の項目名 -->
<span class="required-radio-button_name">
通常配送
</span>
</label>
<!-- お急ぎ便の選択項目 -->
<label class="required-radio-button_label">
<!-- お急ぎ便を選択するラジオボタン -->
<input
class="required-radio-button_input"
type="radio"
name="delivery"
value="お急ぎ便">
<!-- お急ぎ便の項目名 -->
<span class="required-radio-button_name">
お急ぎ便
</span>
</label>
<!-- 日時指定便の選択項目 -->
<label class="required-radio-button_label">
<!-- 日時指定便を選択するラジオボタン -->
<input
class="required-radio-button_input"
type="radio"
name="delivery"
value="日時指定便">
<!-- 日時指定便の項目名 -->
<span class="required-radio-button_name">
日時指定便
</span>
</label>
<!-- 店舗受け取りの選択項目 -->
<label class="required-radio-button_label">
<!-- 店舗受け取りを選択するラジオボタン -->
<input
class="required-radio-button_input"
type="radio"
name="delivery"
value="店舗受け取り">
<!-- 店舗受け取りの項目名 -->
<span class="required-radio-button_name">
店舗受け取り
</span>
</label>
</div>
<!-- 未選択時のエラーメッセージ表示エリア -->
<p
class="required-radio-button_error"
id="required-radio-button-error"
aria-live="polite">
</p>
<!-- 選択内容を確認する送信ボタン -->
<button class="required-radio-button_submit" type="submit">
選択内容を送信
</button>
<!-- 送信成功時の結果表示エリア -->
<p
class="required-radio-button_result"
id="required-radio-button-result"
aria-live="polite">
</p>
</form>
<!-- 必須入力チェックを行うJavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLファイルでラジオボタン、必須表示、送信ボタン、メッセージ表示エリアを配置し、CSSファイルでフォーム全体の見た目を整えます。JavaScriptファイルでは送信時にラジオボタンの選択状態を確認し、未選択の場合はエラーメッセージ、選択済みの場合は選択内容を表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
ラジオボタンの選択肢、必須表示、送信ボタン、エラーメッセージと送信結果の表示エリアを配置します。項目名や選択肢の数、送信ボタンの文言を変更できます。
style.css
フォーム全体の横幅、背景色、枠線、余白、文字サイズ、必須表示、エラーメッセージ、送信ボタン、レスポンシブ対応などの見た目を設定します。
script.js
送信ボタンを押したときに選択済みのラジオボタンを確認します。未選択の場合はエラーメッセージを表示し、選択済みの場合は選択した配送方法を送信結果として表示します。ラジオボタンを変更したときは、前回表示されたメッセージを削除します。
設置方法・使い方
index.html、style.css、script.jsを同じsampleフォルダ内へ配置します。sampleフォルダ内の index.html をブラウザで開くと利用できます。何も選択せずに送信ボタンを押すとエラーメッセージが表示され、いずれかの配送方法を選択して送信すると選択内容が表示されます。
カスタマイズできる内容
index.htmlではラジオボタンの項目名、選択肢の数、value属性、タイトル、説明文、送信ボタンの文言を変更できます。style.cssではフォームの背景色、枠線、角丸、余白、文字サイズ、必須表示の配色、エラーメッセージの色、送信ボタンの配色を変更できます。script.jsでは未選択時のエラーメッセージと、選択済みの場合に表示する送信結果の文章を変更できます。
数値調整
max-width:760px;
760pxはフォーム全体の最大横幅です。値を大きくすると表示領域が広くなります。
padding:36px;
36pxはフォーム全体の内側余白です。値を大きくすると内容と外枠の間隔が広くなります。
gap:16px;
16pxはラジオボタン項目同士の間隔です。値を大きくすると縦方向の余白が広がります。
min-height:62px;
62pxは各ラジオボタン項目の最小高さです。値を大きくするとクリックやタップができる範囲が高くなります。
min-height:27px;
27pxはエラーメッセージ表示エリアの最小高さです。メッセージが表示されていない場合でも高さを確保し、送信時のレイアウト変化を抑えます。
min-height:29px;
29pxは送信結果表示エリアの最小高さです。結果表示の有無によるレイアウトの移動を抑えます。
border-radius:18px;
18pxはフォーム全体の角丸です。値を大きくすると丸みが強くなります。
border-radius:14px;
14pxは各ラジオボタン項目の角丸です。値を変更すると項目の丸みが変わります。
border-radius:12px;
12pxは送信ボタンの角丸です。値を大きくするとボタンの丸みが強くなります。
width:22px;
height:22px;
22pxはラジオボタン本体の大きさです。値を変更するとラジオボタンのサイズが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、box-sizing:border-box、および画面幅640px以下のmedia queryを使用しています。スマートフォン表示ではフォームの余白、タイトルサイズ、ラジオボタン項目の余白、項目名の文字サイズを縮小するため、スマートフォン・タブレット・PCで利用できます。
コメント