html form hidden-Front-end Q&A-php.cn

html form hidden

WBOY

Release： 2023-05-15 16:05:07

Original

1346 people have browsed it

HTML forms are commonly used tools in web development, which allow users to enter data and submit it to the server. In the form, some information needs to be filled in and displayed by the user, while some information needs to be hidden. This article will introduce how to hide HTML forms.

Hide form elements

There is an element in the HTML form called "hidden element". Its function is to hide specified elements on the page without affecting the page layout. . A simple hidden element code is as follows:

<input type="hidden" name="id" value="123">

Copy after login

This code creates a hidden text input box, its name attribute is "id" and its value attribute is "123". When the user submits the form, the value of the hidden element is also submitted to the server.

Hide the entire form

Sometimes we need to hide the entire form, which can be achieved using CSS. For example, the following code hides the form on the page:

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
#myForm {
  display: none;
}
</style>

Copy after login

In the above code, the form is contained in a

element with the id "myForm". Then use CSS to hide the form, just set the display attribute to "none".

Hide a certain field of the form

If you only want to hide one or more fields in the form, you can use CSS to achieve this. For example, the following code hides the "password" text input box in the form:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<style>
input[name="password"] {
  display: none;
}
</style>

Copy after login

In the above code, we use the CSS attribute selector to select the input box whose name attribute is "password", and Set its display property to "none".

Hide a certain part of the form

Sometimes we need to divide the form into several parts, and then after the user fills out one part, hide that part and show the next part . This can be achieved using JavaScript. For example:

<form>
  <div id="part1">
    <input type="text" name="name">
    <input type="email" name="email">
    <button onclick="nextPart()">Next</button>
  </div>
  <div id="part2" style="display:none;">
    <input type="password" name="password">
    <button type="submit">Submit</button>
  </div>
</form>

<script>
function nextPart() {
  document.getElementById("part1").style.display = "none";
  document.getElementById("part2").style.display = "block";
}
</script>

Copy after login

In the above code, the form is divided into two parts, namely two

elements with IDs "part1" and "part2", where "part2" is initially set to "display:none;" to hide this section. When the user clicks the "Next" button, the nextPart() function will be called. This function sets the styles of "part1" and "part2" to "display:none;" and "display:block;" to hide them. and display.

Summary:

In Web development, some information in HTML forms needs to be hidden, which can be achieved using methods such as hidden elements, CSS and JavaScript. Developers can choose the appropriate method based on actual needs to achieve a better user experience.

The above is the detailed content of html form hidden. For more information, please follow other related articles on the PHP Chinese website!