Skrypt 1: Pokaż/ukryj hasło w formularzu

Teoria

Klasyczny "oczko" przy polu hasła, pozwalające użytkownikowi sprawdzić, czy wpisał hasło poprawnie, zamiast zgadywać po samych kropkach. Działa przez zamianę atrybutu type pola między password a text.

Kod (JavaScript)

<input type="password" id="haslo">
<button id="przyciskOko">Pokaż hasło</button>

<script>
    const pole = document.getElementById("haslo");
    const przycisk = document.getElementById("przyciskOko");

    przycisk.addEventListener("click", function () {
        if (pole.type === "password") {
            pole.type = "text";
            przycisk.textContent = "Ukryj hasło";
        } else {
            pole.type = "password";
            przycisk.textContent = "Pokaż hasło";
        }
    });
</script>

Komentarz i wyjaśnienie kodu

pole.type odczytuje/zmienia atrybut type elementu <input> na żywo — przeglądarka natychmiast zmienia sposób wyświetlania wpisanego tekstu (kropki vs zwykłe znaki), bez przeładowania strony.

Typowe błędy

Częsty błąd to zapomnienie o zmianie treści przycisku razem z typem pola — użytkownik traci wtedy orientację, w jakim stanie jest pole.