テキストボックスに灰色で値を事前に入力しておきたい

Question

前提

入力フォームを効率よく利用できるようにしたいので、事前に値が入力されている状態にできない調べたかったのですが、ググるキーワードがわからない状況です。

実現したいこと

• 入力者が記入するであろうことが予測できる場合には事前に入力されていたい
• イメージは穴埋め
• 理想は、たまに灰色で@以降が事前に記入されているテキストボックスの形式
• Value属性で例を示すのは違うと思う

発生している問題・エラーメッセージ

技術を調べる際のキーワードが分かっていない

該当のソースコード

なし

試したこと

「テキストボックス 穴埋め」「テキストボックス 灰色 事前入力」などで検索したのですが、調べたい技術にたどり着くことが出来ませんでした。

Comments

[m.ts10806]

>テキストボックス 灰色 事前入力

私の方では１つ目に以下が出てきましたが、何がどう違ったのですか？
https://weback.net/htmlcss/1284/
そのあたり具体的に記載されないことには上記の記事のような回答がつくと思いますし、
既についています。
何を見て何を試して、何が問題なのかを記載してください。

Answer 1

事前入力ではないですが、灰色の文字で記入例を表示するのはplaceholder属性ですね。

Answer 2

• Value属性で例を示すのは違うと思う

value 属性でいいと思いますよ。

<input value="@example.com" style="color:gray" oninput="this.removeAttribute('style')">

:invalid を使ってもいいかもしれませんね。

<style>
:invalid { color: gray }
</style>
<input type=email value="@example.com">