忘れられたボタンタグ_HTML/Xhtml_Webページ制作-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:45 PM

アクションできる私たちボタンラベル

注: この記事はボタンタグを再理解するために誰かが翻訳したものですが、精査すべき箇所が多く、わかりにくいと感じます。したがって、この記事は私個人の学習経験に基づいて再翻訳しました。
英語原文: 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 までご連絡ください。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、