suchen

Heim  >  Artikel  >  Web-Frontend  >  Einige gute Beispielcodes für Formulareffekte auf der Website

Einige gute Beispielcodes für Formulareffekte auf der Website

伊谢尔伦
伊谢尔伦Original
2017-06-16 10:44:491018Durchsuche

Lassen Sie uns heute über die detaillierte Verarbeitung und Erfahrung des Eingabefelds sprechen. Tatsächlich ist es nicht schwierig, eine Eingabe zu erstellen, die vollständig mit CSS-Standards, FF/IE7/IE6 und anderen gängigen Browsern kompatibel ist Benutzererfahrung. Klicken Sie zuerst, um den Effekt unten zu sehen! 

<!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>

Die Farbe der Eingabe ändert sich, wenn die Maus darüber fährt. Wenn Sie außerdem auf den Titel (die Rolle von f89202aadfdc730f5299cc0f6e4b6446) oder das Eingabefeld klicken, ändert sich die Farbe der Die Eingabe, in der der Cursor bleibt, unterscheidet sich auch von anderen Eingabefeldern. Der Unterschied besteht darin, dass dies die Rolle von JS in 7a7276301a860ea402f6bdc1f67f4471 ist. Die User Experience sagt dem Benutzer, was eingegeben werden kann und wo sich die Eingabe gerade befindet. Darüber hinaus wird es durch das Umschalten der Tabulatortaste auf der Tastatur bequemer, nach der Eingabe des aktuellen Inhalts zum nächsten Eingabefeld zu wechseln. Dies ist die Rolle der angemessenen Layoutstruktur von CSS.
    
Die Gesamtstruktur ist durch ff6d136ddc5fdfeffaf53ff6ee95f185 organisiert, jedes 25edfb22a4f469ecb59f1190150159c6 zeigt eine Zeile mit Inhalt an. Das Label 2e1cf0710519d5598b1f0f14c36ba674 zeigt den Titel an, e388a4556c0f65e1904146cc1a846beeinput steuert das Eingabefeld und 45a2772a6b6107b401db3c9b82c049c2 Hier möchte ich auf die unterschiedliche Leistung von d5fd7aea971a85678ba271703566ebfd in verschiedenen Browsern eingehen. Das Festlegen der Zeilenhöhe für d5fd7aea971a85678ba271703566ebfd hat keine Auswirkung auf FF Eingabefeld. 7a7276301a860ea402f6bdc1f67f4471Die Standardhöhe unter dem Browser beträgt 16 Pixel, was der Schriftart entspricht. Der untere Rand beträgt 18 Pixel. Insbesondere wenn die 7a7276301a860ea402f6bdc1f67f4471 größer gemacht werden muss, ist es besser, die Polsterung zu verwenden, um sie zu steuern.
Lassen Sie uns über den JS-Teil sprechen. Hier werden die vier Attribute der Maus verwendet, um die Mausbewegungen zu steuern. Es spielt keine Rolle, ob Sie JS nicht kennen, solange Sie den entsprechenden CSS-Stil definieren.

Das obige ist der detaillierte Inhalt vonEinige gute Beispielcodes für Formulareffekte auf der Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：10 empfohlene Artikel zur fortgeschrittenen GrammatikNächster Artikel：10 empfohlene Artikel zur fortgeschrittenen Grammatik

In Verbindung stehende Artikel

Mehr sehen