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

dengan ID "part1" dan "part2", di mana "part2" pada mulanya ditetapkan kepada "display :none;" untuk menyembunyikan bahagian ini. Apabila pengguna mengklik butang "Next", fungsi nextPart() akan dipanggil fungsi ini menetapkan gaya "part1" dan "part2" kepada "display:none;" dan "display:block;" dan paparan.

Ringkasan:

Dalam pembangunan web, beberapa maklumat dalam bentuk HTML perlu disembunyikan, yang boleh dicapai menggunakan kaedah seperti elemen tersembunyi, CSS dan JavaScript. Pembangun boleh memilih kaedah yang sesuai berdasarkan keperluan sebenar untuk mencapai pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci borang html tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn