hidden, display:none

Previousonclick NextLocalStorage, sessionStorage

Last updated 2 months ago

hidden, display:none

Є кілька способів приховати <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>

Як це працює?

Спочатку input видно.
Натискання кнопки змінює visibility:
- Якщо він прихований (hidden), стає видимим (visible).
- Якщо видимий, стає прихованим.

Результат:

Input зникає, але місце під нього залишається.
Натискання кнопки змінює стан між прихованим та видимим.

Previousonclick NextLocalStorage, sessionStorage

Last updated 2 months ago

Є кілька способів приховати <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>

Як це працює?

Спочатку input видно.
Натискання кнопки змінює visibility:
- Якщо він прихований (hidden), стає видимим (visible).
- Якщо видимий, стає прихованим.

Результат:

Input зникає, але місце під нього залишається.
Натискання кнопки змінює стан між прихованим та видимим.

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

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

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

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

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

HTML + CSS + JavaScript

Як це працює?

Результат:

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

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

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

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

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

HTML + CSS + JavaScript

Як це працює?

Результат:

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

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

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

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

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

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

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

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