masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > js验证符合用户体验的网页表单特效_表单特效

js验证符合用户体验的网页表单特效_表单特效

WBOY

Lepaskan： 2016-05-16 18:59:50

asal

776 orang telah melayarinya

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>JS+CSS实现的一种交互体验</title> 
<style> 
@charset "utf-8"; 
/*元素初始值*/ 
html {background: #FFF;} 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;} 
p{cursor: text;} 
h1,h2,h3,h4,h5,h6{font-size:100%;} 
ol,ul{list-style-type: none;} 
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} 
table{border-collapse:collapse;} 
fieldset,img{border:0;} 
img{display:block;} 
caption,th{text-align:left;} 
body{position: relative;font-size:62.5%;font-family: "宋体"} 
a{text-decoration: none;} 
/*demo所用元素值*/ 
#need {margin: 20px auto 0;width: 610px;} 
#need li {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;} 
#need li:hover,#need li.hover {background: #FFE8E8;} 
#need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;} 
#need label {padding-left: 30px;} 
#need label.old_password {background-position: 0 -277px;} 
#need label.new_password {background-position: 0 -1576px;} 
#need label.rePassword {background-position: 0 -1638px;} 
#need label.email {background-position: 0 -429px;} 
#need dfn {display: none;} 
#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;} 
</style> 
<script type="text/javascript"> 
function suckerfish(type, tag, parentId) { 
if (window.attachEvent) { 
window.attachEvent("onload", function() { 
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); 
type(sfEls); 
}); 
} 
} 
hover = function(sfEls) { 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i].onmouseover=function() { 
this.className+=" hover"; 
} 
sfEls[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" hover\\b"), ""); 
} 
} 
} 
suckerfish(hover, "li"); 
</script> 
 
 
<ol id="need"> 
<li>
<label class="old_password">原始密码：</label> <input name="" type="password" id="">
</li> 
<li>
<label class="new_password">新的密码：</label> <input name="" type="password" id=""><dfn>（密码长度为6~20字节。不想修改请留空）</dfn>
</li> 
<li>
<label class="rePassword">重复密码：</label> <input name="" type="password" id="">
</li> 
<li>
<label class="email">邮箱设置：</label> <input name="" type="text" id=""><dfn>（Codemoz! 承诺绝不会给您发送任何垃圾邮件。）</dfn>
</li> 
</ol>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

js 用户体验验证

sumber：php.cn

Artikel sebelumnya：JAVASCRIPT下判断IE与FF的比较简单的方式_javascript技巧 Artikel seterusnya：js数据向上翻滚_数据滚动_javascript技巧

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

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...

daripada 2024-04-06 19:54:23

0

1

444

Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...

daripada 2024-04-06 18:16:26

0

1

403

Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...

daripada 2024-04-06 15:49:33

0

1

319

Patutkah kita menggunakan SSG untuk menggunakan papan pemuka yang dibuat dengan Nuxt.js? Kami akan membangunkan papan pemuka untuk kegunaan dalaman menggunakan Nuxt.js. Memandangk...

daripada 2024-04-06 13:17:44

0

1

493

Elektron mendapat AppData pada pramuat Bagaimana untuk mendapatkan direktori AppData yang dipramuat? Background.js[...]asyncfunct...

daripada 2024-04-06 11:05:31

0

1

417

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan