[HTML] RadioButtonを利用する
このページのタグ:[HTML]
HTMLでRadioButtonを利用するコードを紹介します。

概要

HTMLでRadioButtonを表現する場合はINPUTタグを利用します。typeに"radio"を指定します。

書式

<input id="(id)" name="(グループ名)" type="radio"></input>

値の取得

チェックされた値を取得するにはフォームのサブミットを利用するか、JavaScriptで取得する方法があります。JavaScriptでラジオボタンのチェックを亜取得するコードについてはこちらの記事を参照してください。

コード例


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>

</head>
<body>
  <form name="form1" action="">
    <input id="Radio1" name="RadioGroup1" type="radio" /><label for="Radio1">ラジオボタン 要素1</label><br/>
    <input id="Radio2" name="RadioGroup1" type="radio" /><label for="Radio2">ラジオボタン 要素2</label><br />
    <input id="Radio3" name="RadioGroup1" type="radio" /><label for="Radio3">ラジオボタン 要素3</label><br />
  </form>
  <div id="output"></div>
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで開くと、下図の画面が表示されます。


クリックするとラジオボタンのチェックを変更できます。


複数グループで利用する場合


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
  <form name="form1" action="">
    <div style="margin:16px;border:dotted 1px #202020;">
      <input id="Radio1" name="group01" type="radio" /><label for="Radio1">チェック項目1</label><br />
      <input id="Radio2" name="group01" type="radio" /><label for="Radio2">チェック項目2</label><br />
      <input id="Radio3" name="group01" type="radio" /><label for="Radio3">チェック項目3</label><br />
    </div>
    <div id="output1"></div>

    <div style="margin:16px;border:dotted 1px #202020;">
      <input id="Radio4" name="group02" type="radio" /><label for="Radio4">チェック項目4</label><br />
      <input id="Radio5" name="group02" type="radio" /><label for="Radio5">チェック項目5</label><br />
      <input id="Radio6" name="group02" type="radio" /><label for="Radio6">チェック項目6</label><br />
    </div>
    <div id="output2"></div>
  </form>

</body>
</html>

解説

ラジオボタンを複数のグループに分ける場合は name属性をグループごとに違った名称に設定します。上記の例では、Radio1, Radio2, Radio3 のname属性が group1となっており、この3つのラジオボタンのチェックは排他になります。 Radio4, Radio5, Radio6 のname属性はgroup2となっており、この3つのラジオボタンのチェックも排他になりますが、group1のラジオボタンとはチェックは排他になりません。

表示結果

上記のHTMLファイルをWebブラウザで開くと、下図の画面が表示されます。


それぞれのグループごとに分かれてラジオボタンのチェックが排他になります。



登録日 :2016-07-29    最終更新日 :2016-07-29
このページのタグ:[HTML]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)