Bagaimana untuk menambah nilai elemen HTML?-html tutorial-php.cn

Bagaimana untuk menambah nilai elemen HTML?

WBOY

Lepaskan： 2023-09-16 08:41:06

ke hadapan

1166 orang telah melayarinya

Bagaimana untuk menambah nilai elemen HTML?

Artikel ini akan mengajar anda cara menambah nilai elemen dalam HTML. Kami mempunyai pemahaman asas tentang atribut nilai dalam HTML dan situasi di mana ia digunakan. Mari kita nantikan pemahaman yang lebih baik tentang atribut nilai HTML.

Dalam HTML, atribut nilai digunakan untuk menerangkan nilai elemen yang digunakan dengannya. Ia mempunyai makna yang berbeza untuk pelbagai komponen HTML. Penggunaan - Ia boleh digunakan dengan elemen ,

Ia mempunyai makna yang berbeza untuk pelbagai jenis input:

Ia menentukan teks pada butang apabila ia muncul dalam "butang," "set semula," dan "serahkan".
Ia menentukan nilai awal medan input apabila ia muncul dalam nilai "teks", "kata laluan" dan "tersembunyi".
Apabila "kotak semak", "radio" dan "gambar" hadir, ia mewakili nilai yang dikaitkan dengan input.

HTML

Butang boleh klik ditakrifkan dalam HTML dengan teg Kandungan dihantar menggunakan teg teg boleh mengandungi maklumat grafik dan teks. Pelayar yang berbeza menggunakan jenis lalai yang berbeza untuk memaparkan "butang".

Contoh

Dalam contoh di bawah, kami telah mencipta dua teg satu digunakan sebagai butang tema HTML dan satu lagi sebagai butang tema JAVA

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      Choose The Subject:
      <button name="subject" type="submit" value="HTML">HTML</button>
      <button name="subject" type="submit" value="java">JAVA</button>
   </form>
</body>
</html>

Salin selepas log masuk

HTML Tag

Teg

menentukan medan untuk data input pengguna. Elemen bentuk yang paling penting ialah elemen Elemen boleh dipaparkan dalam pelbagai cara, bergantung pada atribut jenis.

Contoh

Pertimbangkan contoh berikut di mana kami menggunakan borang HTML dengan nilai lalai

<!DOCTYPE html>
<html>
<body>
   <form action="#">
      <label for="firstname">FIRST NAME:</label>
      <input type="text" id="firstname" name="firstname" value="TUTORIALS"><br><br>
      <label for="lastname">LAST NAME:</label>
      <input type="text" id="lastname" name="lastname" value="POINT"><br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

Salin selepas log masuk

Apabila anda menjalankan skrip di atas, ia akan menjana output yang merangkumi medan input menggunakan atribut nilai untuk memaparkan nilai lalai nama pertama dan akhir serta butang hantar pada halaman web.

Elemen HTML

Item senarai ditakrifkan menggunakan teg

. Senarai tersusun, senarai tidak tersusun dan senarai menu semuanya menggunakan teg

. Item senarai biasanya dipaparkan dengan titik peluru dalam

. Senarai item dalam

Contoh

Pertimbangkan contoh berikut di mana kami menggunakan atribut nilai dalam senarai tersusun.

<!DOCTYPE html>
<html>
<body>
   <ol>
      <li value="100">THAR</li>
      <li>BMW</li>
      <li>DUCATI</li>
      <li>BENZ</li>
      <li>TERRANO</li>
      <li>CIAZ</li>
   </ol>
</body>
</html>

Salin selepas log masuk

Selepas menjalankan skrip di atas, tetingkap output akan muncul menunjukkan senarai tertib kereta berbeza yang digunakan dalam skrip, bermula dengan nombor 100, kerana kami telah menyebut nilai="100" pada halaman web.

Gunakan skrip

Dalam contoh di bawah, kami menjalankan skrip untuk menukar nilai medan teks.

Contoh

<!DOCTYPE html>
<html>
<body>
   Name: <input type="text" id="mytutorial" value="THOR">
   <p>Click To Change Value </p>
   <button onclick="mytutorial1()">Click</button>
   <script>
      function mytutorial1() {
         document.getElementById("mytutorial").value = "BLACK WIDOW";
      }
   </script>
</body>
</html>

Salin selepas log masuk

Apabila skrip dijalankan, ia akan menghasilkan output yang mengandungi medan input dengan nilai "thor" dan butang klik. Apabila pengguna mengklik butang, acara dicetuskan dan menukar nilai input pada halaman web = "blackwidow".

Atas ialah kandungan terperinci Bagaimana untuk menambah nilai elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!