ラジオボタンで段階評価のフォームを作りたい

2023/08/11 02:33

このQ&Aのポイント

Webアンケートで使用するために、ラジオボタンを用いた段階評価のフォームの作り方を知りたい
段階評価のフォームをHTMLとCSSのみで実現する方法を教えてください
ラジオボタンの背景に目盛の画像を表示させる方法を教えてください

ベストアンサー

ラジオボタンで段階評価

2011/04/07 19:56

ご覧頂きありがとうございます。現在、Webアンケートを実施するために、ラジオボタンを用いて、添付画像のような段階評価のフォームを作りたいと考えています。「SD法」と呼ばれるアンケートの種類に用いるためで、選択肢が等間隔に並んでいることが目盛で分かることが条件です。作るにあたって、改変が容易である、と言った事を度外視し、とりあえずなるべく少ない言語(出来ればHTMLとCSSと画像のみ)での実現を目指しています。複数のブラウザ、場合によってはスマートフォンなどでも閲覧することが想定されるためです。 HTML5だとrangeで標準装備になるようですが、HTML4.01で、そしてCSSだけで作れればベストと考えております。 JavaScriptで、スライダーとしても作ってみたのですが、iPadでの感触が良くなかったのもあり、試行錯誤の結果、ラジオボタンを５つ配置し、その背景に目盛の画像を表示出来れば一番簡単かつ安全ではないか、と思っています。 (CGIでデータを受け渡す予定ですが、CGIに不得手なのもあり、シンプルなソースを目指しています) 以上を踏まえまして、『ラジオボタンの背景に画像を表示させる方法』 (→ページの背景自体に目盛入りの画像を用意するしかないでしょうか？) をご存知の方がいらっしゃいましたら、お教えて頂ければ幸いです。また、それよりも簡単な方法で、『ラジオボタンで段階評価させる方法』をご存知の方がいらっしゃいましたら、合わせてお願い致します。

この投稿のマルチメディアは削除されているためご覧いただけません。

turn-it-up
お礼率50% (11/22)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2011/04/08 03:44 回答No.1

<html> <head> <style type="text/css"></style> </head> <body> <div> <dl> <dt>評価１</dt> <dd id="test1"> <label for="r01"><input type="radio" name="test" id="r01"> </label> <label for="r02"><input type="radio" name="test" id="r02"> </label> <label for="r03"><input type="radio" name="test" id="r03"> </label> <label for="r04"><input type="radio" name="test" id="r04"> </label> <label for="r05"><input type="radio" name="test" id="r05"> </label><br style="clear: left;"> </dd> <dt>評価２</dt> <dd id="test2"> <label for="r06">1<input type="radio" name="test2" id="r06"> </label> <label for="r07">2<input type="radio" name="test2" id="r07"> </label> <label for="r08">3<input type="radio" name="test2" id="r08"> </label> <label for="r09">4<input type="radio" name="test2" id="r09"> </label> <label for="r10">5<input type="radio" name="test2" id="r10"> </label><br style="clear: left;"> </dd> </dl> </div> </body> </html> 表示方法にCGIは関係ないとして、背景画像が表示出来ない環境の場合、何も出来なくなりますので、ラジオボタンと関連するテキストを示した方が良いのでは？と感じます。（それを言えば普通の横一列のフォームボタンになりますがｗ）背景で目盛を表示する場合には、各親要素で背景画像を表示すれば可能です。評価２のように縦にするのも見やすいかも。

質問者

お礼 2011/04/14 12:21

ありがとうございます。 labelと言うCSSタグがあるとは知りませんでした。とても便利そうで、びっくりしております。ラジオボタンと関連するテキストを縦で(２段で)表示することは考えていたのですが、１文字の数字だけではなく、「難しい」と「優しい」などの対義語の文字列を両端に表示させる可能性もあり、躊躇しておりました。回答のソースを参考に、labelを用いて書き直してみましたら、文字列でもwidthをちゃんと指定すれば、崩れることなくちゃんと表示させられるようですね。勉強になりました。とりあえずは、目盛も表示させたいので、画像を用いて製作していこうと思います。 CSSは、なかなかゼロから考えるのが苦手なので、とても勉強になりました。重ね重ね、ありがとうございました。

その他の回答 (1)

fujillin
ベストアンサー率61% (1594/2576)

2011/04/08 11:24 回答No.2

ボーダーの上にラジオボタンを重ねてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> .hoge { width:8.1em; height:3em; } .hoge div { margin-left:0.8em; width:6.4em; border-bottom:2px groove #888; } .hoge ul { list-style-type:none; position:relative; margin:-0.55em 0 0 0; padding:0; } .hoge ul li { width:1.6em; text-align:center; float:left; } </style> </head> <body> <div class="hoge"> <div>&#160</div> <ul> <li><input type="radio" name="Q1" value="1"><br>1</li> <li><input type="radio" name="Q1" value="2"></li> <li><input type="radio" name="Q1" value="3"></li> <li><input type="radio" name="Q1" value="4"></li> <li><input type="radio" name="Q1" value="5"><br>5</li> </ul> </div> </body> </html>

質問者

お礼 2011/04/14 12:27

ご回答ありがとうございます。「ボーダーを使う方法があるか」、と思わず唸ってしまいました。これならばブラウザにあまり依存しないことでしょうし、確実ですね。使用の目的上、画像を背景に配置する方の回答をベストアンサーとさせて頂きましたが、 fujillinさんの発想も素晴らしいと思いました。