検索フォーム css 楽天

質問

いつもお世話になっています。
web初心者です、よろしくお願い致します。ネットで検索しても方法がどうしてもわからないので質問させていただきます。

shopは一応もうopenしているのですが、楽天のshopを現在作っています。
そこで商品検索フォームをネットで見つけたfreeのcssのモノ(http://www.css-lecture.com/log/css/052.html)に変え、楽天の既存のフォームと比べながら足したりとしたのですが、検索がうまくされません。(検索キーワードが空欄です。キーワードを入力して検索してください。となってしまいます)

ソースは以下です。

<form name="searchform4" id="searchform4" method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_parent" >
<input value="6" type="hidden" name="sv"><input value="252003" type="hidden" name="sid">
<input value="shop name" type="hidden" name="su">
<input value="ショップ名" type="hidden" name="sn">
<input value="A" type="hidden" name="f">
<input name="keywords4" id="keywords4" value="" type="text" />
<input type="image" src="images/btn4.gif" alt="検索" name="searchBtn4" id="searchBtn4" />
</form>

全くどうしたらよいのかわかりません、、。お手を貸して下さい、よろしくお願い致します。

回答No.3

coronel · ベストアンサー

CSSはHTML以上に規則がしっかりしているので、
ある程度慣れてから触ることをお勧めします。

一応修正したサンプルをつけてみました。
画像URLはそのままでは動かないので、Cabinetに登録したURLに置き換えてください。
ボタンだけでなく、外枠部分も画像になっています。

CSS部分
楽天側でnameが強制指定されるなら、CSS部分を置き換えればよいことになります。
<style TYPE="text/css">
<!--
#searchform4 {
width: 200px;
background: url(背景画像URL) left top no-repeat;
display: block;
height: 24px;
position: relative;
float: left;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
margin: 0px;
}
#search {
padding: 0px;
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
#sitem {
width: 156px;
position: absolute;
top: 3px;
left: 12px;
border: 1px solid #FFF;
}
#searchBtn4 {
position: absolute;
top: 3px;
left: 174px;
}
-->
</style>

HTML部分
tableがおかしかったので直しました。
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr align="center">
<td>
<form name="searchform4" id="searchform4" method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">
<input value="6" type="hidden" name="sv">
<input value="252003" type="hidden" name="sid">
<input value="shop name" type="hidden" name="su">
<input value="ショップ名" type="hidden" name="sn">
<input value="A" type="hidden" name="f">
<input name="sitem" id="sitem" value="" type="text" />
<input type="image" src="検索ボタン画像URL" alt="検索" name="searchBtn4" id="searchBtn4" />
</td></tr></form>
</table>

あとついでに・・・
ショップ名隠しても、ある程度楽天に詳しい人だとこのHTML見てどの店舗か、分かっています。

補足

毎度丁寧なご説明感謝致します。

ショップ名わかってしますんですね、恥ずかしいです、、汗

上記の教えていただいたソースを入れ試した所、検索まではされるようになったのですが、検索のワードが文字化け？してしまい、
「〓〓〓 ご指定の検索条件に該当する商品はありませんでした。」
となってしまいます、、。

ちなみに検索フォームを埋め込んでいるページはgoldにuploadしたhtmlファイルでrmsでiframe内に表示させているのですが、それも文字化けと何か関係があるのでしょうか？
ブラウザはfire fox とsafari共に試しましたが、結果は同じでした。

お忙しいとは思いますがご回答よろしくお願い致します。

回答No.4

coronel

楽天システムはすべて文字コードがEUC-JPになっているため、
GOLDにアップするHTMLファイルもEUC-JPで作る必要があります。

お使いの編集ソフトで文字コードをEUC-JPにセットし直してみてください。

お礼

ついに出来ました！！
何度も何度も本当にありがとうございました!!!
お力感謝致します！！

回答No.2

coronel

参考にされたfreeのサイトが今表示できないので、CSSがどのようになっているか次第ですが。
以下の形なら、動作はするはずです。
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">
<input value="6" type="hidden" name="sv">
<input value="252003" type="hidden" name="sid">
<input value="shop name" type="hidden" name="su">
<input value="ショップ名" type="hidden" name="sn">
<input value="A" type="hidden" name="f">
<tr align="center">
<td>
<input name="sitem" id="keywords4" value="" type="text" />
<input type="image" src="http://image.www.rakuten.co.jp/com/img/home/200809/tab_auction.gif" alt="検索" name="searchBtn4" id="searchBtn4" />
</td>
</tr>
</form>
</table>

ポイントは
<input name="sitem" id="keywords4" value="" type="text" />
ですね。
name=sitemで検索ワードを取得するようになっているので。

あとはCSSのソースがあれば、表示イメージについてアドバイスできると思います。

補足

ご回答ありがとうございます！！

cssですが

#searchform4 {
width: 200px;
background: url(../images/input4.gif) left top no-repeat;
display: block;
height: 24px;
position: relative;
float: left;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
margin: 0px;
}
#search {
padding: 0px;
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
margin-left: 0px;
}
#keywords4 {
width: 156px;
position: absolute;
top: 3px;
left: 12px;
border: 1px solid #FFF;
}
#searchBtn4 {
position: absolute;
top: 3px;
left: 174px;
}

となっています。

ド素人がお手間をおかけして申し訳ありません。。イメージについてのご回答よろしくお願い致します。

回答No.1

coronel

全般的にinput部分のname属性書き換えが間違っているようです。
特に、
<input name="keywords4" id="keywords4" value="" type="text" />
が致命的におかしいです。
CSS用にname欄を変えているのでしょうが、nameを変えるとFORMが動かないなどの不具合が出るのでname要素はそのままにして、idを使うなどで対応してください。

あと、<input value="ショップ名" type="hidden" name="sn">のvalueはお店の名前を入れてください。
このままだと検索結果の店名が「ショップ名」になります。

補足

丁寧なご回答ありがとうございます。

ショップ名はあえて伏せ"ショップ名" "shop name"と記述していました。

coronelさんに回答していただいた様に、nameを楽天のデフォルトの物と比べながら置き換えにトライしてみましたが、楽天のデフォルトのフォームと、cssフォームのタグが違いすぎてどこをどうしたらいいのか、混乱してしまっています、、

様々楽天のデフォルトを見ながらnameに入力し試しましたが、"検索キーワードが空欄です"と出て来てしまいました。

正直フォームは今まで一度もいじった事がないので、タグの意味すら曖昧です、、

楽天フォーム**************************************************************

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc">
<input value="6" type="hidden" name="sv">
<input value="252003" type="hidden" name="sid">
<input value="shop name" type="hidden" name="su">
<input value="ショップ名" type="hidden" name="sn">
<input value="A" type="hidden" name="f">
<tr align="center">
<td><input type="text" name="sitem">
<input value="商品検索" type="submit">
</td>
</tr>
</form>

CSSフォーム**************************************************************

<dl>
<dt>サンプル 4</dt>
<dd><form name="searchform4" id="searchform4" method="get" action="#">
<input name="keywords4" id="keywords4" value="" type="text" />
<input type="image" src="image/btn4.gif" alt="検索" name="searchBtn4" id="searchBtn4" />
</form></dd>
</dl>

そして上記にも書いた意味もわからずに自分で２つを足したフォーム、、*****************************

<form name="searchform4" id="searchform4" method="get" action="​http://esearch.rakuten.co.jp/rms/sd/esearch/vc"​ target="_parent" >
<input value="6" type="hidden" name="sv"><input value="252003" type="hidden" name="sid">
<input value="shop name" type="hidden" name="su">
<input value="ショップ名" type="hidden" name="sn">
<input value="A" type="hidden" name="f">
<input name="keywords4" id="keywords4" value="" type="text" />
<input type="image" src="images/btn4.gif" alt="検索" name="searchBtn4" id="searchBtn4" />
</form>

お手数ですが、ご回答お願い致します。