- 締切済み
入力フォームとプルダウンメニューに関して
入力フォームとプルダウンメニューを重ねて表示し、入力フォームを上部に表示したいのですが、自分で試してみるとプルダウンメニューが入力フォームの上部に表示されてしまいます。 入力フォームを上部に表示したいのですが、 やり方がわかりません。教えて下さい。 よろしくお願いします。 <html> <head> <title></title> //CSSの定義 <style type="text/css"> <!-- span{ position:relative; left:70px; } --> </style> </head> <body> <span> //入力フォーム <input type="text" name="input" size="10" maxlength="1"> </span> //プルダウンメニュー <select> <option></option> <option>あああ</option> <option>いいい</option> <option>ううう</option> <option>えええ</option> <option>おおお</option> </select> </body> </html>
- youyousuke
- お礼率62% (5/8)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- kata_kori
- ベストアンサー率34% (8/23)
「inputとselectを重ねて、inputを手前に表示したい」って事ですよね？ 違ってたら以下スルー願います。 確証は有りませんが、重ねた場合にinputよりもselectが手前になる優先順位な模様で、どうにもならなそうです。 部品を重ねる必要性がよく分かりませんが、 selectタグ内に「style="visibility:hidden"」と書いてを非表示にするってのは駄目なのでしょうか？ ちなみに「//」で始まる行は、コメントを表しているのだとしたら誤りですね。
こんにちは！ <html> <head> <title></title> </head> <body> <form> <p> <input type="text" name="input" size="10" maxlength="1"> </p> <p> <select> <option></option> <option>あああ</option> <option>いいい</option> <option>ううう</option> <option>えええ</option> <option>おおお</option> </select> </p> </form> </body> </html> こういうことで良いのでしょうか？ 今時間が無いので、ＣＳＳの所は外しています。
関連するQ&A
- IE6でプルダウンメニューをクリックするとその時に色が変わるようにして
IE6でプルダウンメニューをクリックするとその時に色が変わるようにしていたのですが、 IE8でプルダウンメニューをクリックするとすぐに閉じてしまいます。 2回目のクリックでメニューが表示されます。 これはIEのバグなのでしょうか？ また、他に良い方法あるのでしょうか？ 以下がサンプルソースです。 <HTML> <HEAD> <TITLE>サンプル１</TITLE> </HEAD> <BODY> <CENTER> <FORM name="testForm"> <SELECT onFocus="style.backgroundColor='yellow'" onblur="style.backgroundColor='white'"> <OPTION>white</OPTION> <OPTION>red</OPTION> <OPTION>green</OPTION> <OPTION>blue</OPTION> </SELECT> </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
- プルダウンメニューの幅
フォームのプルダウンメニューの幅は強制的に変えることができるでしょうか。 --- <select> <option>●●●●●</option> <option>▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</option> </select> --- データとしては▲▲の文字数を保ちたいのですが、横幅を上の●●の文字幅にそろえたいときは、どうしたらよいのでしょう。 スタイルシート、JavaScriptを使うのでしょうか。
- ベストアンサー
- HTML
- HTML内の指定の位置にプルダウンを読み込みたい
まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>
- ベストアンサー
- JavaScript
- プルダウンメニューのvalue値が00のときアラートを表示したい
似たような記事が多くそれぞれの回答を試してみたのですが、うまくいかなかったため質問させていただきます。 ただいまテキストBOXとプルダウンメニューで成り立つ入力フォームを作成しています。 そこで、テキストはすべて入力した状態、プルダウンメニューを一番上以外のものを選択した状態でないと次の画面に遷移しないようにしたいのですが、プルダウンメニューの所だけうまくいきません。どうか回答よろしくお願いします。以下にソースをすべて載せておきます。 <html> <head> <title>test</title> <script language="JavaScript"><!-- function check(){ fName = ["id","name","grade","english","math","japanese","science","society"]; for (i=0; i<8; i++){ txt = document.forms[0].elements[fName[i]].value; if (txt == "") { alert("すべての項目を入力してください"); return false; } } var sel; sel = document.forms.school.value; if(sel=="00"){ alert("選択されていない項目があります");//アラート表示 return false; } return true; } // --></script> </head> <body> <form action="student_add1.php" name="forms" method="get" onSubmit="return check()"> 生徒番号：<select name="school"> <option value="00">==学校名==</option> <option value="01">桜中学校</option> <option value="02">紅葉中学校</option> <option value="03">青山中学校</option> <option value="04">高岡中学校</option> <option value="05">中野中学校</option> </select><input type="text" name="id" size="3"><br> 氏名：<input type="text" name="name" size="12"><br> 学年：<input type="text" name="grade" size="2"><br> 模試成績：<br><br>英語：<input type="text" name="english" size="3"> 数学：<input type="text" name="math" size="3"> 国語：<input type="text" name="japanese" size="3"> 理科：<input type="text" name="science" size="3"> 社会：<input type="text" name="society" size="3"><br> <input type="submit" value="送信"> <input type="reset" name="reset" value="リセット"> </form> </body> </html>
- ベストアンサー
- JavaScript
- フォームのスタイルについて教えてください
プルダウンメニューを書いていて、色を変えたくなったんですが上手くいきません。 フォントとバックカラーの色は変えられるのですが、▼のある部分はどう記述すれば いいのでしょうか？？？ 教えてください。 （スタイルシートでフォームを定義しています） <style type="text/css"> <!-- INPUT { background: #FFFFFF; color: BLUE;} SELECT { background: #FFFFFF; color: BLUE;} --> ↑ここに何を記述すればいいのでしょうか？ </style>
- ベストアンサー
- HTML
- メールフォームでプルダウンの内容だけ送られてこない
HTMLファイルでデザインができるメールフォームのcgiで、 名前とＥメールアドレスは送られてくるのですが プルダウンの内容だけ、送られてこないんです。 ちなみに携帯サイト用です。 プルダウンの入れ方がおかしいんだと思うのですが 何がいけないのでしょうか？ --------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>フォームメール</title> </head> <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF"> <center>フォームメール</center> <hr> <form action="./mail.cgi" method="${INFO_METHOD}"> <input type="hidden" name="system_mode" value="preview"> <input type="hidden" name="need_input_message" value="1"> 名前<br> <input type="text" name="system_name" value=""><br> Ｅメール<br> <input type="text" name="system_mail" value=""><br> テスト<br> <select name="test01"> <option value="" selected="selected">選択してください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> <option value="テスト4">テスト4</option> </select> テスト<br> <select name="test02"> <option value="" selected="selected">選択してください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> <option value="テスト4">テスト4</option> </select> <br> <input type="checkbox" name="system_copy" value="on" checked> 送信者にコピーを送る<br> <br> <input type="submit" value="確認画面へ"> </form> <hr> ▲<a href="${INFO_BACK}">戻る</a> <hr> </body> </html> --------------------------------------- 今はこうなってます。 何か間違っている箇所、足りない箇所がありましたら ぜひ教えてください。 よろしくお願い致します。
- ベストアンサー
- HTML
- プルダウンメニューでフォームのターゲット先を変更したい。
プルダウンメニューでフォームのターゲット先を変更する方法をしえてもらえませんか？ 下記の様にすると_topを指定しても新しいウィンドウが開いてしまいます。 <FORM name="test2" action="http://hoge.cgi" target=yyy.value> <INPUT type="text" size="34" name="word"><SELECT name="search"> <OPTION value="yahoo" selected>Yahoo!Japan</OPTION> <OPTION value="google">google</OPTION> </SELECT> <SELECT name="yyy"> <OPTION selected>窓選択</OPTION> <OPTION value="_blank">別窓</OPTION> <OPTION value="_top">同窓</OPTION> </SELECT> <INPUT type="submit" value="検索"> </FORM>
- ベストアンサー
- JavaScript
- IEでプルダウンメニューをデザイン
フォームのページを作成しており、 <select> <option> ～ </option> </select> でプルダウンメニューを作成したのですが、 あまりにもデザインが質素すぎるので 右の矢印ボタンなどを変更したり 高さを高くしたりしたいと考えています。 背景に色をつけるのはできるのですが、 高さを変えたりのCSSがききません。 IE6～9でなるべく見れる状態でプルダウンのメニューを デザインする方法はないでしょうか？ 初歩的質問で申し訳ないのですが、ご存知の方いらっしゃいましたら 教えていただけないでしょうか。よろしくお願いします。
- ベストアンサー
- CSS
- プルダウンメニューのフォームについて
プルダウンメニューって１回リロードするとデフォルトのメニュー （一番上のメニュー、またはselected属性のメニュー）が選択されますよね。 たとえば、以下のフォームでチョキを一度「送信」すると、 再読み込みにされて「グー」が表示されてしまいます。 これを「送信」した後も「チョキ」を連続で選択できるようにしたいのですが良い方法はあるでしょうか？ （利用者が一旦別のページに飛んだ場合はデフォルトに戻っていいのですが・・） --------------------------------------- <form method="post" action="janken.php"> モード <select name="mode" size="1"> <option value="janken">ジャンケン</option> <option value="gp">グーパー</option> </select> 手 <select name="skill" size="1"> <option value="goo">グー</option> <option value="choki">チョキ</option> <option value="par">パー</option> </select> <input type="submit" value="送信"> </form> 以下、結果を出力するphp ------------------------------------- htmlタグだけで実現可能でしょうか？ htmlで不可の場合、phpを使用するつもりですが、 if文で一つ一つのメニューに「前回コレを送信していたら選択」というのが思い浮かびますが、 もっとスマートなやり方はあるでしょうか？ 別の質問になりますが、モードで「グーパー」を選んでいる時はチョキを選択できないようにしたいのですが、これはhtmlだけでは実現不可能でしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- javascriptでの2つのプルダウンメニューの初期値
下記の2つの連動するセレクトメニューで最初の国名のプルダウンで「日本」を選択、次の都市名のプルダウンで「東京」を選択し、 その後ブラウザの戻るボタンで戻り後、再びページを表示させたり、または入力内容確認画面へ進みjavascriptのonclick="history.back()"で入力ページ（下記スクリプト記述ページ）に戻ると1つ目の国名のメニューは日本が表示されていますが、2つ目の都市名のメニューが空白になってしまいます。 そのため、都市名のプルダウンで東京を表示させるには、1つ目の国名のプルダウンを一度日本以外にしてから再度日本に表示させるといった動作が必要になってしまっています。 そこで、都市名のメニューを空白にさせずにそのまま表示させるように色々調べたのですが、解決策がありませんでした。 そこで、せめて両方のプルダウンともに「国を選択して下さい」にした状態にはできないかと考えております。 何か良い方法がありましたらば教えて頂けませんでしょうか？ <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("selMain").onchange = function(){ var selNo = this.selectedIndex; var selObj = document.getElementById("selSub"); var optionData = [ ["国名を選択してください,"], ["東京,tokyo","大阪,osaka","名古屋,nagoya"], ["ニューヨーク,ny","ロサンゼルス,la"] ]; var i, tmp = []; while(selObj.hasChildNodes()) { selObj.removeChild(selObj.firstChild); } for (var i=0; i<optionData[selNo].length; i++){ tmp = optionData[selNo][i].split(","); selObj.options[i] = new Option(tmp[0], tmp[1]); } } } </script> </head> <body> <form action="./enq.cgi" method="get" id="mainForm" name="mainForm"> <select id="selMain"> <option value="" selected>国を選択してください</option> <option value="jp">日本</option> <option value="usa">アメリカ</option> </select> <select id="selSub"> <option value="">国を選択してください</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
