Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/HTML/Reference/Attributes/placeholder below:

HTML 属性: placeholder - HTML

placeholder 属性は、フォームコントロールに値が無いときにコントロールに表示するテキストを定義します。プレースホルダーテキストは、ユーザーにコントロールに入力するべきデータの種類に関する短いヒントを提供するべきです。

効果的なプレースホルダーテキストは、説明や質問ではなく、期待するデータの種類のヒントとなる単語や短いフレーズです。プレースホルダーを <label> のかわりに用いてはいけません。プレースホルダーはフォームコントロールの値が空でないときは見えないので、<label> の代わりに placeholder に質問を書くと、使いやすさとアクセシビリティを損ねます。

placeholder 属性は、入力の種類 text、search、url、tel、email、password で用いることができます。<textarea> 要素でも用いることができます。以下の例では、入力フィールドで期待する形式を示すために placeholder 属性を用いています。

メモ: placeholder 属性にはラインフィード (LF) やキャリッジリターン (CR) を含めることはできません。これらが含まれる場合は、プレースホルダーテキストはクリップされます。

プレースホルダーはフォームに入力するべきデータの種類の例を示すためのみに用いるべきです。決して <label> 要素の代替として用いてはいけません。そのような使用法は、アクセシビリティとユーザー体験を損ねます。

<label> のテキストは、視覚上、そしてプログラム上対応するフォームコントロールと紐づいています。スクリーンリーダーはデフォルトではプレースホルダーの内容を読み上げませんが、ラベルの内容は読み上げます。補助技術を用いるユーザーに、コントロールにどのようなデータを入力するべきかを伝えるのは、ラベルです。ラベルは、ポインティングデバイスを用いているユーザーのユーザー体験も向上させます。ユーザーが <label> をクリック・タッチ・タップすると、そのラベルに紐づいたフォームコントロールにフォーカスが移動します。

補助技術に頼っていない人にとっても、プレースホルダーはラベルの代替として信頼することはできません。プレースホルダーテキストは、通常のフォームコントロールテキストより低いカラーコントラストで表示されます。これは、ユーザーにプレースホルダーテキストとフォームフィールドに入力したデータを混同させないための仕様です。しかし、このようにコントラストが低いことは、弱視のユーザーにとって問題になります。さらに、プレースホルダーテキストは、ユーザーがテキストの入力を始めるとフォームフィールドから消えます。消えるプレースホルダーテキストに指示の情報や例が含まれていると、認知に問題があるユーザーを混乱させる可能性があります。プレースホルダーにラベルが含まれる場合は、フォームが使用できなくなる可能性があります。

<form action="/ja/docs/Web/HTML/Reference/Attributes/placeholder">
  <label for="name">名前を入力:</label>
  <input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
  <button type="submit">送信</button>
</form>

• HTML title
• CSS :placeholder-shown 擬似クラスセレクター
• CSS ::placeholder 擬似要素セレクター

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4