If I Want My Textarea To Be Hidden, How Do I Do It?

July 31, 2024 Post a Comment

If I want my textarea to be hidden, how do I do it?

Solution 1:

You have a few options, here are some examples:

Display:none
Visibility:hidden

Here is some example code for you to see for yourself

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Text Area Hidden</title><styletype="text/css">.hideButTakeUpSpace
        {
            visibility: hidden;
        }

        .hideDontTakeUpSpace
        {
            display:none;
        }

    </style></head><body><h1>Text area hidden examples</h1><h2>Hide but take up space (notice the gap below)</h2><textareaclass="hideButTakeUpSpace"rows="2"cols="20"></textarea><h2>Hide Don't take up space</h2><textareaclass="hideDontTakeUpSpace"rows="2"cols="20"></textarea></body></html>

See this jsFiddle Example

Solution 2:

Using css: display: none; (this will make the textarea disappear completely, the space it would normally take up will not be reserved)

Solution 3:

Hidden with occupy the space on current webpage.

<textareastyle="visibility:hidden"></textarea>

Disappear on current webpage with no other effect.

<textareastyle="display:none" ></textarea>

Solution 4:

<!DOCTYPE html><html><head><style>textarea.none {
    display: none;
}

textarea.hidden {
     visibility: hidden
}

</style></head><body><textareaclass="none">The display is none.</textarea><br><textareaclass="hidden">visiblity is hidden</textarea><br><textarea >This is visible and you can see a space taken visiblity:hidden</textarea></body></html>

Solution 5:

Using the CSS visibility property should do the trick.

Html5 Tutorial