Maison > Article > interface Web > Quelques bons exemples de codes pour les effets de formulaire sur le site Web
Quelques bons exemples de codes pour les effets de formulaire sur le site Web
- 伊谢尔伦original
- 2017-06-16 10:44:49981parcourir
Aujourd'hui, parlons du traitement détaillé et de l'expérience de la zone de saisie. En fait, il n'est pas difficile de créer une entrée entièrement compatible avec les normes CSS, FF/IE7/IE6 et d'autres navigateurs grand public et qui répond aux exigences. expérience utilisateur. Cliquez d’abord pour voir l’effet ci-dessous !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
font-size:63%;
color:#000;
}
/*input*/
.input_on{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_off{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
.input_move{
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #999;
background-color:#FFFFCC;
}
.input_out{
/*height:16px;默认高度*/
padding:2px 8px 0pt 3px;
height:18px;
border:1px solid #CCC;
background-color:#FFF;
}
/*form*/
ul.input_test{
margin:20px auto 0 auto;
width:500px;
list-style-type:none;
}
ul.input_test li{
width:500px;
height:22px;
margin-bottom:10px;
}
.input_test label{
float:left;
padding-right:10px;
width:100px;
line-height:22px;
text-align:right;
font-size:1.4em;
}
.input_test p{
float:left;
_margin-top:-1px;
}
.input_test span{
float:left;
padding-left:10px;
line-height:22px;
text-align:left;
font-size:1.2em;
color:#999;
}
</style>
</head>
<body>
<ul class="input_test">
<li>
<label for="inp_name">姓名：</label>
<p><input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
<span>请输入您的姓名</span>
</li>
<li>
<label for="inp_email">Email：</label>
<p><input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
<span>请输入您的Email</span>
</li>
<li>
<label for="inp_web">网站：</label>
<p><input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /></p>
<span>请输入您的网站</span>
</li>
</ul>
</body>
</html>La couleur de la saisie changera lorsque la souris passera dessus. De plus, lorsque vous cliquerez sur le titre (le rôle de 2e1cf0710519d5598b1f0f14c36ba674) ou la zone de saisie, la couleur du. la saisie où se trouve le curseur est également différente des autres zones de saisie. La différence est que c'est le rôle de JS dans d5fd7aea971a85678ba271703566ebfd. L'expérience utilisateur indique à l'utilisateur ce qui peut être saisi et où se trouve actuellement l'entrée. De plus, en basculant la touche Tab du clavier, il devient plus pratique de passer à la zone de saisie suivante après avoir saisi le contenu actuel. C'est le rôle de la structure de mise en page raisonnable de CSS.
La structure globale est organisée en ff6d136ddc5fdfeffaf53ff6ee95f185 et 25edfb22a4f469ecb59f1190150159c6, chaque 25edfb22a4f469ecb59f1190150159c6 L'étiquette 2e1cf0710519d5598b1f0f14c36ba674 affiche le titre, e388a4556c0f65e1904146cc1a846beeinput contrôle la zone de saisie et 45a2772a6b6107b401db3c9b82c049c2 Ici, je voudrais parler des différentes performances de d5fd7aea971a85678ba271703566ebfd dans différents navigateurs. La définition de la hauteur de ligne pour d5fd7aea971a85678ba271703566ebfd n'a aucun effet sur FF, il est donc recommandé d'utiliser un remplissage pour contrôler la position du texte dans le fichier. zone de saisie. d5fd7aea971a85678ba271703566ebfdLa hauteur par défaut sous le navigateur est de 16 px, ce qui est identique à la police. L'ajout de la bordure inférieure est de 18 px. Surtout lorsque le paramètre d5fd7aea971a85678ba271703566ebfd doit être agrandi, il est préférable d'utiliser un remplissage pour le contrôler.
Parlons de la partie JS Ici, les quatre attributs de la souris servent à contrôler les mouvements de la souris. Peu importe si vous ne connaissez pas JS, à condition de définir le style CSS correspondant.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!