HTMLのリストボックスを、INPUTのような入力フィールドとして利用することは可能なのでしょうか?
例)
 1行目:入力フィールド;
 2行目:ホンダ    ;
 3行目:三菱     ;
 4行目:ニッサン   ;
      ・
      ・
      ・
のような感じで、2行目以降の選択項目に該当事項がない場合に、1行目に入力出来るようにしたいのですが・・・。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

HTMLでいわゆるコンボボックスを実現するのは無理だと思います。


<SELECT>と<INPUT type="text">のどちらかを入力させ、受け取り側のCGIなりで判別すればよいのでは?

HTML側
  <SELECT name="list">
   <OPTION value="0">直接入力する→
   <OPTION>ホンダ
     :
  </SELECT>
  <INPUT type="text" name="input">

CGI側
  listの値が0なら、inputの内容を使う。
  そうでないなら、inputの内容は無視する。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q*{margin:0px;padding:0px;}

*{margin:0px;padding:0px;}

という風に、スタイルシートで設定をしているのですが、
テーブルに余白を付けようとしても、できません。
どうすればいいのでしょうか?

Aベストアンサー

*{margin:0px;padding:0px;}を利用しても良いと思いますが(賛否両論)
HTML,CSSを理解しない内は利用しない方が勉強になり、
正しいマークアップも直感で理解できますので、
一旦デフォルトで表示してみて、お好みで個別指定する方が良いかも知れません。
例えば、
html,body{margin:0px;padding:0px;}
を書いてから、後付けでその都度追加するとか。
html,body,h1,h2,ul,ol,li,dl,dt,dd{margin:0px;padding:0px;}
慣れてから使う方が良いかも。
デフォルトのままで、レイアウトやブラウザ間の差異などが困るのなら指定すれば良い。
--------------------------------

テーブルの外側の指定なのか、
内側の指定なのかはわかりませんが、
外側でfloatで意図通りに解釈されていないのでは?
その場合には、色々手法がありますが、tableをdivで囲うのが簡単。

<div style="width:280px; border:red solid;">
<table border="1" style="margin: 20px 0 10px 30px;">
<tr><td>無指定</td><td>無指定</td></tr>
<tr><td style="padding:1em 2em;">
padding指定</td><td>無指定</td></tr>
<tr><td style="line-height:3;">
line-height指定</td><td>無指定</td></tr>
</table>
</div>

幅の解釈も標準か否かで違う。

*{margin:0px;padding:0px;}を利用しても良いと思いますが(賛否両論)
HTML,CSSを理解しない内は利用しない方が勉強になり、
正しいマークアップも直感で理解できますので、
一旦デフォルトで表示してみて、お好みで個別指定する方が良いかも知れません。
例えば、
html,body{margin:0px;padding:0px;}
を書いてから、後付けでその都度追加するとか。
html,body,h1,h2,ul,ol,li,dl,dt,dd{margin:0px;padding:0px;}
慣れてから使う方が良いかも。
デフォルトのままで、レイアウトやブラウザ間の差異などが困るのな...続きを読む

Qbackground-imageにmax-width:100%;height:auto;を適用したい

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100%;
height:auto;
}
とすると、(font-size:10px;で適用確認)すると、画面を越えてしまって半分ぐらいしか文字が入っていません、拡大されているのかどうかわかりませんが、max-widthが効かないようです。

何が原因でしょうか?
教えて下さい。
宜しくお願い致します。

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100...続きを読む

Aベストアンサー

背景にはそんなプロパティ有りません。coverプロパティを使う。

Q*{margin:0px;padding:0px;}というCSSのタグの意味について教えてください。

<style type="text/css">
*{margin:0px;padding:0px;}
</style>

ホームページで上記のようなソースを見かけたのですが、これはどういう意味なのでしょうか?
試しに新規ページにこのコードを記述してbody内にtableを作ってみたのですが、tableに記述したcellpaddingが
数値をいろいろ変えても動作しません。
この*{margin:0px;padding:0px;}という記述をすることによる意図は何なのでしょうか?
宜しくお願いします。

Aベストアンサー

*はトランプのジョーカーみたいなものです。何にでも当てはまりますカードと思うといいです。

margin:0px;padding:0px;
これはマージンやパッディングを0にするってことです
何もしないで文字を入れると、ブラウザによってはぴったり上にくっつかないとか、くっつくとかいろいろ初期値が違うので、どのブラウザでも同じようにしたいときに、一律これだけと指示することが多いです。

●cellpaddingが聞かない理由と聞かせる方法
*はなんでもですが、より詳しい記述があれば、そちらを優先させるというルールがあります。詳細度といいます。同じ詳細度なら、後から書いた方が優先されます。

*(何でも)より見出しや段落、テーブルと具体的な場所に対する指示の方が優先されます。
そして外部よりヘッダ。ヘッダよりインラインの方が優先度が高くなります。
そして、タグによってはどこに記述しても*より弱いタグもあります。
今回のcellpaddingやfontがそれにあたります。誤解を恐れず大雑把に説明するとそんな感じになります。

cellpaddingを使う代わりに同じ効果ならcellpaddingを記載した場所に「style="padding:10px;"」と入れてください。インラインといいます。このタグを閉じる場所まで有効です。
もし、そのページ全体の表に入れたいなら、ヘッダ部分(<head></head>の間)に「<style>td{padding:10px;}</style>」と入れてください。tdの当てはまる場所すべてに効きます。サイト全体に聞かせたいなら外部にします。cssでは単位は0以外省略できません。

つまり外部に原則を記述、インラインに1回だけの例外のものを記述ってやり方もできるので、状況に応じて使い分けされるといいです。

*はトランプのジョーカーみたいなものです。何にでも当てはまりますカードと思うといいです。

margin:0px;padding:0px;
これはマージンやパッディングを0にするってことです
何もしないで文字を入れると、ブラウザによってはぴったり上にくっつかないとか、くっつくとかいろいろ初期値が違うので、どのブラウザでも同じようにしたいときに、一律これだけと指示することが多いです。

●cellpaddingが聞かない理由と聞かせる方法
*はなんでもですが、より詳しい記述があれば、そちらを優先させるというルー...続きを読む

Q タグテキストフィールドでのretrunの処理

以下のような<form>があります。この中のfreekey2のテキストエリア
に入力した後に、enterキーを押した場合にも、javascript:query()を
動かしたいのです。<input>タグに何らかのイベントハンドラを
つけるのでしょうか。よろしく、お願いします。

<form>
<table>
<tr>
<td><select name="period">
<option value="all" selected>全て
<option value="2006">2006
</select></td>
<td><input type="button" value="検索" onclick="javascript:query()"></td>
</tr>
<tr>
<td>キ-:<select name="freekey">
<option value=".*" selected>すべて
<option>ああああ
<option>いいいい
</select>
<input size="20" name="freekey2" type="text">
</td>
</tr>
</table>
</form>

以下のような<form>があります。この中のfreekey2のテキストエリア
に入力した後に、enterキーを押した場合にも、javascript:query()を
動かしたいのです。<input>タグに何らかのイベントハンドラを
つけるのでしょうか。よろしく、お願いします。

<form>
<table>
<tr>
<td><select name="period">
<option value="all" selected>全て
<option value="2006">2006
</select></td>
<td><input type="button" value="検索" onclick="javascript:query()"></td>
</tr...続きを読む

Aベストアンサー

keydownイベントでENTERかどうか判定するといいかと思います。

function onKeyDown()
{
if( event.keyCode == 13 ){
query();
return false;
}
return true;
}
 :
 :
<td><input type="button" value="検索" onclick="javascript:query()" onkeydown="return onKeyDown()"></td>

Qinput[type=text]とinput[type="text"]

input[type=text]とinput[type="text"]
どちらが正しいですか?

Aベストアンサー

どちらも正しいと思います。しいて言えば、前者がHTMLでは許される記述、後者がXHTMLの記述ということでしょうか。

HTMLもXHTMLも、どちらもSGMLをベースとしています。XHTMLは、HTMLを記述が厳格なXMLに準拠するように再定義されたものです。

プログラムとの連携が必要になるのであれば、XHTMLで記述するようにした方が何かと便利かと思います。


人気Q&Aランキング

おすすめ情報