Bagaimana untuk menetapkan butang dalam html

Dalam reka bentuk web, butang adalah elemen yang sangat penting yang membolehkan pengguna berinteraksi dengan tapak web. HTML menyediakan pelbagai cara untuk menetapkan butang, beberapa daripadanya diperkenalkan di bawah.

1. Buat butang menggunakan tag butang

Butang boleh dibuat melalui elemen <button></button> dalam HTML. Contohnya:

<button>点击我</button>

Dalam kod di atas, elemen <button></button> ialah elemen yang mengandungi butang dan 点击我 ialah teks butang.

2. Tetapkan jenis butang

<button></button> Terdapat tiga jenis elemen: submit, reset dan button. Digunakan untuk menyerahkan borang, menetapkan semula borang dan melaksanakan beberapa operasi tersuai masing-masing.

<input>
<input>
<button>自定义操作</button>

• Dengan menetapkan type="submit", anda boleh menggunakan butang sebagai butang hantar borang Apabila pengguna mengklik butang, data borang akan diserahkan kepada pelayan.
• Dengan menetapkan type="reset", anda boleh menggunakan butang sebagai butang set semula untuk borang Apabila pengguna mengklik butang, semua elemen input dalam borang akan ditetapkan semula kepada nilai lalainya.
• Dengan menetapkan type="button", butang boleh digunakan untuk melakukan beberapa tindakan tersuai, seperti membuka kotak pop timbul atau melaksanakan kod JavaScript.

3. Tetapkan teks butang dan nilai

Butang boleh menetapkan nilai teksnya melalui atribut value.

<button>按钮文本</button>

Dalam kod di atas, value="点击我" menetapkan nilai sebenar butang dan 按钮文本 menetapkan teks butang.

4. Tetapkan gaya butang

Gaya butang boleh ditetapkan melalui CSS. Anda boleh menggunakan atribut style atau mentakrifkan gaya dalam fail CSS luaran.

<button>红色按钮</button>

Dalam kod di atas, warna latar belakang butang ditetapkan kepada merah dan warna teks ditetapkan kepada putih.

5. Gunakan imej sebagai butang

Selain menggunakan teks sebagai butang, anda juga boleh menggunakan imej sebagai butang.

<button>
    <img  src="/static/imghwm/default1.png" data-src="button.png" class="lazy" alt="Bagaimana untuk menetapkan butang dalam html" >
</button>

Dalam kod di atas, elemen <img alt="Bagaimana untuk menetapkan butang dalam html" > mengandungi lokasi dan perihalan imej sebagai kandungan butang.

6. Tetapkan saiz butang

Saiz butang boleh ditetapkan melalui atribut style atau CSS. Contohnya:

<button>大按钮</button>
<button>小按钮</button>

Tetapkan saiz butang dengan menetapkan atribut font-size.

Ringkasan

HTML menyediakan pelbagai kaedah untuk menetapkan butang, termasuk mencipta elemen butang, menetapkan jenis butang, teks dan nilai, gaya dan menggunakan imej sebagai butang, dsb. Penggunaan kaedah ini dengan betul boleh menjadikan tapak web lebih interaktif dan meningkatkan pengalaman pengendalian pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan butang dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!