textbixesとテキストエリア

Question

私のウェブサイトの連絡先-usのHTMLページ上のフォームをのデフォルトのテキストを表示するための最良の方法を持っているものを二つのフィールド

1）対象

2）メッセージ

ページを

最初にこの2つのボックスに「 ここに件名を入力」と「 ここにメッセージを入力」と表示するようにします。

テキストボックスの「値」属性を使用してこれを行うことができますが、これが最善の方法ですか？ これを実現するにはどのような選択肢が必要ですか？

Answer 1

ああ、私は本当にこの件に関する記事を書き終える必要があります。磨かれていないバージョンは次のとおりです。

最初—フィールドに入力する内容はではなく、のデフォルト値です。デフォルト値は、（GeoIPに基づいて入力された国や顧客レコードからの配達先アドレスなど）考えられるように提出できるものです。

第2の—デフォルト値を偽のラベルとして使用し、ユーザーがフォーカスしたときにその値を消去すると（ユーザーが手動でメッセージを削除しないようにしたいと思われる場合）、アクセシビリティの問題が発生します。スクリーンリーダーは、集中しているコンテンツを読み上げます。フォーカスを当てて削除すると、情報を取得できません。

最高のオプションは、私の意見では、コントロールの隣に<label>を置くことです。 Webページは一般的にスペースが足りない—スクロールバーは悪くありません。

あなたは本当にそれがその後、コントロールであるように、それは見てみたい場合：

1. ではJavaScriptを使用して、その<div>上のクラスを設定し<div>
2. に<label>と<input>を入れて（そう、あなたはしないでください
3. CSSを適用して<div>をposition: relativeに設定し、サイズを指定してください。
4. それはdiv要素を埋めるために<input>transparentとスタイルのbackgroundを作る
5. Position<input>
6. 下<label>は、入力の値が空の文字列であるかどうかをチェック機能を書きます。答えに応じてdivのクラスをオンとオフに切り替えます。
7. そのクラスがDIVに設定されている場合、テキストが画面の外に隠された（しかしまだスクリーンリーダーが利用可能）されるように、（例えば-999emなど）高い負の長さにtext-indent設定

Answer 2

はい、これが最良の方法です。要素がフォーカスを取得したら、JavaScriptを使用してテキスト入力/領域を空にできます。ユーザーがデフォルトのテキストを送信するケースをどのように処理するかを検討することを忘れないでください。私は、有効なユーザー名かどうか "入力ユーザー名"ですか？