この質問はおそらくフォーラムのTOP10の質問に含まれています:)これはおそらくデザイナーまたは顧客の要件です。
そのため、ソリューションは一見シンプルです：
< a href = "＃" onclick = "document.getElementById（ 'myform'）。submit（）; return false;" >送信< / a >
しかし、疑問が生じます（奇妙なことに:)次の質問は、
訪問者がJSをオフにした場合はどうなるでしょうか？コードを次のように変更します。
< 入力 タイプ = 「送信」 値 = 「送信」 クラス = 「リンク」 / >
そして、いくつかのJSを追加します。
addEvent （ window 、 'load' 、 windowLoad ） ;
/ *クロスブラウザイベントハンドラーの追加* /
関数 addEvent （ obj 、 evType 、 fn ） {
if （ obj。addEventListener ） {
obj。 addEventListener （ evType 、 fn 、 false ） ;
} else if （ obj。attachEvent ） {
obj。 attachEvent （ 'on' + evType 、 fn ） ;
}
}
/ *アイテムの親フォームを取得します* /
関数 getParentForm （ obj ） {
while （ （ obj = obj。parentNode ） ）） {
if （ obj。nodeName == 'FORM' ） {
休憩 ;
}
}
return obj ;
}
/ *リンククラスですべての送信ボタンを検索し、リンクに置き換えます* /
関数 windowLoad （ ） {
var buttons =ドキュメント。 getElementsByTagName （ 'input' ） ;
for （ var i = 0 ; i <ボタンの長さ ; i ++ ） {
if （ buttons [ i ] 。getAttribute （ 'type' ） == 'submit' && buttons [ i ] 。className == 'link' ） {
var link = document。 createElement （ 'a' ） ;
リンク。 appendChild （ document。createTextNode （ button [ i ] 。getAttribute （ 'value' ） ） ）） ;
リンク。 setAttribute （ 'href' 、 '＃' ） ;
addEvent （ link 、 'click' 、 linkClick ） ;
var parent = buttons [ i ] parentNode ;
親 removeChild （ボタン[ i ] ） ;
親 appendChild （リンク） ;
}
}
}
/ *リンクをクリックしてフォームを送信します* /
関数 linkClick （ e ） {
var e =ウィンドウ。 イベント || e ;
var target = e。 ターゲット || e。 srcElement ;
var parentForm = getParentForm （ target ） ;
parentForm。 送信 （ ） ;
if （ window。event ） { e。 returnValue = false ; } else { e。 preventDefault （ ） ; }
}
JSが無効になっている場合、訪問者にはリンクの代わりにボタンが表示され、フォームを送信できます。 しかし、私たちはそこで止まりません。 JSが無効になっている場合でも、ボタンがリンクのように見えるようにします。 ボタンを様式化するには、タグを
button変更し、Firefoxで下線を追加できるように
span必要です。
< ボタンの 種類 = "送信" クラス = "リンク" > < スパン >送信< / / スパン > < / / ボタン >
それに応じてJSの一部も変更します。
var buttons =ドキュメント。 getElementsByTagName （ 'button' ） ;
for （ var i = 0 ; i <ボタンの長さ ; i ++ ） {
if （ buttons [ i ] 。getAttribute （ 'type' ） == 'submit' && buttons [ i ] 。className == 'link' ） {
var link = document。 createElement （ 'a' ） ;
リンク。 appendChild （ document。createTextNode （ button [ i ] .firstChild.firstChild.nodeValue ） ） ;
CSSは次のようになります。
ボタン.link {
/ * IEのインデントを削除するには、最初の2つのプロパティが必要です* /
オーバーフロー ： 可視 ;
幅 ： 自動 ;
/ *インデントを削除します* /
マージン ： 0 ;
パディング ： 0 ;
/ *すべてのボタンデザイン要素を削除* /
背景 ： なし ;
ボーダー ： なし ;
/ *リンクの通常のカーソル* /
カーソル ： ポインタ 。
}
/ *リンクには通常下線が引かれています* /
ボタン.link span {
色 ： ＃00f ;
テキスト装飾 ： 下線 ;
}
Firefoxの場合、
-moz-user-select: text;追加でき
-moz-user-select: text; ボタンのテキストを選択できるようにしますが、私はそのような必要性を疑います。
他のスタイルは既に特定のデザインに依存しています。
いくつかのメモ：
- アクティブな訪問済みの疑似クラスはボタンに適用できませんが、IE6およびホバーの場合
- IE6では、同じフォームの複数のボタンは正常に機能しません
- あなたはJSなしで行うことができます。 それはすべて、リンクの自然さの重要性に依存します。
UPDinsa は別の非常に良いオプションを
提案しましたが、唯一のマイナスはラベルがフォーカスを取得できないことです。
< フォーム >
< 入力 タイプ = 「テキスト」 名前 = 「a」 / >
< 入力 タイプ = "submit" id = "push-me" style = "display：none" / >
< / フォーム >
< label for = "push-me" >偽の送信< / label >
UPD2残念ながら、
insaが推奨するオプションはクロスブラウザではありません（コメントを読んでください）。
関連リンク：
- HTML <button>テスト
- リンクのように見えるボタンのスタイル設定
実例は
ここにあります 。