Contoh terperinci penggunaan css untuk mencantikkan kawalan borang html (pengindahan borang)_HTML/Xhtml_pengeluaran halaman web

1. Struktur sintaks asas bagi butang hantar html dan bawah

1. html butang hantar

Tetapkan jenis="serahkan" dalam teg input untuk menetapkan kawalan borang ini sebagai butang.

Serahkan kod butang:

Salin kod

Kod tersebut adalah seperti berikut:

< input name="" type="submit" value="Submit" />

Tangkapan skrin kesan butang hantar html

2. Butang bawah html

Tetapkan jenis="bawah" dalam teg input untuk menetapkan kawalan borang ini sebagai butang.

Kod butang bawah:

Salin kod

Kod tersebut adalah seperti berikut: < nama input="" type="button" value="Serah" />

tangkapan skrin butang bawah:

Tangkapan skrin kesan butang butang html

2. Perbezaan antara butang hantar html dan bawah

type=button hanyalah fungsi butang

type=submit adalah untuk menghantar borang

Tetapi mereka yang terlibat dalam UI WEB harus ambil perhatian bahawa menggunakan serah boleh meningkatkan kebolehgunaan halaman:

Selepas menggunakan serah, halaman menyokong operasi kekunci masukkan papan kekunci, tetapi ramai pereka perisian WEB mungkin tidak menyedari bahawa penyerahan disatukan.

Selepas menggunakan butang, halaman selalunya tidak menyokong kekunci masukkan. Oleh itu, jika anda perlu menyokong kekunci masukkan, anda mesti menyediakan penyerahan Secara lalai, kekunci masukkan beroperasi pada penyerahan pertama pada halaman.

Salin kod

Kod adalah seperti berikut:

Selepas melaksanakan onClick, pergi ke tindakan. Boleh diserahkan secara automatik tanpa onClick. Jadi onclick tidak diperlukan di sini.

Salin kod

Kod adalah seperti berikut:

Selepas onClick dilaksanakan, fail lompat dikawal dalam fail js. Hantar memerlukan onClick.

Contohnya:

1, onclick="form1.action='a.jsp';form1.submit();" Ini merealisasikan fungsi hantar. < nama borang="form1" method="post" action="http://www.css.com">

Tangkapan skrin butang

3. Butang kod HTML

Salin kod


Kodnya adalah seperti berikut:

< ;input type="button" name="Button" value="Button" onClick="javascript:windows.location.href="your url""> 3. HTML submit dan butang bawah mencantikkan reka letak css p

Pertama sekali, kami menyediakan imej butang untuk pengindahan butang, dan menambah gaya kelas pada penyerahan input atau kawalan butang bawah, tetapkan latar belakang butang kepada imej pengindahan, dan tetapkan jidar kepada sifar, lebar dan tinggi.

1. Cantikkan butang bawah html

1), bahan gambar

Anda boleh menyimpan imej untuk digunakan

Mencantikkan bahan butang gambar

2), sepadan dengan kod sumber HTML lengkap:

Salin kod

Kod tersebut adalah seperti berikut:

butang按钮美化在线演示.com&🎜 >

http://www.css.com/"target="_blank">

onmouseout="this.style.backgroundPosition='lefttop'"/>

< /form>

3）、bawah效果截图

bawah美化效果截图

2、对html serahkan按钮美化

1）、图片素材

可将图片另存为使用

按钮图片素材 鼠标右键另存为使用

2）、对应完整HTML源代码：

复制代码

复制代码


复制代码


厜>

🎜



serahkan按钮美化 在线演示-www.css.com


html { lebar:100%; ketinggian:100%; }
badan { latar belakang:#fff; saiz fon:18px; font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
line-height:18px; padding:0; margin:0; text-align:center; }
div { padding:18px }
img { border:0px; vertical-align:middle; padding:0px; margin:0px; }
input, butang { font-family:"Arial", "Tahoma", "微软雅黑", "雅黑"; sempadan:0;
vertical-align:middle; jidar:8px; ketinggian baris: 18px; saiz fon:18px }
.btns { width:143px; ketinggian:40px; background:url("bg11.jpg") tiada ulangan kiri atas; warna:#FFF; }

http://www.css. com/" target="_blank">

onmouseout="this.style.backgroundPosition='left top'" value= "提交" />

3）、serahkan按钮效果截图 html serahkan美化后效果截图