これは私のhtmlコードです
<form id="searchForm">
<input name="search" type="text"/>
<a href="search.php" id="searchLink"><img src="images/search-btn.jpg" alt="search-btn" /></a>
</form>
リンクをクリックしているときに、このテキストボックスの値をsearch.phpページに送信する方法は?
action
呼び出したい PHP スクリプトを指すフォームに を指定し、アンカーの代わりに画像送信ボタンを使用できます。
<form id="searchForm" action="search.php" method="post">
<input name="search" type="text"/>
<input type="image" src="images/search-btn.jpg" alt="search-btn" />
</form>
別の補遺として、<button>
要素を使用することもできます。これにより、不格好な要素よりも気の利いた、おそらく素晴らしいスタイリングが可能になり<input>
ます。
MDN仕様から:
<button>
要素は、要素よりもスタイル設定がはるかに簡単です<input>
。内部HTMLコンテンツ(think<em>
、<strong>
または<img>
)を追加し、:after
および:before
疑似要素を使用し<input>
て、テキスト値属性のみを受け入れながら複雑なレンダリングを実現できます。
唯一の属性がいくつかあるHTML5
ため、そのDOCTYPEを使用していない場合は、属性の要件と、MDNページのブラウザーベンダーの互換性チャートを注意深く確認してください。実際には、今のところ実際に必要なものはすべて、すでにすべてのブラウザでサポートされています。
デモ:
<form id="form" action="search.php">
<button type="submit" id="button">
<p><input name="search" type="text"/></p>
<img src="http://goo.gl/UohAz" alt="search-btn" id="img" />
</button>
</form>
フォームを search.php に送信する送信ボタンを使用すると、$_POST[] 変数を介して検索ボックスの値を取得できます。URLに検索キーワードを表示したい場合は、GETメソッドを使ってsearch.php内の$_GETからアクセスしてください。
これを試して
<form id="searchForm" action="search.php" method="post">
<input name="search" type="text"/>
<input type="submit" style="background:images/search-btn.jpg" />
</form>
アンカータグ内で onClick メソッドを使用してフォームを送信できます。href を「#」に設定する必要があります。また、フォームのアクションはsearch.phpに設定する必要があります。
<form id="searchForm" action="search.php">
<input name="search" type="text" />
<a href="#" onClick="document.getElementById('searchForm').submit();" id="searchLink"><img src="images/search-btn.jpg" alt="search-btn" /></a>
</form>