Creating Hidden Data in Input Filed in HTML

A hidden control stores the data that is not visible to the user on a Web page. It is similar to the text fields but the main difference is that this control does not show on a Web page. This control is used to submit some information, which cannot be edited by user.

Apart from this, the hidden control can be used to maintain the session. For example, hidden control can be used to store the ID such as customer id on a Web page. You can create a hidden control on a Web page by adding the <input type=”hidden”> tag to the HTML code.

Let’s do the following steps to create hidden data using hidden control:


<!DOCTYPE html>
<html>
<head>
    <title> Adding Hidden Fields</title>
    <script language=”Javascript”>
        Function restoretext()
            {
                Document.form1.textbox.value=document.form1.backup.value;
}
    </script>
</head>
<body>
<center>
    <h1>Edit the text and then click the show hidden field button.</h1><br>
    <form name=”form1” action=”” method=”post”>
        <input type=”text” name=”textbox” value=”Example of Creating Hidden Data” size=”40’ /><br><br>
    <input type=”button” value=”Restore Text” OnClick=”restoretext()” />
    <input type=”hidden” name=”backup” value=”Example of Creating Hidden Data” />
    </form>
</center>
</body>
</html>

Save the document with the name CreatingHiddenData.html and open on browser.

Note: We have used JavaScript in this code. You will learn about JavaScript in detail in further tutorial.

PRV MENU NEXT

Creating Hidden Data in Input Filed in HTML

Latest Post