東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けの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の入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

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

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

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

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

ホームページ制作・保守

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