§表紙画面§

よくある名前変換フォーム

＝入力内容（value）の初期値に、変換後の名前が表示されるタイプ

value="★★"

↑★★の部分が入力内容の初期値として表示されます。
ここを夢小説用タグ（#name#など、自分で設定した名前タグ）にしておくと、ブラウザ上ではデフォルト名や変換後の名前が代入されるという仕組みです。

ALICE+独自タグでフォームを作ったときとほぼ同じ形式がこちらです。
最もスタンダードで扱いやすいため、個人的にお勧めのフォームです。

プレースホルダ（placeholder）を使った名前変換フォーム

HTML5のplaceholder属性を使う

placeholder="★★"

↑★★の部分がプレースホルダとして表示される内容です。
例では夢小説用のタグ（#name#など、自分で設定した名前タグ）を入れています。

プレースホルダとは『未入力状態のときのみ表示されるダミーテキスト』のことです。
“ダミーテキスト”なので、入力時はこれら文字を消すことなく書き入れることができます。
先に紹介したスタンダードな名前変換フォームでは『まず入力されている文字を消す』ことが必要になりますが、プレースホルダならその手間がなくなる……ということです。

※注意点１

紹介しておいてなんですが、
入力欄が２つ以上のときはプレースホルダを使わないほうが無難です。
試しに上の入力欄「デフォ名１」にのみ文字を入力し、「OK」を押してみてください。
デフォ名１だけ名前変換され、デフォ名２のあった場所は空白になります。
これは、プレースホルダが『未入力状態のときのみ表示されるダミーテキスト』だからです。
つまり、プレースホルダの文字が表示されたまま＝未入力＝OKを押せば『未入力』が名前変換設定にセットされる……というわけです。

閲覧者は必ずしもすべての変換設定を書き換えるわけではありません。ファーストネームは変えるけど、ほぼ使われないファミリーネームは変えない（デフォルトのまま）……など。
そうした動作を想定したとき、プレースホルダ使用だと『未入力かどうか』がパッと見では分かりづらい恐れがあります。

以上のことから、プレースホルダは入力欄が１つのときのみに使用がお勧めです。

※注意点２

ガラケーなど、一部の古いブラウザではプレースホルダが表示されません。
なので、「閲覧しているすべての人がこのダミーテキストを読めるとは限らない」ということを念頭に置いて使用する必要があります。
（例えばそれぞれの入力欄に「名字」「名前」とプレースホルダを書いたとして、ガラケーユーザーにはその文字が見えていないため、何を変換するための入力欄なのかが分からない……ということも起こり得ます）
フォームの外側に入力欄の説明を付けておく……など、なにがしかユーザビリティへの配慮が欲しいと愚考する次第です。
「ユーザビリティ＞＞＞見栄え」党の人間なので……。
上の例では変換フォームの上に『変換後の名前』を置くことで入力欄の内容を推察できるようにしています。（名前変換小説に慣れていれば分かる、みたいな書き方でアレですが）
あとこれだと、プレースホルダが表示できないブラウザでも「名前変換が成功しているのか否か」を確認できる利点があります。
見栄え的にどうしても嫌なら、端末別表示タグを用いてガラケーにだけ入力欄の説明を表示するとか……。ガラケー……（苦悩）

失敗例

value［＝入力欄の内容］の初期値が設定されているため、そちらが表示されています。
placeholder［＝未入力状態のときのみ表示されるダミーテキスト］は表示されません。

おまけ：名前変換が各ページに反映されているかの確認