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

September 19, 2022 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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Text Area Hidden</title>
    <style type="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>
    <textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>

    <h2>Hide Don't take up space</h2>
    <textarea class="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.

Baca Juga

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

Disappear on current webpage with no other effect.

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

Solution 4:

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

textarea.hidden {
     visibility: hidden
}

</style>
</head>
<body>

<textarea class="none">The display is none.</textarea>
<br>
<textarea class="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 Guru