はじめに
ページ１ → ページ2 → ブラウザバックしてページ1 へ遷移を行うと、
checkboxが以前の状態のまま保持されてしまいます。
（ページ1でScalesにcheckしてページ2へ。その後、ブラウザバックするとScalesのチェックは残ったまま）
利用規約などにおいては、チェックボックスは外すようにしたいので以下のコードを修正します
<fieldset>
<legend>Choose your monster's features:</legend>
<div>
<input type="checkbox" id="scales" name="scales">
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns">
<label for="horns">Horns</label>
</div>
</fieldset>
<a href="sample2.html">ページ2へ</a>
checkが残る原因は?
checkboxに限らず、
inputタグへの入力情報はブラウザに記憶される仕様となっているようです。
既定では、ウェブサイト上の
<input>欄を通じてユーザーが送信した情報はブラウザーによって記憶されます。
これよってブラウザーは、自動補完 (入力を受けた入力欄の補完候補をユーザーに提示する機能) や、オートフィル (読み込まれた入力欄をあらかじめブラウザーが補完する機能) を実現しています。
解決方法
-
autocomplete="off"を追加するだけ
- <input type="checkbox" id="scales" name="scales">
+ <input type="checkbox" id="scales" name="scales" autocomplete="off">
autocomplete属性を指定することで、ブラウザの自動補完やオートフィル機能の制御ができます。
autocomplete＝"off"にすることで、ブラウザに対してユーザーの入力情報を保存しないようにすることが出来ます。
また、ブラウザがユーザーの入力情報をキャッシュしないことで、
ページ遷移後にブラウザバックしても 入力データが残らないです。
inputタグの他にも、 textarea、select、formタグで利用できます。
入力値としてテキストまたは数値を取る 要素、 要素、 要素、 要素で利用できます。