東京・オンラインでも開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

4.5 ラジオボタン・チェックボックス

ラジオボタン・チェックボックス

4.5 ラジオボタン・チェックボックス

【ここで学ぶ内容】

  • ラジオボタン
  • <input type=”radio” name=”名前” value=”値”>

  • チェックボックス
  • <input type=”checkbox” name=”名前” value=”値”>

ラジオボタン

ラジオボタンは、いくつかの選択肢から1つを選択するための入力部品です。

図 4.5.1 ラジオボタン

では、ラジオボタンを作っていきましょう。

1. ソースコードの記述

先ほど作成した[form.html]のソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch04
②ファイル名     :form.html

➢ form.html

        <p>性別:
        <input type="radio" name="gender" value="man">男性
        <input type="radio" name="gender" value="woman">女性
        </p>
        

ラジオボタンは、掲示板やアンケートなどで、複数の選択肢から1つだけを選択する場合などに用いられます。ボタンは丸印で表現され、選択されているボタンは丸の中に塗りつぶされた点が入ります。

ラジオボタンは、<input>タグのtype属性に、「radio」を指定することで作成できます。

さらに、name属性によって、選択項目をひとつのグループにできます。ラジオボタンのグループが複数あるときにはこの名前で分けられますので、必ずname属性には名前を指定します。

ラジオボタンでは、グループごとに、それぞれ1つを選択することができます。

また、value属性は、選択された項目を識別するための値で、ここで指定された値がデータとして送信されます。例えば、ここでは「男」を選択した場合、実際に送信されるデータは「男」ではなく、「man」となります。

➢ form.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>フォームの作成</title>
        </head>
        <body>
            <form action="" method="POST">
                <p>名前:<input type="text" name="name"></p>
                <p>メッセージ:</p>
                <textarea name="message" rows="5" cols="40"></textarea>
                <p>性別:
                <input type="radio" name="gender" value="man">男性
                <input type="radio" name="gender" value="woman">女性
                </p>
            </form>
        </body>
        </html>
        

2. ブラウザで確認

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。

図 4.5.2

ラジオボタンができました。ボタンのどちらかをクリックすると、クリックしたほうのボタンの中に塗りつぶされた点が入り、そのボタンが選択されたことがわかります。

チェックボックス

先ほど作成したラジオボタンは、複数の選択肢から1つだけを選択するものですが、チェックボックスを利用すると、複数の項目を選択できます。

図 4.5.3 チェックボックス

では、チェックボックスを作っていきましょう。

3. ソースコードの記述

先ほど作成した[form.html]のソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch04
②ファイル名     :form.html

➢ form.html

        <p>好きな動物:
        <input type="checkbox" name="animal" value="dog">犬
        <input type="checkbox" name="animal" value="cat">猫
        <input type="checkbox" name="animal" value="horse">馬
        <input type="checkbox" name="animal" value="monkey">猿
        </p>
        

チェックボックスは、type属性に「checkbox」を指定することで作成できます。name属性を必ず指定し、チェックボックスをひとつのグループにします。value属性は、ラジオボタンと同様に、実際に送信されるデータの値となります。

➢ form.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>フォームの作成</title>
        </head>
        <body>
            <form action="" method="POST">
                <p>名前:<input type="text" name="name"></p>
                <p>メッセージ:</p>
                <textarea name="message" rows="5" cols="40"></textarea>
                <p>性別:
                <input type="radio" name="gender" value="man">男性
                <input type="radio" name="gender" value="woman">女性
                </p>
                <p>好きな動物:
                <input type="checkbox" name="animal" value="dog">犬
                <input type="checkbox" name="animal" value="cat">猫
                <input type="checkbox" name="animal" value="horse">馬
                <input type="checkbox" name="animal" value="monkey">猿
                </p>
            </form>
        </body>
        </html>
        

4. ブラウザで確認

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。

図 4.5.4

チェックボックスができました。「□」のような図形が表示され、クリックすると、そこが選択されていることを示す、「✔」が現れます。

NEXT>> 4.6 セレクトボックス

HTMLとCSSの入門 目次

セミナー一覧

eラーニング

神田ITスクールの就職・転職

HTMLとCSSの入門 目次

HTMLとCSS入門書

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

ホームページ制作・保守

ホームページ制作・保守

他のHTML及びCSSの講座・スクールの紹介

セミナー講師

セミナー講師

主席インストラクター&管理人

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.