communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > js tutoriel > js验证符合用户体验的网页表单特效_表单特效

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

WBOY

Libérer： 2016-05-16 18:59:50

original

776 Les gens l'ont consulté

<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需刷新才能执行]

Étiquettes associées：

js 用户体验验证

source：php.cn

Article précédent：JAVASCRIPT下判断IE与FF的比较简单的方式_javascript技巧 Article suivant：js数据向上翻滚_数据滚动_javascript技巧

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Qu'est-ce qu'une NullPointerException et comment y remédier ?

2024-10-22 09:46:29
De novice à codeur : votre voyage commence par les principes fondamentaux du C

2024-10-13 13:53:41
Débloquer le développement Web avec PHP : guide du débutant

2024-10-12 12:15:51
Démystifier C : un chemin clair et simple pour les nouveaux programmeurs

2024-10-11 22:47:31
Libérez votre potentiel de codage : programmation C pour les débutants absolus

2024-10-11 19:36:51
Libérez votre programmeur intérieur : C pour les débutants absolus

2024-10-11 15:50:41
Automatisez votre vie avec C : scripts et outils pour les débutants

2024-10-11 15:07:41
PHP Made Easy : vos premiers pas dans le développement Web

2024-10-11 14:21:21
Construisez n'importe quoi avec Python : un guide du débutant pour libérer votre créativité

2024-10-11 12:59:11
La clé du codage : libérer la puissance de Python pour les débutants

2024-10-11 12:17:31

Derniers numéros

Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...

Depuis 2024-04-06 19:54:23

0

1

444

Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...

Depuis 2024-04-06 18:16:26

0

1

403

Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...

Depuis 2024-04-06 15:49:33

0

1

319

Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...

Depuis 2024-04-06 13:17:44

0

1

493

Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...

Depuis 2024-04-06 11:05:31

0

1

417

Rubriques connexes

Plus>

Recommandations populaires

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours

Derniers téléchargements

Plus>

effets Web

Code source du site Web

Matériel du site Web

Modèle frontal