忘れられたボタンタグ

注：この記事は他の人によって翻訳されていますが、考えるべき点が多く、理解しにくい点もあると感じています。そこで、私は個人的な学習経験に基づいてこの記事を再翻訳しました。
オリジナルの英語: http://particletree.com/features/rediscovering-the-button-element/
ユーザーに統一されたインターフェースを提供することは、すべてのプログラマーにとって不変の要件です。しかし、異なるオペレーティングシステムやブラウザーでは Web ページのコンテンツの表示が異なり、その違いはほとんど不規則であるため、Web ページでこのような統一されたスタイルを実現することは非常に困難です。この問題は、フォーム要素を処理するプロセスで特に顕著です。その中でも、多くの人を困惑させているのが、「送信」ボタンのパフォーマンスを標準化する問題です。
たとえば、属性 type="submit" を持つ入力タグは、さまざまなブラウザーで非常に見栄えが悪かったり (Firefox の場合)、何らかの欠陥があったり (Internet Explorer の場合)、非常に硬直して動作したり (Safari の場合) します。この問題の解決策は通常、入力属性を image に設定し、ボタン画像を自分でデザインすることです。しかし、これにより、ボタンを使用する必要があるたびに、余分な面倒な作業が増えてしまいます。したがって、デザイナーにとってより柔軟で有意義な、より優れたソリューションが必要です。幸いなことに、このアプローチはすでに存在しており、私たち側でもう少し作業が必要になるだけです。友人の皆さん、ここで私たちのかわいい小さな友人 <button> を紹介させてください!
入力VSボタン
使用している送信ボタンのタグは次のとおりです。
<input type="submit" value="送信" />
さまざまなブラウザでの表示スタイルは次のとおりです。

<button> を使用して上記のボタンを作成する場合、コードは次のようになります。
<button type="submit">送信</button>
それらは次のように動作します。

これらのボタンは、上で作成したボタンとまったく同じように動作し、動作します。フォームの送信に使用するだけでなく、無効に設定したり、ショートカットを追加したり、タブインデックスを設定したりすることもできます。幸いなことに、Safari は、さまざまな表示スタイルを除いてこれらの機能をサポートしています (入力ボタンと比較すると、Safari のボタンには表面の液体効果がありません)。 <button> タグの最も優れた機能は、次のコードを使用して画像を追加するなど、便利な HTML 要素をタグ内に配置できることです。
<button type="submit"><img src="" alt="" /> 送信</button>
ブラウザでの表示は次のようになります。

悪くないですね。実際、W3C の定義によれば、<button> 要素はこれらのパフォーマンスの違いに対処するために作成されました。
BUTTON 要素で作成されたボタンは、INPUT 要素で作成されたボタンと同じように機能しますが、より豊富なレンダリングの可能性を提供します。BUTTON 要素にはコンテンツを含めることができます。たとえば、画像を含む BUTTON 要素は、タイプが「画像」に設定されている INPUT 要素と同じように機能し、類似している可能性がありますが、BUTTON 要素タイプではコンテンツが許可されます。
ボタン要素 - W3C
したがって、この問題に対する設計上の解決策を見つける必要があります。幸いなことに、膨大な量の情報を持つインターネットは、この問題を解決するための役立つ情報を提供してくれます。これは確かに便利ですが、残念ながら多くのデザイナーやウェブサイト開発者はこの要素が存在することすら知りません。 Wufoo をボタン要素に置き換えることを決める前に、マークアップと CSS が次の要件を満たしていることを確認する必要がありました。
要件：
1. ボタンのような外観であること
2. 異なるブラウザでも同じプレゼンテーションスタイルを実現
3. ボタンに適用されたスタイルはハイパーリンクにも使用できます (Wufoo のインタラクションは常にフォーム送信またはリンクトリガー Ajax を使用して実装され、それらが近接していることが多いため、同じプレゼンテーションスタイルにする必要があります)
4. ラベルは柔軟性があり、さまざまな状況に合わせて簡単に変更できます。
5. 情報伝達中に発生するイベントは、アイコンと色によって効果的に区別できます。上記の問題に直面して、私はまず CSS をいくつか記述し、次にクロスブラウザの問題を解決しました。次に見てみましょう:
最終結果

面倒なことは何もありません。シンプルですが、非常に効果的です。私がこの方法とプロセスボタンを使用する理由は、Photoshop を起動して 10,000 個のアイコンを 1 つずつ作成する必要がないからです。コードをよく見ると、最後の 2 つのボタンは実際には 2 つのリンクであることがわかります。
<div class="buttons">
<button type="submit" class="positive">
<img src="/images/icons/tick.png" alt=""/>
保存
</ボタン>
<a href="/パスワード/リセット/">
<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 要素の必須属性であり、画像の内容を説明するために使用されます。ただし、ここでは画像に関連する説明がないため、少し混乱します。ただし、「missing」属性とは異なり、属性値「empty」は標準に完全に準拠しています。これにより、これらの画像が完全に無視された情報を表していることがブラウザに通知され、プロンプト情報が邪魔されて閲覧者が次のボタンを見つけられないことも防ぎます。ここでのアイコンは完全に冗長であるため、統一されたインターフェーススタイルを実現するためだけに使用されるこのアイコンを確認するためにユーザーの時間を無駄にすることは避けたいと考えています。
CSS スタイルシート<br />これらのボタンのスタイルを制御するために使用される CSS のほとんどは非常に簡単です。ブラウザ間のわずかな違いにより、以下のコードで異なるパディング値を適用する必要がありますが、幸いなことに、これらすべては完全に実現可能です。
/* ボタン */
.buttons a、.buttons ボタン{
表示:ブロック;
フロート:左;
マージン:0 7px 0 0;
背景色:#f5f5f5;
境界線:1px 実線 #dedede;
上境界線:1px 実線 #eee;
左境界線:1px 実線 #eee;
フォントファミリ:"Lucida Grande"、Tahoma、Arial、Verdana、sans-serif;
フォントサイズ:100%;
行の高さ:130%;
テキスト装飾:なし;
フォントの太さ:太字;
色:#565656;
カーソル:ポインタ;
padding:5px 10px 6px 7px; /* リンク */
}
.buttons ボタン{
幅:自動;
オーバーフロー:表示可能;
パディング:4px 10px 3px 7px; /* IE6 */
}
.buttons ボタン[タイプ]{
パディング:5px 10px 5px 7px; /* Firefox */
行の高さ:17px; /* サファリ */
}
*:first-child html ボタン[タイプ]{
パディング:4px 10px 3px 7px; /* IE7 */
}
.buttons ボタン画像、.buttons 画像{
マージン:0 3px -3px 0 !重要;
パディング:0;
境界線:なし;
幅:16px;
高さ:16px;
}
もう 1 つの問題は、Internet Explorer では長いボタンをレンダリングするときにバグが発生することです。これに関する詳しい情報は Jehiah.cz で確認できますが、上記の CSS コードでは、width と overflow の値を宣言することで、ある程度問題を回避しています。
ボタンに少し色を追加します。<br />Wufoo では、中立的なアクションのホバー値を青に設定し、肯定的なアクションと否定的なアクションをそれぞれ緑と赤に設定します。次のスタイルコードでは、「追加」や「保存」などの肯定的なアクションと、「キャンセル」や「削除」などの否定的なアクションを区別するために異なる色を使用しています。なかなかいい感じですね、もちろん自分の好きな色を選んで使うこともできます。
/* 標準 */
ボタン:hover、.buttons a:hover{
背景色:#dff4ff;
境界線:1px実線 #c2e1ef;
色:#336699;
}
.ボタン a:アクティブ{
背景色:#6299c5;
境界線:1px 実線 #6299c5;
色:#fff;
}
/* ポジティブ */
ボタン.positive、.buttons a.positive{
色:#529214;
}
.buttons a.positive:hover、button.positive:hover{
背景色:#E6EFC2;
境界線:1px 実線 #C6D880;
色:#529214;
}
.buttons a.positive:active{
背景色:#529214;
境界線:1px 実線 #529214;
色:#fff;
}
/* ネガティブ */
.buttons a.negative、button.negative{
色:#d12f19;
}
.buttons a.negative:hover、button.negative:hover{
背景:#fbe3e4;
境界線:1px実線 #fbc2c4;
色:#d12f19;
}
.buttons a.negative:active{
背景色:#d12f19;
境界線:1px 実線 #d12f19;
色:#fff;
}
まとめ<br />結局のところ、これは Wufoo のニーズを満たすために設計したソリューションに過ぎませんが、私たちの取り組みには非常にうまく機能しています。しかし、これが唯一の方法ではありません。ボタンを丸くしたり、さらにカラフルにしたりする、より興味深い方法を見つけることができます。 <button> タグの間にはほぼすべての要素を配置できるため、<span> タグを挿入して Alex Griffioen の最新の方法に従うことで、非常に美しい丸みを帯びた 3D ボタンを作成することもできます。正直なところ、アプリケーションのインターフェースを再利用可能にすることに取り組んでいるすべてのデザイナーにとって、これがほんの始まりに過ぎないことを願っています。とにかく、Photoshop を開いて入力ボタンを作成する前に、もう少し考えて、このほとんど忘れ去られている <button> タグを詳しく見てみると、驚くかもしれません。
付録：
HTML4.0/xhmtl1.0 の <button> 要素
定義と使用法<br />ボタンを定義します。ボタン要素内に、テキストや画像などのコンテンツを配置できます。これは、この要素と、入力要素を使用して作成されたボタンとの違いです。
<input type="button"> と比較すると、<button> コントロールはより強力な機能と豊富なコンテンツを提供します。 <button> タグと </button> タグの間にあるすべてがボタンのコンテンツであり、テキストやマルチメディアコンテンツなどの許容される本文コンテンツも含まれます。たとえば、ボタンに画像と関連テキストを含め、それらを使用してボタンに魅力的なラベル画像を作成できます。
唯一禁止されている要素はイメージマップです。これは、マウスとキーボードに反応するアクションがフォームボタンの動作を妨げるためです。
オプション属性
属性値の説明 DTD
disabled disabled このボタンを無効にします。ステファニー
namebutton_name このボタンの一意の名前を指定します。ステファニー
タイプ*ボタン
* reset はボタンの種類を定義します。ステファニー
* 提出する
value some_value はボタンの初期値を指定します。この値はスクリプトによって変更できます。ステファニー
標準プロパティ:
id、クラス、タイトル、スタイル、ディレクトリ、言語、xml:lang、アクセスキー、タブインデックス
イベント属性:
onfocus、onblur、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup

<<: MySQLストアドプロシージャを変更する詳細な手順

>>: Expressはログイン認証を実装