- Trending Categories
- Data Structure
- Operating System
- C Programming
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify that an element is not yet relevant in HTML?
59 Lectures 8.5 hours
68 Lectures 8 hours
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.
<p hidden> ……… </p>
Following are the examples…
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>
The output achieved after executing the above script is −
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>
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 −
<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>
The output obtained after executing the script above is;
- How to specify that the element is read-only in HTML?
- How to specify whether the content of an element should be translated or not in HTML?
- How to specify a unique id for an element in HTML?
- How to specify that the form should not be validated when disabled in HTML?
- How to set whether an element is draggable or not in HTML?
- How to specify whether the element is to have its spelling and grammar checked or not in HTML?
- How to specify that the styles only apply to this element's parent element and that element's child elements in HTML?
- How to specify that an <input> element should be pre-selected when the page loads in HTML?
- How to specify which form element a calculation is bound to with HTML?
- How to specify that the element should automatically get focus when the page loads in HTML?
- How to specify that the element must be filled out before submitting the form in HTML?
- How to specify the type of box used for an HTML element using CSS?
- How to specify that an option should be pre-selected when the page loads in HTML?
- How to specify citation in HTML?
- Style every element that is not the specified element with CSS