フォーム用ラジオボタンを作る方法【HTML/CSS・サンプルコード付き】

フォーム

フォーム用ラジオボタンを作る方法

フォーム用ラジオボタンを作る方法を紹介します。本記事では、HTMLとCSSを使用して選択肢の中から1つだけ選べるフォーム用ラジオボタンを作成する方法を、サンプルコード付きで分かりやすく解説します。性別や支払い方法、配送方法など、複数の候補から1つだけ選択してもらいたい場面で利用できる基本的な入力パーツです。シンプルな構成のため、そのままコピーしてさまざまなフォームへ導入できます。

このサンプルコードを利用すると、見やすく操作しやすいラジオボタンを簡単に設置できます。HTMLとCSSのみで実装しているため、JavaScriptを使用せずに利用でき、既存のWebサイトや業務システムへ組み込みやすい点も特徴です。デザインや余白、文字サイズなども自由に変更できるため、用途やサイトデザインに合わせて柔軟にカスタマイズできます。

フォーム用ラジオボタンは、お問い合わせフォームや会員登録フォーム、アンケート、予約システムなど、多くのWebサービスで利用されています。基本的な実装方法を覚えておけば、さまざまな入力フォームへ応用することが可能です。一からコードを書く手間を減らしたい方や、実際に動作するサンプルを参考にしながら学習したい方にも活用しやすい内容となっています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

お問い合わせフォーム

ご希望の連絡方法を選択してください。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <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>

  <!-- ラジオボタン全体を囲むエリア -->
  <div class="form-radio-button_wrap">

    <!-- タイトル -->
    <div class="form-radio-button_title">
      お問い合わせフォーム
    </div>

    <!-- 説明文 -->
    <p class="form-radio-button_text">
      ご希望の連絡方法を選択してください。
    </p>

    <!-- ラジオボタン一覧 -->
    <div class="form-radio-button_group">

      <label class="form-radio-button_label">

        <!-- checked を付けると初期状態で選択される -->
        <input class="form-radio-button_input" type="radio" name="contact" value="email" checked>

        メール

      </label>

      <label class="form-radio-button_label">

        <input class="form-radio-button_input" type="radio" name="contact" value="phone">

        電話

      </label>

      <label class="form-radio-button_label">

        <input class="form-radio-button_input" type="radio" name="contact" value="chat">

        チャット

      </label>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSをそれぞれ別ファイルに分けて使用します。index.html と style.css を同じフォルダに配置してください。 

sample/
├── index.html
└── style.css

index.html をブラウザで開くと、フォーム用ラジオボタンの表示を確認できます。CSSを編集することで、選択肢の余白、枠線、背景色、ラジオボタンの色などを変更できます。

コメント