borang html tersembunyi

Borang HTML ialah alat yang biasa digunakan dalam pembangunan web, yang membolehkan pengguna memasukkan data dan menyerahkannya ke pelayan. Dalam borang tersebut, beberapa maklumat perlu diisi dan dipaparkan oleh pengguna, manakala beberapa maklumat perlu disembunyikan. Artikel ini akan memperkenalkan cara menyembunyikan borang HTML.

1. Sembunyikan elemen borang

Terdapat elemen dalam bentuk HTML yang dipanggil "elemen tersembunyi", fungsinya adalah untuk menyembunyikan elemen tertentu pada halaman tanpa menjejaskan reka letak halaman . Kod elemen tersembunyi yang ringkas adalah seperti berikut:

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

Kod ini mencipta kotak input teks tersembunyi dengan atribut nama "id" dan atribut nilai "123". Apabila pengguna menyerahkan borang, nilai elemen tersembunyi juga diserahkan kepada pelayan.

2. Sembunyikan keseluruhan borang

Kadangkala kita perlu menyembunyikan keseluruhan borang, yang boleh dicapai menggunakan CSS. Sebagai contoh, kod berikut menyembunyikan borang pada halaman:

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

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

Dalam kod di atas, borang terkandung dalam elemen dengan id "myForm". Kemudian gunakan CSS untuk menyembunyikan borang, cuma tetapkan atribut paparan kepada "tiada".

3. Sembunyikan medan dalam borang

Jika anda hanya mahu menyembunyikan satu atau lebih medan dalam borang, anda boleh menggunakan CSS untuk mencapainya. Sebagai contoh, kod berikut menyembunyikan kotak input teks "kata laluan" dalam bentuk:

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

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

Dalam kod di atas, kami menggunakan pemilih atribut CSS untuk memilih kotak input yang atribut namanya ialah "kata laluan", dan Tetapkan sifat paparannya kepada "tiada".

4. Sembunyikan bahagian tertentu borang

Kadangkala kita perlu membahagikan borang kepada beberapa bahagian, dan kemudian selepas pengguna mengisi satu bahagian, sembunyikan bahagian itu dan tunjukkan bahagian seterusnya. Ini boleh dicapai menggunakan JavaScript. Contohnya:

<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>

Dalam kod di atas, borang dibahagikan kepada dua bahagian, iaitu dua