ラボ > HTML:form関連

formのパスワードの初期値を空白にしたい

PCを複数人で使い回す状況を想定する場合、パスワードの初期入力は困る。

作成日:2018-01-18, 更新日:2020-07-08

基本

PCを複数人で使い回す状況を想定しないなら、気にする必要は無い。

色々と設定方法はあるけど、基本ブラウザ側が各設定を無効にしている。
ブラウザ側の言い分は「入力の手間を省いてあげている」ってコトらしい。

メアド、パスワードが表示される条件が下記を満たすときらしい。
・「type=text」が存在
・「type=password」が一つだけ存在

そのため「type=password」を2つ用意して、条件を満たさないようにする。
※2020-07-08時点だと、これだけだと不足。

解決案

▼有効な手法(「type="password"」を2つ用意して、一つは非表示)

<input type="password" name="password" class="form-control" />
<input type="password" name="password2" style="display:none" />

ただ、今後どうなるかは不明。

「name="password2" style="display:none"」は「name=password2」を非表示っていう設定がダメになる可能性がある。
だから、「表示はしているけど枠が狭すぎて見えないだけ」って変更したほうがいいかもしれない。

▼「display:none」にしているけど下記のように変更したほうがいいかもしれない。

<input type="password" name="password" class="form-control" />
<div style="overflow:hidden;width:0;height:0;"><input type="password" name="password2" /></div>

2020-07-08時点

2020-07-08時点だと最初に出現するtext、passwordに値が入るっぽい。

▼対策

<div style="width:0;height:0;overflow:hidden;">
<input type="text" name="_users">
<input type="password" name="_pwd">
</div>

<input type="text" name="users" class="form-control" />
<input type="password" name="pwd" class="form-control" />

※最初に幅・高さを0で、はみ出た分を非表示にしたdivの中にtextとpasswordをダミーでいれておく