検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >忘れられたボタンタグ_HTML/Xhtml_Webページ制作

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

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

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

悪くありません。実際、W3C の定義によれば、
要素はこれらのパフォーマンスの違いを解決するために生まれました。


パスワードの変更



キャンセル


これの目的は、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 のニーズを満たすために私たちが設計したソリューションにすぎませんが、私たちの努力でうまく機能したということです。しかし、これが唯一の方法ではなく、ボタンを丸くしたり、さらにカラフルにしたりするもっと興味深い方法を見つけることができます。
定義と使用法
ボタンを定義します。ボタン要素内には、テキストや画像などのコンテンツを配置できます。これが、この要素と 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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：XHTML入門学習チュートリアル：フレームタグの使い方_HTML/Xhtml_Webページ制作次の記事：XHTML入門学習チュートリアル：フレームタグの使い方_HTML/Xhtml_Webページ制作

関連記事

続きを見る