- ベストアンサー
ラジオボタンで段階評価のフォームを作りたい
- Webアンケートで使用するために、ラジオボタンを用いた段階評価のフォームの作り方を知りたい
- 段階評価のフォームをHTMLとCSSのみで実現する方法を教えてください
- ラジオボタンの背景に目盛の画像を表示させる方法を教えてください
- turn-it-up
- お礼率50% (11/22)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<html> <head> <style type="text/css"><!-- dt{ margin-top:1em;} #test1{ width:240px; height:50px; background: white url(メモリ画像.gif) no-repeat 0 .6em;} #test1 label{ display:block; width:48px; float:left;} /* 上記↑評価１のCSS 下記↓評価２のCSS */ #test2{ width:240px;} #test2 label,#test2 input{ display:block;} #test2 label{ width:48px; float:left; text-indent:6px;} --></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は関係ないとして、 背景画像が表示出来ない環境の場合、何も出来なくなりますので、ラジオボタンと関連するテキストを示した方が良いのでは？と感じます。 （それを言えば普通の横一列のフォームボタンになりますがｗ） 背景で目盛を表示する場合には、各親要素で背景画像を表示すれば可能です。 評価２のように縦にするのも見やすいかも。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ボーダーの上にラジオボタンを重ねてみました。 <!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> </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>
お礼
ご回答ありがとうございます。 「ボーダーを使う方法があるか」、と思わず唸ってしまいました。 これならばブラウザにあまり依存しないことでしょうし、確実ですね。 使用の目的上、画像を背景に配置する方の回答をベストアンサーとさせて頂きましたが、 fujillinさんの発想も素晴らしいと思いました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます。 labelと言うCSSタグがあるとは知りませんでした。 とても便利そうで、びっくりしております。 ラジオボタンと関連するテキストを縦で(２段で)表示することは考えていたのですが、 １文字の数字だけではなく、「難しい」と「優しい」などの対義語の文字列を両端に表示させる可能性もあり、躊躇しておりました。 回答のソースを参考に、labelを用いて書き直してみましたら、 文字列でもwidthをちゃんと指定すれば、崩れることなくちゃんと表示させられるようですね。 勉強になりました。 とりあえずは、目盛も表示させたいので、画像を用いて製作していこうと思います。 CSSは、なかなかゼロから考えるのが苦手なので、とても勉強になりました。 重ね重ね、ありがとうございました。