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

これの目的は、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