忘れられたボタンタグ_HTML/Xhtml_Webページ制作

注: この記事はボタンタグを再理解するために誰かが翻訳したものですが、精査すべき箇所が多く、わかりにくいと感じます。したがって、この記事は私個人の学習経験に基づいて再翻訳しました。
英語原文: http://particletree.com/features/rediscovering-the-button-element/
すべてのプログラム設計者にとって、統一されたスタイルのインターフェイスをユーザーに提供することは不変の要件です。 。しかし、Web ページ上でこの統一されたスタイルを実現することは非常に困難です。これは、オペレーティング システムやブラウザごとに Web コンテンツの表現方法に違いがあり、その違いがほぼ不規則であるためです。中でもフォーム要素の処理過程でこの問題が顕著であり、多くの人が戸惑うのが「送信」ボタンの性能基準の統一問題です。
たとえば、属性 type="submit" を持つ input タグは、さまざまなブラウザー (Firefox の場合) では非常に見苦しくなるか、何らかの欠陥があるか (Internet Explorer の場合)、さらには非常に厳格に動作します。サファリでは）。この問題の解決策は通常、input 属性を image に設定し、ボタン イメージを自分でデザインすることです。しかし、これにより、ボタンを使用する必要があるたびに、余分な煩わしい作業が追加されます。したがって、より柔軟で、デザイナーにとって意味のある、より良いソリューションが必要です。幸いなことに、この方法はすでに実際に存在しており、私たちの側でもう少し作業が必要なだけです。友達の皆さん、私たちの素敵な小さな友達を紹介させてください!
Input VS Button
使用している送信ボタン タグは次のとおりです:

さまざまなブラウザでの表示スタイルは次のとおりです:

を使用して上記のボタン コードを作成すると、次のようになります:
送信
これらは次のように動作します:

これらのボタンと上で作成したボタンとの間に操作や動作に違いはありません。フォームの送信に使用するだけでなく、無効に設定したり、ショートカット キーを追加したり、タブインデックスを設定したりすることもできます。幸いなことに、プレゼンテーション スタイルの違いを除けば、Safari はこれらの機能をサポートしています (入力ボタンと比較して、Safari のボタン ボタンには表面の液体効果がありません)。 タグの最も優れた機能は、次のコードを使用して画像を追加するなど、便利な HTML 要素をタグ内に配置できることです。
送信 ブラウザでは次のように表示されます:

悪くありません。実際、W3C の定義によれば、
要素はこれらのパフォーマンスの違いを解決するために生まれました。 BUTTON 要素で作成されたボタンは、INPUT 要素で作成されたボタンと同様に機能しますが、より豊富なレンダリングの可能性が提供されます。たとえば、BUTTON 要素には、そのタイプの INPUT 要素と同様に機能するコンテンツが含まれる場合があります。は「image」に設定されていますが、BUTTON 要素タイプではコンテンツが許可されています。
ボタン要素 - W3C
したがって、これに対する設計ソリューションを見つける必要があります。幸いなことに、インターネットの膨大なデータは、この問題を解決するのに役立つ助けを提供してくれます。これは確かに非常に便利ですが、残念ながら多くのデザイナーや Web サイト開発者はこの要素の存在にさえ気づいていません。 Wufoo (この記事の著者、dudo note のネットワーク製品) を button 要素に置き換えることを決定する前に、このラベルと CSS が次の要件を満たしていることを確認する必要がありました:
要件:
1. ボタンの外観を持つ必要があります
2. 異なるブラウザで同じ表示スタイルを使用する
3. ボタンに適用されるスタイルはハイパーリンクでも使用できます (Wufoo のインタラクションは次のとおりです)。常に、フォーム送信メソッドまたはリンクをトリガーする Ajax メソッドのいずれかを使用して実装されます。これらは多くの場合、近くにあるため、同じプレゼンテーション スタイルにする必要があります)
4. 特定の状況下では、ラベルは柔軟で柔軟な場合があります。簡単に変更できます
5. 情報伝達プロセス中に発生するイベントは、アイコンと色を使用して効果的に区別できます
上記の問題に直面して、私はまず CSS を作成し、次にクロスブラウザーの問題を解決しました。次に見ていきます:

最終結果
これは驚くべきことではありません。シンプルですが非常に効果的です。私がこの方法でボタンを操作するのが好きな理由は、Photoshop を起動して 10,000 個のアイコンを 1 つずつ作成する必要がないからです。コードを詳しく見てみると、次の 2 つのボタンが実際には 2 つのリンクであることがわかります。

保存



パスワードの変更



キャンセル

これの目的は、Web アプリケーションの多くのアクションがイベント (REST) 駆動型であるため、特定の URL を介してユーザー リクエストを送信すると、これらのアクションを初期化できるためです。両方の要素に適用できるスタイルを使用すると、Ajax と標準の送信ボタンによって引き起こされるインタラクションのスタイルの均一性を維持する際の柔軟性が高まります。
ここで、なぜ画像要素の alt 属性を空白のままにしなければならないのかと疑問に思われるかもしれません。 alt は img 要素の必須属性で、画像の内容を説明するために使用されますが、ここには画像の説明がなく、少しわかりにくいです。ただし、「missing」属性とは異なり、属性値「null」は標準に完全に準拠しており、これらの画像が完全に無視できる情報を表していることをブラウザーに伝え、閲覧者が画像を見つけられなくなることを防ぎます。プロンプト情報の障害の「次へ」ボタン。ここのアイコンは完全に冗長であるため、統一されたインターフェイス スタイルを実現するために完全に使用されるこのアイコンを見てユーザーの時間を無駄にすることは避けたいと考えています。
CSS スタイル シート
これらのボタンのスタイルを制御するために使用される CSS のほとんどは、ブラウザーごとにわずかな違いがあるため、以下のコードで異なるパディングを適用します。幸いなことに、これらすべては完全に達成可能です。
/* ボタン */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px Solid #dedede;
border-top:1px Solid #eee;
border-left:1px Solid #eee;
font-family:"Lucida Grande"、Tahoma、Arial、ベルダナ、サンセリフ;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:# 565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* リンク */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
行の高さ: 17px; /* Safari */
}
*:first-child html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons ボタンimg, .buttons a img{
margin:0 3px -3px 0 ! important;
padding:0;
border:none;
width:16px;
height:16px;
}
もう 1 つの問題は、Internet Explorer が長いボタンをレンダリングするときにいくつかのバグがあることです。これに関する情報は Jehiah.cz にありますが、上記の CSS コードでは、width と overflow の値を宣言することで、この問題をある程度回避できます。
ボタンに少し色を追加します
Wufoo では、ニュートラル アクションを使用します (ここでは、作成者はパスワード変更ニュートラル アクションや、「OK」や「送信」などのアクションを呼び出します) 「」のようなアクションをポジティブアクション、「諦める」「キャンセル」などのアクションをネガティブアクションと呼びます。ホバー値は青、ポジティブアクションとネガティブアクションは緑と赤に設定されます。以下のスタイル コードでは、「追加」や「保存」などの肯定的なアクションと、「キャンセル」や「削除」などの否定的なアクションを区別するために異なる色を使用しています。かなりいい感じです、もちろん好きな色を選ぶこともできます。
/* 標準 */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px Solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px Solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2 ;
border:1px ソリッド #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1pxソリッド #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover、button.negative:hover{
background:#fbe3e4;
border:1px Solid #fbc2c4;
color:#d12f19;
}
。ボタン a.negative:active{
background-color:#d12f19;
border:1px Solid #d12f19;
color:#fff;
}
まとめ
最後に言いたいのは、これは Wufoo のニーズを満たすために私たちが設計したソリューションにすぎませんが、私たちの努力でうまく機能したということです。しかし、これが唯一の方法ではなく、ボタンを丸くしたり、さらにカラフルにしたりするもっと興味深い方法を見つけることができます。 タグの間には他のほとんどすべての要素を配置できるため、 タグを挿入して Alex Griffioen の最新の方法に従って、角が丸い非常に見栄えの良い 3 次元のボタンを作成することもできます。正直に言うと、これがプログラムでインターフェイスを再利用しようと努力しているすべてのデザイナーにとっての始まりに過ぎないことを願っています。いずれにせよ、Photoshop を開いて入力ボタンを作成する前に、もっとよく考えて、ほとんど忘れられているこの タグをもう一度見てください。おそらく驚かれるでしょう。
付録: HTML4.0/xhmtl1.0 の
要素
定義と使用法
ボタンを定義します。ボタン要素内には、テキストや画像などのコンテンツを配置できます。これが、この要素と input 要素を使用して作成されたボタンの違いです。
コントロールは、 よりも強力な機能と豊富なコンテンツを提供します。 タグと タグの間のすべてがボタンのコンテンツであり、テキストやマルチメディア コンテンツなどの許容可能な本文コンテンツも含まれます。たとえば、ボタンに画像と関連テキストを含めて、それらを使用してボタン内に魅力的なマークアップ画像を作成できます。
唯一禁止されている要素は画像マッピングです。これは、マウスとキーボードに依存する操作がフォーム ボタンの動作を妨げるためです。
選択可能な属性
属性値の説明 DTD
無効 無効 このボタンを無効にします。 STF
namebutton_name は、このボタンの一意の名前を指定します。 STF
type* button
*reset はボタンのタイプを定義します。 STF
* submit
value 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