Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Specify Non-Relevant Element in HTML
A boolean attribute makes up the hidden attribute.
It indicates that an element is either not important yet or is no longer relevant when it is present. Elements that have the hidden attribute specified shouldn't be displayed by browsers.Another application of the hidden attribute is to prevent a user from viewing an element until a different requirement has been satisfied.
Syntax
<p hidden> ??? </p>
Following are the examples?
Example
We are using the hidden attribute to hide the element of the html script that is not relevant.
<!DOCTYPE html> <html> <body> <h2>Heading</h2> <p>This is a demo paragraph and visible.</p> <p hidden>This is a demo paragraph and hidden.</p> </body> </html>
Output
The output achieved after executing the above script is ?
Example
In the following example we are using hidden attribute to specify that the element is not relevant.
<!DOCTYPE html> <html> <body> <p hidden>A laptop, laptop computer, or notebook computer is a small, portable personal computer with a screen and alphanumeric keyboard.</p> <p>A laptop is a personal computer that can be easily moved and used in a variety of locations.</p> </body> </html>
Output
On executing the above script, the text which was written inside the hidden will be revealed and the remaining text will be displayed .
Example: Hiding Content in Forms
The irrelevant information can also be hidden in the forms using the hidden attribute. However, the syntax is slightly different ?
Syntax
<input type = "hidden">
Let us look at a form created to apply for a job post where there are three input spaces: to enter name, a question asked by the hiring manager and the salary provisions. However, the salary provision is hidden as it is irrelevant in the job application form.
<form> <div> <label for="title">Enter Name:</label> <input type="text" id="title" name="title" value="My Name"> </div> <div> <label for="content">Why should we hire you? Write in 300 words:</label> <textarea id="content" name="content" cols="60" rows="5"> Some Content Here. </textarea> </div> <div> <label for="text"> Salary (Is hidden):</label> <input type="hidden" id="text" name="text" value="Hidden Content"> </div> <div> <button type="submit">Update post</button> </div> <input type="hidden" id="postId" name="postId" value="34657"> </form>
Output
The output obtained after executing the script above is;
174 Views
