HTML Learning-element hide/show and input hide

Source: Internet
Author: User

Element hiding

In HTML we often need to hide some elements, sometimes we need to temporarily hide the page, let other elements display, to complete the operation. Sometimes some information we need to pass to JS, but do not want to give users to see, so it will be hidden.

Display/visibility method

There are two methods in HTML that can hide elements.

First, the HTML code, and then the operation.

    • HTML code
<! DOCTYPE html>    <head>        <title>Aliens</title>        <script src="./js/jquery-2.1.1.js"></script>    </head>    <body>        <form>            <label for ="FirstName" id="FirstName">First Name:</label>            <input type="text" id="Firstinput" name=" FirstName "></input><br/>        </form>        <button id="Submit" value="submit-btn">Submit</button>    </body></html>

The above code is simple, which is a label input submit button total of four elements.

    • Display code
<style>    #firstname{        display: none;    }</style>

This is the code that lets the element with ID firstname be hidden.
is not very simple. There is one more way:

    • Visibility method
<style>    #firstname{        visibility: hidden;        /*visibility: visible; 这个是显示的代码*/    }</style>

This also hides.

The difference between the two methods

The first display method is to hide it a bit more thoroughly. This means that the hidden elements do not occupy space on the page. The elements of the layout are moved in turn to use all the space occupied by the previous element.

The second kind is just not visible. But the position on the page is still its own and will not be used by other elements.

Both of these methods can be selected by the jquery selector

The Hide () and show () of jquery

This is quite simple.
Look at the code below

$(‘#firstname‘).hide();

This is to hide the element.
Similarly:

$(‘#firstname‘).show();

This will show the elements.

Interestingly, both of these functions have parameters.
Here's how to use it:

$(‘#firstname‘).hide(‘slow/400/fast‘function() {        //do something after hide           });

The first parameter is to select the hidden time slow / 400 / fast , and the second parameter is a callback function that tells the browser what the next action is to continue after the element is hidden.

Example:

$(‘#firstname‘).hide(‘400‘function() {        alert("I have been hidden");});

This will be OK.

INPUT element hidden

In fact, the method above can hide the input element, but input has an easier way.
The following code:

type="hide"value="val" id="inputid" />

That's enough!!
is not particularly simple, so when you just need a very simple information, hide it to use this.

HTML Learning-element hide/show and input hide

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.