すべてのプログラマーに対して、ユーザーに統一されたスタイルインターフェイスを提供することは、不変の要件です。ただし、さまざまなオペレーティングシステムとブラウザがWebページのコンテンツを表現する方法に違いがあるため、このスタイルの統合をWebページで実現することは特に困難です。この違いはほとんど不規則です。この問題は、フォーム要素を処理するプロセスで特に顕著です。多くの人々を無力にするのは、提出ボタンの統一されたパフォーマンス基準の問題です。
たとえば、type = submit属性の入力タグは、異なるブラウザー（Firefox）で非常にugいものに見えます。または、1つの種類の欠陥（インターネットエクスプローラー）があるか、非常に剛性があります（Safariで）。この問題の解決策は、通常、入力プロパティを画像に設定し、自分でボタン画像を設計することです。しかし、ボタンを使用する必要があるたびに、多くの迷惑な作業を追加する必要があります。したがって、より良いソリューション、デザイナーにとってより柔軟で意味のあるアプローチが必要です。幸いなことに、この方法はすでに現実に存在しており、私たちに必要なのはもう少し仕事をすることです。友達、私たちのかわいい友人、クラスメート<button>を紹介させてください！
入力vsボタン
これがあなたが使用している送信ボタンラベルです：
<入力タイプ=送信値= submit />
さまざまなブラウザのパフォーマンススタイルは次のとおりです。
そして、<button>を使用して上記のようにボタンを作成する場合：
<ボタンタイプ=送信>送信</button>
それらは次のスタイルで表現されています：
これらのボタンは、ランニングとプレゼンテーションの動作で上記で作成したボタンと違いはありません。フォームを使用してフォームを提出することに加えて、それらを利用できないように設定したり、ショートカットを追加したり、Tabindexを設定したりすることもできます。幸いなことに、さまざまな式スタイルに加えて、Safariはこれらの機能をサポートします（入力ボタンと比較して、Safariのボタンは表面の液体効果がありません）。 <button>タグの最もクールな関数は、次のコードを使用して画像を追加するなど、いくつかの便利なHTML要素を内部に配置できることです。
<ボタンタイプ=送信> <img src = alt = /> submit < /button>
ブラウザでの外観は次のとおりです。
悪くない。実際、W3Cの定義によれば、<button>要素はこれらのパフォーマンスの違いを解決するために生まれました。
ボタン要素を使用して作成されたボタンは、入力要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。ボタン要素にはコンテンツがある場合があります。たとえば、画像を含むボタン要素は、型が画像に設定されているが、ボタン要素タイプを使用するとコンテンツを許可する入力要素に似ている可能性があります。
ボタン要素-W3c
したがって、これのための設計ソリューションを見つける必要があります。幸いなことに、大量のデータを備えたインターネットは、この問題を解決するための有用な助けを提供できます。これは確かに非常に便利ですが、残念ながら、デザイナーやウェブサイトの開発者は、この要素の存在さえ知りません。 Wufooをボタン要素（この記事のネットワーク製品、Dudo Note）に置き換える前に、このタグとCSSが次のニーズを満たすことができることを確認する必要があります。
要件：
1。ボタンの外観が必要です
2。さまざまなブラウザに同じ表現スタイルがあります
3.ボタンに適用されるスタイルは、ハイパーリンクでも使用できます（Wufooでの相互作用は常にフォーム送信方法を使用し、Ajaxメソッドを送信するためにリンク接点を使用するため、頻繁に近くにいる可能性があるため、同じ表現スタイルを持つ必要があります）
4.タグは柔軟で、さまざまな状況で簡単に変更できます
5。情報送信中に発生するイベントの場合、アイコンと色で効果的に区別できます。
上記の問題に直面して、私は最初にいくつかのCSSを書き、次にクロスブラウザーの問題を解決しました。次にわかります：
最終結果これについて大騒ぎすることは何もありません。それは非常に簡単ですが、非常に効果的です。この方法を使用してボタンを処理するのが好きなのは、10,000個のアイコンを作成するためにPhotoshopの作成を1つずつ開始する必要がないためです。コードを慎重に見ると、背後にある2つのボタンが実際に2つのリンクであることがわかります。
<div class =ボタン>
<ボタンタイプ= class = posute>を送信します
<img src =/images/icons/tick.png alt =/>
保存
</button>
<a href =/password/reset/
<img src =/images/icons/textfield_key.png alt =/>
パスワードを変更する
</a>
<a href =＃class =否定>
<img src =/images/icons/cross.png alt =/>
キャンセル
</a>
</div>
これの目的は、Webアプリケーションの多くのアクションがイベント（REST）駆動型であるため、特定のURLを介してユーザーリクエストを送信すると、これらのアクションを初期化できるためです。両方の要素に適用できるスタイルを使用すると、AJAXと標準の送信ボタンによって引き起こされる相互作用を維持する際に、スタイルの統一がより柔軟になります。
今、あなたは尋ねるかもしれません、なぜ私は画像要素のALT属性を空白にしておくのですか？ ALTは、IMG要素の必要な属性です。画像の内容を説明するために使用されますが、ここでは画像の関連する説明はありません。これは実際には少し混乱しています。ただし、欠落属性とは異なり、空の属性値は標準と完全に一致しています。彼はブラウザに、これらの画像が完全に無視できる情報を表していることを伝えました。これは、迅速な情報の閉塞のためにブラウザが次のボタンを見つけることができないことを妨げます。ここのアイコンは完全に冗長であるため、統一されたインターフェイススタイルを実現するために完全に使用されるこのアイコンを表示するユーザーの時間を無駄にしません。
CSS StyleSheetこれらのボタンスタイルを制御するために使用されるCSSコンテンツのほとんどは非常に直感的です。異なるブラウザのわずかな違いにより、次のコードで異なるパディング値が適用されます。幸いなことに、これはすべて完全に可能です。
/ *ボタン */
.buttons a、.buttonsボタン{
表示：ブロック;
フロート：左;
マージン：0 7px 0 0;
背景色：＃f5f5f5;
ボーダー：1px solid #dedede;
ボーダートップ：1px solid #eee;
国境左：1px solid #eee;
フォントファミリー：Lucida Grande、Tahoma、Arial、Verdana、Sans-Serif;
フォントサイズ：100％;
ラインハイト：130％;
テキスト装置：なし;
font-weight：bold;
色：＃565656;
カーソル：ポインター;
パディング：5px 10px 6px 7px; / *リンク */
}
.buttonsボタン{
幅：auto;
オーバーフロー：可視;
パディング：4px 10px 3px 7px; / * ie6 */
}
.buttonsボタン[タイプ] {
パディング：5px 10px 5px 7px; / * firefox */
Line-Height：17px; / * safari */
}
*：First-Child HTMLボタン[type] {
パディング：4px 10px 3px 7px; / * ie7 */
}
.buttonsボタンimg、.buttons a img {
マージン：0 3px -3px 0！重要。
パディング：0;
国境：なし;
幅：16px;
高さ：16px;
}
もう1つの問題は、長いボタンをレンダリングするときにインターネットエクスプローラーにいくつかのバグがあることです。この情報はjehiah.czで見つけることができますが、上記のCSSコードでは、幅とオーバーフローの値を宣言することにより、ある程度問題を回避します。
ボタンに少し色を追加しますWufooでは、ニュートラルアクションのホバー値を設定します（ここでは、著者は変更パスワードとその他のアクションをニュートラルアクションと呼び、確認と提出タイプを肯定的なアクションとして、放棄とキャンセルタイプを否定的なアクションとして）設定します。次のスタイルコードでは、さまざまな色を使用して、否定的なアクションのタイプの追加、保存、キャンセル、削除を区別します。もちろん、使用する色を選択することもできます。
/* 標準 */
ボタン：ホバー、.buttons A：Hover {
バックグラウンドカラー：＃dff4ff;
ボーダー：1pxソリッド＃C2E1EF;
色：＃336699;
}
.buttons A：Active {
バックグラウンドカラー：＃6299C5;
境界線：1PXソリッド＃6299C5;
色：#ffff;
}
/* ポジティブ */
button.positive、.buttons A. positive {
色：＃529214;
}
.buttons A. positive：Hover、button.positive：Hover {
バックグラウンドカラー：＃e6efc2;
ボーダー：1pxソリッド＃C6D880;
色：＃529214;
}
.buttons a. positive：active {
バックグラウンドカラー：＃529214;
国境：1pxソリッド＃529214;
色：#ffff;
}
/* ネガティブ */
.buttons a.negative、button.negative {
色：＃D12F19;
}
.buttons A.Negative：Hover、Button.Negative：Hover {
背景：＃fbe3e4;
ボーダー：1pxソリッド＃FBC2C4;
色：＃D12F19;
}
.buttons A.Negative：Active {
背景色：＃D12F19;
境界線：1pxソリッド＃D12F19;
色：#ffff;
}
要約します最後に、これはWufooのニーズに対処するように設計されたソリューションにすぎませんが、私たちの努力でうまく機能しました。しかし、それが唯一の方法ではありません。ボタンを丸い角に変えるか、さらにカラフルにするためのより興味深い方法を見つけることができます。他のほとんどすべての要素を<button>タグの間に配置できるため、<Span>タグを挿入し、Alex Griffioenが提供する最新の方法に従うことにより、本当に見栄えの良い3次元ボタンを作成することもできます。正直に言うと、これがプログラムのインターフェースの再利用に取り組んでいるすべてのデザイナーにとってほんの始まりに過ぎないことを願っています。とにかく、Photoshopの入力ボタンを開く前に、あなたがそれについてもっと考えて、このほとんど忘れられた<button>タグを見てみてください。
付録：<butth> html4.0/xhmtl1.0の要素
定義と使用法ボタンを定義します。ボタン要素の内側には、テキストや画像などのコンテンツを配置できます。これは、この要素と入力要素で作成されたボタンの違いです。
<button>コントロールは、<input type = button>よりも強力な機能とより豊富なコンテンツを提供します。 <button>と</button>タグの間のすべてのコンテンツは、テキストやマルチメディアコンテンツなどの許容可能なボディコンテンツを含むボタンのコンテンツです。たとえば、ボタンに画像と関連テキストを含めることができ、それらを使用してボタンに魅力的なマークアップ画像を作成できます。
禁止されている唯一の要素は、マウスボタンの動作を妨げる可能性があるため、画像マッピングです。
選択可能なプロパティ属性値説明DTD無効化された無効化このボタンを無効にします。 STF
namebutton_nameこのボタンの一意の名前を指定します。 STF
入力*ボタン
*リセットボタンのタイプを定義します。 STF
* 提出する
値some_valueボタンの初期値を指定します。この値は、スクリプトによって変更できます。 STF
標準属性：id、class、title、style、dir、lang、xml：lang、accesskey、tabindex
イベントプロパティ：onfocus、onblur、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup