【html】)パスワード認証フォーム（htmlでバレてもOK）

パスワード認証フォームをつくりたいです。（htmlを見てバレてもいいです）
イメージとしては…

────────────────────────────

┌──────────────────────┐
│パスワードを入力してください（placeholder） │［送信］
└──────────────────────┘
パスワードが違います（赤文字）　←間違ったときに表示

────────────────────────────

そして正しいパスワードを入力するとサイトへリンク

リンク先のURLはパスワードと同じではありません。

まだまだ初心者でうまく説明できない部分も多くありますがよろしくお願いします。

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2020/10/03 23:57

<form name=certifier>

<input type=password name=p required placeholder="パスワードを入力してください"><!-- Enter を押すと送信される -->
<button type=submit>送信</button>
</form>

<script>

// パスワードとリンク先 URL の設定
var LINKS = [
_ {pw:"pass1", url:"secret.html"},
_ {pw:"pass2", url:"himitsu.html"},
];

window.addEventListener('load', function(ev) {
_ var form = document.forms["certifier"];

_ // 送信されたパスワードに従い URL を変える
_ form.addEventListener('submit', function(event) {
_ _ event.preventDefault(); // 実際には送信させない
_ _ var p = form.elements['p'];
_ _ var link = LINKS.filter(x => x.pw == p.value);
_ _ if (link.length == 0) {
_ _ _ // フォーム検証 API を使って問題をお知らせ
_ _ _ p.setCustomValidity("パスワードが違います");
_ _ _ p.reportValidity();
_ _ _ return;
_ _ }
_ _ location.href = link[0].url; // 送信ではなく単純リンク
_ }, false);

_ // 入力があったら、表示中のお知らせを消す
_ form.addEventListener('input', function(event) {
_ _ event.target.setCustomValidity("");
_ }, false);

}, false);

</script>

この回答へのお礼

うまくいきました！！！

ここまで丁寧に書いていただき本当に感謝感激です。

いつか一人でこんなhtmlをかけるようになるため頑張ります。

今回は本当にありがとうございました。

お礼日時：2020/10/06 22:27

No.1 回答者： gura_ 回答日時： 2020/10/03 14:12

パソコンHTML初心者さん

･････パスワード認証フォームをつくりたい･･････････････

ご参考に↓

http://cya.sakura.ne.jp/java/prompt.htm

この回答へのお礼

わかりやすいサイトへのリンクありがとうございます。

誠に恐縮なのですがリンクのページ「Q&A 4」を採用しようと思うのですが、OKを押すだけでなく、Enterを押すだけで送信できるようにしたいです。

よろしくお願いします。

お礼日時：2020/10/03 16:50