November 8, 2022

How to Make Input Field Hidden in HTML

In this tutorial, you will learn how to make input field hidden in HTML. When you are creating a form, you might want that certain data in the input filed cannot be seen or modified by users for security purposes.

To make the input field hidden, you can use the input element type with a value of hidden. Hidden inputs are completely invisible to users on the webpages.

In the following example, we will make an input field hidden in HTML. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have 2 elements (label and input).
The label element is used to specify a label for an input field. The value of for attribute is set to the name of the corresponding input field.
The input element specifies an input field where the user can enter data.
The input has a type attribute with a value of hidden and an id attribute with a value of name. As result, the users cannot see or modify the data in the input field.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input field hidden</title>
</head>

<body>
    <label for="name">Name:</label>
    <input type="hidden" id="name">
</body>

</html>

You May Also Like: