Problem Statement
What is the purpose of type="hidden"?
Explanation
The hidden input type stores and sends data without displaying it to users. Hidden inputs are not visible on the page but their values are included when the form is submitted. They are commonly used for tracking information like user IDs, session tokens, timestamps, or any data that needs to be sent with the form but should not be modified by users. For example, when editing a record, you might use a hidden input to store the record ID. However, hidden inputs are not secure. Users can view and modify hidden values using browser developer tools, so never use them for sensitive data like passwords or secret keys. Hidden inputs are useful for maintaining state or passing data between pages in multi-step forms.
Code Solution
SolutionRead Only
<!-- Hidden input with user ID --> <form action="/update-profile" method="POST"> <input type="hidden" name="user_id" value="12345"> <label for="name">Name:</label> <input type="text" id="name" name="name" value="John Doe"> <label for="email">Email:</label> <input type="email" id="email" name="email" value="john@example.com"> <button type="submit">Update Profile</button> </form> <!-- Hidden timestamp --> <form action="/submit" method="POST"> <input type="hidden" name="timestamp" value="1640000000"> <input type="hidden" name="form_version" value="2.1"> <input type="text" name="feedback" placeholder="Your feedback"> <button type="submit">Submit</button> </form> <!-- CSRF token (security) --> <form action="/delete-account" method="POST"> <input type="hidden" name="csrf_token" value="abc123xyz789"> <p>Are you sure you want to delete your account?</p> <button type="submit">Confirm Delete</button> </form>
