hidden, display:none

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

https://developer.mozilla.org/en-US/docs/Web/CSS/display

Є кілька способів приховати <input>, залежно від ситуації:

1. CSS: display: none; (елемент зникає повністю)

.hidden {
    display: none;
}
<input type="text" class="hidden">

✅ Елемент не займає місця в розмітці. ❌ Його не видно і його не можна натискати.

2. CSS: visibility: hidden; (прихований, але місце займає)

.hidden {
    visibility: hidden;
}
<input type="text" class="hidden">

✅ Елемент невидимий, але залишається на місці. ❌ Його не можна натискати.

3. HTML: hidden (атрибут)

<input type="text" hidden>

✅ Еквівалент display: none;. ❌ Його не видно і не можна взаємодіяти.

4. CSS: opacity: 0; (прихований, але доступний)

.hidden {
    opacity: 0;
}
<input type="text" class="hidden">

✅ Його не видно, але він працює (можна натискати). ❌ Його можна випадково натиснути.

5. JavaScript: приховати/показати динамічно

document.getElementById("myInput").style.display = "none"; // Приховати
document.getElementById("myInput").style.display = "block"; // Показати
<input type="text" id="myInput">
<button onclick="document.getElementById('myInput').style.display = 'block';">Показати</button>

🔹 Який спосіб вибрати?

  • display: none; або hidden — якщо потрібно повністю сховати.

  • visibility: hidden; або opacity: 0; — якщо потрібно зберегти місце.

  • JavaScript — якщо потрібно керувати динамічно.

Ось приклад використання visibility: hidden; для приховування <input> із можливістю показати його назад:

HTML + CSS + JavaScript

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приховати input</title>
    <style>
        .hidden {
            visibility: hidden;
        }
    </style>
</head>
<body>

    <input type="text" id="myInput" value="Цей input прихований">
    <button onclick="toggleVisibility()">Приховати/Показати</button>

    <script>
        function toggleVisibility() {
            let input = document.getElementById("myInput");
            if (input.style.visibility === "hidden") {
                input.style.visibility = "visible";
            } else {
                input.style.visibility = "hidden";
            }
        }
    </script>

</body>
</html>

Як це працює?

  1. Спочатку input видно.

  2. Натискання кнопки змінює visibility:

    • Якщо він прихований (hidden), стає видимим (visible).

    • Якщо видимий, стає прихованим.

Результат:

  • Input зникає, але місце під нього залишається.

  • Натискання кнопки змінює стан між прихованим та видимим.

PreviousonclickNextLocalStorage, sessionStorage

Last updated