• 締切済み

フォームタグのプルタウンの隙間が開くのは何故?

フォームタグにプルタウンメニューっていうのがありますよね。 クリックするとびろろーんとでるやつです。 タグはこれです。 <FORM> <SELECT NAME="bl2" onChange="if(document.bl.bl2.value){location.href=document.bl.bl2.value;}"> <OPTION SELECTED>・・・内容・・・ </SELECT> <!--<INPUT TYPE="button" VALUE="Go!" onClick="menuLink(document.form1.bl2.options [ document.form1.bl2.selectedIndex ] .value)">--> </FORM> です。しかし・・・これを使うと何故か上下に隙間ができます。 図はこんな感じです。 オブジェクト プルタウンメニュー オブジェクト このような感じでどうしても隙間があいてしまうのですが どうすればこの隙間を消せますか?

  • wc13
  • お礼率67% (74/110)
  • HTML
  • 回答数3
  • ありがとう数0

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

本質的には・・・ formタグは段落として機能しているので、改行(らしきもの)があって 当然と考えるべきです。いわゆるpタグと同じです。 どうしてもというなら#1さんのおっしゃるようなスタイルの設定で なさることも可能ですが、あまり推奨されるものではありません。 (divで置き換えについてはいかがなものかとは思いますが・・・) <FORM style="margin:0px;"> とか <FORM style="display:inline;"> とすると、おおむねご希望の状態になると思います。

回答No.2

初めまして。 隙間が出来てしまうのは、<form>と</form>タグがオブジェクトのソ ースのすぐ近くにあるからだと思います。 ↓テーブルタグでレイアウトしている場合の対応策です。 <table> <tr> <td>オブジェクトのソース</td> </tr> </table> <table> <tr> <form> <td>プルダウンのソース</td> </tr> </form> </table><table> <tr> <td>オブジェクトのソース</td> </tr> </table> --------------------------------------------------------------- ページ内にひとつだけ<form>タグを配置するのであれば、<form>タ グを<body>タグのすぐ下に記述して、</form>タグを</body>タグの すぐ上に記述する方法でも問題ないかと思います。 <body> <form> <オブジェクトのソース> <プルダウンのソース> <オブジェクトのソース> </form> </body> </html> よろしければ試してみて下さい。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

(1)<form>と</form>を削除、または<div>と</div>に変える。 (バグのある古いブラウザで表示されなくなる事があります。 が、私的には無視して構わないと思います。) (2)CSS(スタイル)で調整する。 ↓<head>~</head>間に入れる。 <style type="text/css"> form{margin:0;} </style>

関連するQ&A

  • リストボックスを連動させて・・・その2

    直前の質問で下記の回答をいただいたものです。 質問では2つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。 ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript> <!-- strBase = "test.cgi?hinmei=denwa "; strS1 = "&s1="; strS2 = "&s2="; function set(){  strS1b = strS1  strS2b = strS2   if (document.form.s1.options[document.form.s1.selectedIndex].value)   strS1b += document.form.s1.options[document.form.s1.selectedIndex].value;  if (document.form.s2.options[document.form.s2.selectedIndex].value)   strS2b += document.form.s2.options[document.form.s2.selectedIndex].value;  strURL = strBase + strS1b + strS2b;  document.form.text.value = strURL; } //--> </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>

  • 1000円を1,000としますと、計算しません。

    初心者です。WinXP,IE6.0を使っています。 単価×数量=金額 を下記のように作ったのですが、金額の計算をしません。 1,000を1000のようにカンマをはずすと計算します。 金額には、カンマが必要ですので是非付けたいのですが、良い方法はないものでしょうか? どなたか教えてください。 よろしくお願いします。 <select name="NumItem" onChange="document.form1.prcItem.value=1,000*document.form1.NumItem.options[document.form1.NumItem.selectedIndex].text"> <option selected>1 <option>2 <option>3 <option>4 <option>5 </select>個

  • プルダウンメニューの選択時のリンク先について

    「プルダウンメニューから選択すると、別ページにリンク」するページを 作成したいです。 以下の様に途中まではできたのですが、 「フレームを使わず、同じウインドウの別の箇所にリンク先を表示  ※プルダウンメニューはそのまま表示」 がどうしてもできません。xmlで作成している関係上、phpも使えません。 何か方法はありませんでしょうか。 <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") {window.aaa.location.href=linkLoc;} } //--> </SCRIPT> <form> <SELECT onChange="menuLink(this.options[this.selectedIndex].value)"> <OPTION SELECTED>Select</OPTION> <OPTION value="">××</OPTION> <OPTION value="">●●</OPTION> </SELECT> </form>

  • HTML教えて下さい!!!!

    セレクトメニューで別ウィンドウを開きたいのですが出来ません。 教えてください!!よろしくおねがいします。 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" selected>●●●●●</option> <option value="../○○○/○○○/index.html" >●●●●●</option> <option value="../○○○/○○○/index.html">●●●●●A</option> </select> </form></td> </tr> で、ブランクを入れてみたのですが、、、 <tr> <td> <select size="1" onchange="location.href = this.options[selectedIndex].value"> <option value="../○○○/○○○/index.html" target="_blank" selected>●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> <option value="../○○○/○○○/index.html" target="_blank">●●●●●</option> </select> </form></td> </tr> 、、、、ダメでした。間違っているんですよね。。。 よろしくお願いします。

  • フォームの下にスペースが・・・

    下記のようなフォームタグをテーブルの中にいれると、下にスペースが空いてしまいます。 このスペースをなくす方法は、ないのでしょうか? <FORM method="post"> <SELECT name="link"> <OPTION selected value="-">★</OPTION> <OPTION value="-">★</OPTION> </SELECT> <INPUT type="button" value="GO!" onClick="location.href=this.form.link.options[this.form.link.selectedIndex].value"> </FORM> よろしくお願いします。

    • ベストアンサー
    • HTML
  • インラインフレーと複数プルダウンメニューのリンク方法

    はじめまして。他のインラインフレームとプルダウンメニューの質問と 回答も見たのですが、自分のスクリプトと状況とは異なるようで問題の 解決には至っていません。 どなたかご教示頂けますでしょうか。宜しくお願い致します。 質問:3つのプルダウンメニュー(フォームは3つ作成)をひとつの iframe に表示する際のスクリプトの書き方とターゲットの指定方法を 教えてください。 現在のスクリプトは下記の通りです。 <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") { window.location.href=linkLoc;} } //--> </SCRIPT> </HEAD> <IFRAME src="impressum.html" align="middle" scrolling="AUTO" frameborder="0" name="iframe1" width="785" height="400"></IFRAME> <FORM> メニュー1<SELECT onchange="menuLink(this.options[this.selectedIndex].value)" style=': font-size : 13px;font-family : Verdana,"MS Pゴシック";line-height : 18px;width : 200px;position : fixed;'> <OPTION SELECTED>選択してください</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM <FORM> メニュー2<SELECT onchange="menuLink(this.options[this.selectedIndex].value)" style=': font-size : 13px;font-family : Verdana,"MS Pゴシック";line-height : 18px;width : 200px;position : fixed;'> <OPTION SELECTED>選択してください</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM> <FORM> メニュー3<SELECT onchange="menuLink(this.options[this.selectedIndex].value)" style=': font-size : 13px;font-family : Verdana,"MS Pゴシック";line-height : 18px;width : 200px;position : fixed;'> <OPTION SELECTED>選択してください</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM> 見てお分かりの通り、プルダウンメニューとiframeへのつながりが ありません。。。どこにiframeへのターゲットを指定すれば良いかなど が分かりません。自分でも色々試しては見ましたがどんどん分からなく なってきてしまいました。宜しくお願い致します。  

  • IE以外のブラウザで対応するには

    超初心者です、見よう見まねで以下のような、セレクト1を選ぶとセレクト2は「選択」(2を選べばその逆)になる外部javascriptとhtmlを作ってみました。IEでは動く(option valueにリンクする)のですが他(サファリやファイアーフォックス)では全く動きません。どこか変なところがあるのでしょうか?それともIE以外では諦めなければならないでしょうか?ご教授の程、よろしくお願い致します。 #外部javascript(ファイルネーム select.js) var s; function reSel(c) { if(s&&(s!=c)) s.options[0].selected=true; s=c; } function A_Li() { parent.myNew.location.href=document.Link1.select1.options.value;   Sel=document.Link1.select1.selectedIndex;   Ms=document.Link1.select1.options[Sel].value; reSel(document.Link1.select1); } function B_Li() { parent.myNew.location.href=document.Link1.select2.options.value;   Sel=document.Link1.select2.selectedIndex;   Ms=document.Link1.select2.options[Sel].value; reSel(document.Link1.select2); } #以下 HTMLソース <script src="./select.js" type="text/javascript" ></script> <FORM name="Link1"> <select name="select1" onChange="A_Li()"> <option value= new.html selected>選択</option> <option value= aaa.html>aaa</option> <option value= bbb.html>bbb</option> <option value= ccc.html>ccc</option> </select> <select name="select2" onChange="B_Li()"> <option value= new.html selected>選択</option> <option value= ddd.html>ddd</option> <option value= eee.html>eee</option> <option value= fff.html>fff</option> </select> </FORM >

  • 2つのプルダウンを連動させて、selectedで選択状態にしたい

    JavaScript初心者です。 今、phpとMySQLとJavaScriptで車の情報を登録する画面を作っています。 1つのプルダウンが選択後、もうひとつのプルダウンを表示するのですが、 入力画面から確認画面へ移って、history.backでもう一度入力画面にもどったときに、 選択された状態で表示したいのです。 下記のmakerは、値をセッションで受け取り、selectedをつける指示を したので、 選択状態にすることができました。 もう一つのcarnameがどうしたらよいか分かりません。 どうかご教授お願い致します。 <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; carnameItem = [ //トヨタ ['カローラ','クラウン','セルシオ'], //ニッサン ['シーマ','エルグランド','ローレル'], len = document.form1.carname.options.length; for (i=len-1; i>0; --i)document.form1.carname.options[i] = null; if(n!=0){ document.form1.carname.style.visibility = "visible"; for (i=0; i<carnameItem[n-1].length; i++)document.form1.carname.options[i+1] = new Option(carnameItem[n-1][i]); } setPref(0); } //--> </script> </head> <body> <form name="form1"> <select name="maker" onChange="setArea(this.selectedIndex)"> <option value="0"<?php echo $selected1?>>▼選択してください</option> <option value="1"<?php echo $selected1?>>トヨタ</option> <option value="2"<?php echo $selected2?>>ニッサン</option> </select> <select name="carname" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> </form>

  • html onchange

    下記のコードでf002は動きますが、f001が動きません。 scriptで作ったオプションメニューもonChangeが働くようにするには、いかがしたらよろしいでしょうか? <script language="JavaScript"><!-- function f001(){ if (document.test.s1.value==2) alert("2が入力されました"); } function f002(){ if (document.test.s2.value==2) alert("2が入力されました"); } var i,ht=[]; i=0; ht[i] = '<select onChange="f001()" id="s1" >'; for( var i=1; i<=5;) ht[i] = '<option value='+(i)+(i==1?' selected':'')+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write('s1 =', ht.join('')); // --></script> <form name="test"> s2 = <select onChange="f002()" id=s2> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> <option value=4>4</option> </select> </form>

  • プルダウンメニュー

     こんばんは。 日時をプルダウンメニューで選択するのですが、 月が変わると、内容も変わるようにしたいと思っています。JavaScriptで、出来ると聞いたのですが、 やり方が解りません。 このように書いてみたのですが、 画面には何も表示されません。 助けてください。 <SCRIPT LANGUAGE = "JavaScript"> <FORM NAME="form1" METHOD="post"> if (mm = 2){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 </SELECT>日"); } if ((mm = 4) || (mm = 6) || (mm = 9) || (mm = 11)){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 <OPTION VALUE="29">29 <OPTION VALUE="30">30 </SELECT>日"); } else{入らないので省きます。 </FORM> </SCRIPT>

専門家に質問してみよう