Quelques bons exemples de codes pour les effets de formulaire sur le site Web-tutoriel CSS-php.cn

Quelques bons exemples de codes pour les effets de formulaire sur le site Web

伊谢尔伦

Libérer： 2017-06-16 10:44:49

original

1015 Les gens l'ont consulté

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=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></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=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></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=&#39;input_on&#39;;this.onmouseout=&#39;&#39;" onblur="this.className=&#39;input_off&#39;;this.onmouseout=function(){this.className=&#39;input_out&#39;};" onmousemove="this.className=&#39;input_move&#39;" onmouseout="this.className=&#39;input_out&#39;" /></p>
<span>请输入您的网站</span>
</li>
</ul>
</body>
</html>

Copier après la connexion

La couleur de la saisie changera lorsque la souris passera dessus. De plus, lorsque vous cliquerez sur le titre (le rôle de ) 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 . 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

, chaque
L'étiquette affiche le titre,
input contrôle la zone de saisie et Ici, je voudrais parler des différentes performances de dans différents navigateurs. La définition de la hauteur de ligne pour 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. La 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 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!