Hidden HTML Field: Using Correctly In Your Code
Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
- Value of
- How To Define Input Type In HTML (All The Values And Attributes)
- What does
Hidden HTML Field: Using Correctly In Your Code do?
- Defines a field within a form that is not visible to the user.
<input type="file" name="fileupload" value="fileupload" id="fileupload">
<label for="fileupload"> Select a file to upload</label>
<input type="hidden" id="ipaddr" name="ipaddr" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
<input type="hidden" id="referer" name="referer" value="<?php echo $_SERVER['HTTP_REFERER']; ?>">
<input type="submit" value="submit">
hidden value of
type defines a form field that is never displayed to the user. The user cannot change the value of the field, or interact with it.
When the user submits the form, all of the data they have entered is sent, including the data stored invisibly in the hidden fields.
Why Hide a Field?
hidden fields are used programatically, to pass information about the current page to the server.
For example, if a user fills out an enquiry form, we may want to obtain their IP address using a snippet of PHP. We may also want to grab the URL of the referring page. You can see this in action in our code sample; the form captures the information, but does not display it.
Hidden fields allow us to send all kinds of information along with a form message, without the user having to be involved in the process. Hidden fields can also be used to pass information back to scripts. This may include security tokens, or the name of the relevant row in the database. The user does not need to see this data, but it is passed back to the server on submission so that scripts function correctly behind the scenes.
Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.
Browser Support for hidden
All values of type
|text||Defines a text entry field in a form.|
|checkbox||Defines a checkbox, which the user can toggle on or off.|
|radio||Defines a circular selection button in a form.|
|password||Displays an obfuscated password entry field.|
|hidden||Defines a field within a form that is not visible to the user.|
|submit||Defines a button that is clicked to submit a form.|
|reset||Defines a button on a form that will return all fields to their default values.|
|button||Defines a button-like input.|
|file||Defines a file upload box with a browse button.|
|image||Defines an image that is clicked to submit a form.|
All attributes of input
|step||Specifies the interval between valid values in a number-based input.|
|required||Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty.|
|readonly||Disallows the user from editing the value of the input.|
|placeholder||Specifies placeholder text in a text-based input.|
|pattern||Specifies a regular expression against which to validate the value of the input.|
|multiple||Allows the user to enter multiple values into a file upload or email input.|
|min||Specifies a minimum value for number and date input fields.|
|max||Specifies a maximum value for number and date input fields.|
|list||Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.|
|height||Specifies the height of an image input.|
|formtarget||Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of "submit" or "image".|
|formmethod||Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of "submit" or "image".|
|formenctype||Specifies how form data should be submitted to the server. Only for use on input types "submit" and "image".|
|formaction||Specifies the URL for form submission. Can only be used for type="submit" and type="image".|
|form||Specifies a form to which the input field belongs.|
|autofocus||Specifies that the input field should be in focus immediately upon page load.|
|Defines the input type.|
|name||Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted.|
|value||Defines an initial value or default selection for an input field.|
|size||Specifies the width of the input in characters.|
|maxlength||Specifies the maximum number of characters that can be entered in a text-type input.|
|checked||Specifies whether a checkbox or radio button form input should be checked by default.|
|border||Was used to specify a border on an input. Deprecated. Use CSS instead.|
|src||Defines the source URL for an image input.|
|disabled||Disables the input field.|
|accesskey||Defines a keyboard shortcut for the element.|
|language||Was used to indicate the scripting language used for events triggered by the input.|
|autocomplete||Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.|