Maison > interface Web > tutoriel CSS > le corps du texte

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

    et
  • , chaque
  • L'étiquette
Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal