Gestalten eines eleganten Anmeldeformulars mit CSS3

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Lassen Sie uns ein minimales und elegantes Anmeldeformular mit grundlegendem HTML5 erstellen und es dann mit einigen CSS3-Techniken verbessern. Zeit, einige einfache Elemente in etwas Schönes zu verwandeln.

Auf der Suche nach einer Verknüpfung?

Wenn Sie schöne CSS3-Formulare für Ihre Site wünschen und diese nicht selbst erstellen möchten, können Sie mit dem CSS3-Formularpack auf Envato Market nichts falsch machen. Für nur 5$ erhalten Sie:

33 Login-Formularstile
66 Suchformularstile
12 Kontaktformular-Stile
ein allgemeines Formular mit Stilen für Textfeld, Textbereich, Optionsfeld, Kontrollkästchen, Auswahlfeld
verschiedene Farbstile für jede Form

Kein Wunder, dass es eines der meistverkauften CSS3-Formularelemente auf dem Envato Market ist.

CSS3 Form Pack on Envato Market — CSS3-Formularpack auf Envato Market

Einführung

Webformulare sind ein wesentlicher Bestandteil des Designs einer Website. Was auch immer der Zweck ist, Formulare sollen Benutzern eine einfache Möglichkeit bieten, Werte einzugeben und Daten zu übermitteln. Mit HTML5 und CSS3 können wir Formulare erstellen, die sowohl intuitiv zu bedienen als auch optisch ansprechend sind.

Das Design

Ich glaube, dass Webdesign sauber und effizient sein sollte. Das Formulardesign, das wir codieren werden, folgt diesen Prinzipien und umfasst nur drei Elemente: eine Benutzernameneingabe, eine Passworteingabe und eine Übermittlungseingabe. Da das Markup so einfach ist, bietet es mehr Flexibilität, wenn wir es in HTML und CSS codieren.

Hier sind einige Elemente im Design, die wir bei der Codierung beachten müssen:

Farbverläufe
Innere Schatten
Grenzen mit Opazität
Textschatten
Platzhaltertext

Die meisten Elemente sind CSS-Styling, aber wir werden uns auch das placeholder-Attribut ansehen, da es unseren Benutzern vorschlägt, welche Art von Daten sie eingeben sollten.

Schritt 1: Basis-HTML- und CSS-Struktur

Beginnen wir mit der Erstellung einer sauberen HTML5-Vorlage mit einem Formular und drei Eingaben:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
</head>

<body>
	<form>
		<input type="text" name="username">
		<input type="password" name="password">
		<input type="submit" value="Log In">
	</form>
</body>
	
</html>

Im Moment haben wir nichts Besonderes, nur ein Formular, drei Eingaben und ein leeres Dokument. Lassen Sie uns eine CSS-Datei namens style.css erstellen und mit unserer HTML-Seite verknüpfen:

1	<link rel="stylesheet" type="text/css" href="style.css" />

Denken Sie daran, dass sich die CSS-Datei derzeit in unserem Hauptverzeichnis befindet; Stellen Sie sicher, dass Sie den richtigen Pfad verwenden, wenn Sie Ihre CSS-Datei in einem anderen Ordner ablegen, z. B. im Ordner "css".

Bevor wir der CSS-Datei unser eigenes Styling hinzufügen, ist es immer eine gute Übung, bei Null anzufangen. Wir beginnen unsere Stile mit Eric Meyers CSS Reset, das das Standard-Styling entfernt und es uns ermöglicht, unsere Regeln in jedem Browser vom gleichen Punkt aus zu erstellen.

Beginnen wir mit der Definition einer Schriftart und eines Hintergrundverlaufs für unsere Anmeldeseite. Fügen Sie diesen Code nach dem CSS-Reset ein:

body {
	font-family: sans-serif;
	
	background-color: #323B55;
	background-image: -webkit-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -moz-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -o-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -ms-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: linear-gradient(bottom, #323B55 0%, #424F71 100%);
}

Nachdem wir diesen Code hinzugefügt haben, sollte unsere Seite jetzt einen coolen Hintergrund mit linearem Farbverlauf haben. Der Farbverlauf beginnt am unteren Rand der Seite (0%), wo die Farbe #323B55 ist, und endet am oberen Rand der Seite (100%), wo die Farbe #424F71 ist. Nur für den Fall, dass die Seite in einem Browser angezeigt wird, der keine Farbverläufe unterstützt, ist es wichtig, eine background-color anzugeben, die ich auf die gleiche Farbe wie den Farbverlauf bei 0% setze. Das Tolle an CSS3-Verläufen ist, dass Sie viele „Stopps“ hinzufügen können, zum Beispiel eine weitere Farbänderung bei 25%. Das letzte, was ich im body-Tag hinzufügen muss, ist die font-family, ich habe mich für die Sans Serif-Schrift entschieden.

Jetzt, da wir unsere Grundlage haben, ist es an der Zeit, etwas mehr Styling hinzuzufügen!

Schritt 2: Styling des Anmeldeformulars

Bevor wir mit dem CSS-Styling für das Anmeldeformular beginnen, müssen wir unserem HTML-Dokument einige Dinge hinzufügen. Beginnen Sie zunächst damit, dem Formular eine id hinzuzufügen, wir nennen es 'slick-login'. Fügen Sie als Nächstes in jedem der Eingabe-Tags ein placeholder-Attribut hinzu. So sollte die HTML-Seite bisher aussehen:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<form id="slick-login">
		<input type="text" name="username" placeholder="me@tutsplus.com">
		<input type="password" name="password" placeholder="password">
		<input type="submit" value="Log In">
	</form>
</body>

</html>

Das HTML5-Eingabeplatzhalter-Attribut ist eine großartige Ergänzung zu Eingabe-Tags. Anstatt einen Eingabewert zu haben, den der Benutzer ersetzen muss, ermöglicht uns das placeholder-Attribut, Hilfetext anzuzeigen und ihn verschwinden zu lassen, sobald der Benutzer mit der Eingabe in das Feld beginnt. Es wird noch nicht allgemein unterstützt und sollte daher mit Vorsicht verwendet werden. Angenommen, das placeholder-Attribut funktioniert in einem Browser nicht, der Benutzer weiß nicht, welche Werte er eingeben muss. Später werden wir eine Fallback-Technik behandeln, aber es ist auch nichts wert, dass Platzhaltertext ein Vorschlag sein sollte, anstatt die Eingabe zu beschriften.

Nachdem wir nun unsere aktualisierte HTML-Seite haben, können wir damit beginnen, den Anmeldeformularen einige Stile hinzuzufügen. Hier ist das CSS für unsere Formular-id, die wir zuvor deklariert haben.

#slick-login {
	width: 220px;
	height: 155px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;
}

Für dieses Login-Formular habe ich mich entschieden, es perfekt (horizontal und vertikal) in der Mitte der Seite auszurichten. Es ist ziemlich einfach, solche Elemente zu platzieren. Wie Sie aus dem obigen Code sehen können, positionieren Sie das Element 50% von oben und links und schieben Sie dann das Element mithilfe der Randwerte um die Hälfte der Breite und Höhe zurück. Dies ist eine großartige Methode, um Elemente in der Mitte der Seite auszurichten, aber in Bezug auf die Flexibilität ist sie nicht so groß. Wenn Sie beispielsweise Elemente duplizieren möchten, müssen Sie die Werte für Breite, Höhe und Rand ändern, damit das Element ausgerichtet bleibt. Obwohl ich das Formular in der Mitte der Seite ausgerichtet habe, können Sie den Code nach Belieben ändern!

Nachdem wir unser Formular ausgerichtet haben, ist es an der Zeit, die Eingaben zu gestalten!

Schritt 3: Styling der Eingänge

Jetzt kommen wir wirklich zu den lustigen Dingen. Beginnen wir mit dem Hinzufügen des CSS für die Text- und Passworteingaben:

#slick-login input[type="text"],#slick-login input[type="password"] {
	width: 100%;
	height: 40px;
	positon: relative;
	margin-top: 7px;
	font-size: 14px;
	color: #444;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	padding-left: 20px;
	
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-color: #fff;
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);

	-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
	box-shadow: inset 0px 2px 0px #d9d9d9;

}

#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
	-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
	box-shadow: inset 0px 2px 0px #a7a7a7;
}

#slick-login input:first-child {
	margin-top: 0px;
}

Denken Sie daran, unser Ziel ist es, das Formular flexibel zu gestalten. Anstatt eine feste Eingabebreite zu deklarieren, habe ich mich entschieden, die Breite relativ zur Breite des Formulars zu machen. Auf diese Weise ändern sich alle Eingaben entsprechend, wenn wir uns entschieden haben, die Breite des Formulars zu ändern.

Da wir für alle Eingaben einen margin-top-Wert deklariert haben, müssen wir einen first-child-Selektor hinzufügen und sicherstellen, dass der margin-top der ersten Eingabe auf Null gesetzt ist. Auf diese Weise wird der erste Eingabewert immer oben im Formular positioniert.

Denken Sie auch daran, die Eigenschaft outline auf none zu setzen, damit der Browser unseren Eingaben keine unerwünschten Umrisse hinzufügt.

Transparente Grenzen

Um das Formular flexibler zu gestalten, fügen wir einen transparenten Rahmen hinzu, sodass sich das Formular unabhängig vom Hintergrund der Website daran ändert. Da das opacity-Attribut die Deckkraft des gesamten Elements ändert, habe ich mich entschieden, nach einer Methode zu suchen, um nur die Deckkraft des Rahmens zu ändern. Wenn Sie die Rahmenfarbe in rgba deklarieren, ist es möglich, einen Alpha-Wert hinzuzufügen. Wie Sie oben sehen können, ist unser Rahmen ein durchgehender schwarzer 1px-Rahmen, aber seine Deckkraft beträgt 47%.

Das Polsterproblem

In unserem Design wird der Text im Feld nach rechts verschoben. Um diesen Effekt in CSS zu erzielen, können wir einfach die Eigenschaft padding-left verwenden und sie auf 20px setzen. Beim Rendern des Codes tritt ein Problem auf. Der Padding-Wert fügt der Eingabebreite 20 Pixel hinzu, was nicht das ist, was wir möchten.

Um dies zu beheben, können wir eine background-clip-Eigenschaft hinzufügen und den Wert auf padding-box setzen. Dieser CSS-Schnipsel stellt sicher, dass das Padding die Breite der Eingabe nicht beeinflusst. Sie können mehr über die background-clip-Eigenschaft bei Mozilla erfahren.

Hinzufügen des inneren Schattens

Eine weitere sehr coole CSS3-Eigenschaft ist box-shadow. Die Verwendung des Einfügungsparameters ermöglicht es uns, einen inneren Schatten auf dem Eingabeelement zu erstellen. Mit der focus-Auswahl können wir die Werte und Farben einfach ändern, wenn der Benutzer auf das Feld klickt.

Schritt 4: Gestalten der Senden-Schaltfläche

Der Absenden-Button ist ein sehr wichtiger Teil eines Formulars, also heben wir ihn hervor! Hier ist das CSS, das wir für die Submit-Eingabe verwenden werden:

#slick-login input[type="submit"] {
	width: 100%;
	height: 50px;
	margin-top: 7px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0px -1px 0px #5b6ddc;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-color: #5466da;
	background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -moz-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -o-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -ms-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: linear-gradient(bottom, #5466da 0%, #768ee4 100%);

	cursor: pointer;
	
	-webkit-box-shadow: inset 0px 1px 0px #9ab1ec;
	box-shadow: inset 0px 1px 0px #9ab1ec;

}

#slick-login input[type="submit"]:hover {
	background-color: #5f73e9;
	background-image: -webkit-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -moz-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -o-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -ms-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: linear-gradient(bottom, #5f73e9 0%, #859bef 100%);

	-webkit-box-shadow: inset 0px 1px 0px #aab9f4;
	box-shadow: inset 0px 1px 0px #aab9f4;
	
	margin-top: 10px;
}

#slick-login input[type="submit"]:active {
	background-color: #7588e1;
	background-image: -webkit-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -moz-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -o-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -ms-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: linear-gradient(bottom, #7588e1 0%, #7184df 100%);

	-webkit-box-shadow: inset 0px 1px 0px #93a9e9;
	box-shadow: inset 0px 1px 0px #93a9e9;
}

Das CSS für unseren Senden-Button ist ziemlich einfach; Wir verwenden Ränder, Verläufe und innere Schatten, um die Schaltfläche hervorzuheben. Eine weitere CSS3-Eigenschaft, die wir uns ansehen werden, ist text-shadow.

Um den Schaltflächentext etwas stärker hervorzuheben, fügen wir einen 1px festen Schatten über dem Text hinzu. Mit einer dunkleren Farbe(#5b6ddc) können wir den weißen Text auf dem hellblauen Hintergrund hervorheben. Selbst der subtilste Effekt wie das Hinzufügen eines Textschattens kann Ihrem Design viel hinzufügen und Text hervorheben.

Ich ging voran und fügte den Code für die hover- und active Selektoren hinzu. Es wird lediglich die Farbe des Verlaufs und des inneren Schattens geändert. Beachten Sie, dass die Farbänderung eher subtil ist, aber sie trägt viel zum Design bei. Ich habe auch den Wert von margin-top im Hover-Zustand auf drei Pixel niedriger geändert. Die Veränderung fühlt sich natürlich an und trägt zur Eleganz der Form bei.

Bisher sieht alles super aus, aber wenn man mit der Maus darüber fährt und auf einige Elemente klickt, wirkt es etwas abgehackt. Zeit, etwas Animation hinzuzufügen!

Schritt 5: Hinzufügen von Übergängen zu Elementen

Damit die Dinge viel besser fließen, fügen wir unseren Eingaben diesen CSS-Code hinzu:

-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;

Mit einem schnellen und einfachen Übergang sehen alle unsere Elemente viel besser aus und fühlen sich viel besser an. Beachten Sie den Übergang der inneren Schattenfarbe bei den Texteingaben und die Animation der Schaltfläche zum Senden beim Schweben. die Übergänge lassen das Formular vollständig aussehen.

Obwohl alles gut aussieht, fügen wir noch ein paar Leckereien hinzu, bevor wir Feierabend machen.

Schritt 6: Etiketten hinzufügen

Um sicherzustellen, dass unser Formular richtig zugänglich ist, fügen Sie dieses Markup neben Ihren input-Tags hinzu:

1	<label for="username">username</label>
2	<label for="password">password</label>

Da wir unser Formular so einfach wie möglich gestalten möchten, haben wir uns für das placeholder-Attribut entschieden. Eine andere Möglichkeit, die auch hätte funktionieren können, wäre das Hinzufügen eines label-Tags. Da wir das Tag in unserem Design nicht benötigen, sondern für Barrierefreiheit und SEO-Zwecke, fügen wir diesen CSS-Code hinzu in:

1	#slick-login label {
2	display: none;
3	}

Wenn Sie die display-Eigenschaft auf none setzen, erhalten Sie das gewünschte Aussehen, das in diesem Fall überhaupt kein Aussehen ist!

Schritt 7: Cross-Browser-Kompatibilität

Kehren wir nun zu dem potenziellen Problem zurück, das wir mit dem placeholder-Attribut hätten. Angenommen, jemand betrachtet diese Website in einem Browser, der placeholder nicht unterstützt: Unsere leeren Eingaben wären ziemlich wenig hilfreich. Um dies zu beheben, verwenden wir jQuery und Modernizr, um Unterstützung zu erkennen und Situationen zu beheben, in denen keine vorhanden ist. Lassen Sie uns zunächst die Skripte mit unserer HTML-Seite verknüpfen.

Legen Sie die Skript-Tags im <head> Ihres HTML-Codes ab. Für eine optimale Leistung sollten Sie diese nach Ihren Stylesheet-Referenzen folgen lassen. Der Grund, warum wir empfehlen, Modernizr im Kopf zu platzieren, ist zweierlei: Der HTML5-Shiv (der HTML5-Elemente im IE aktiviert) muss vor dem <body> ausgeführt werden - Modernizr

1	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
2	<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

Erstellen Sie nun eine neue Javascript-Datei namens placeholder.js. Unique Method bietet eine großartige Möglichkeit, Modernizr zu verwenden, um einen Fallback für das placeholder-Attribut zu erstellen. Fügen Sie diesen Code in die Javascript-Datei ein:

$(function()
{
    // check placeholder browser support
    if (!Modernizr.input.placeholder)
    {
         // set placeholder values
        $(this).find('[placeholder]').each(function()
        {
            if ($(this).val() == '') // if field is empty
            {
                $(this).val( $(this).attr('placeholder') );
            }
        });
         // focus and blur of placeholders
        $('[placeholder]').focus(function()
        {
            if ($(this).val() == $(this).attr('placeholder'))
            {
                $(this).val('');
                $(this).removeClass('placeholder');
            }
        }).blur(function()
        {
            if ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))
            {
                $(this).val($(this).attr('placeholder'));
                $(this).addClass('placeholder');
            }
        });
         // remove placeholders on submit
        $('[placeholder]').closest('form').submit(function()
        {
            $(this).find('[placeholder]').each(function()
            {
                if ($(this).val() == $(this).attr('placeholder'))
                {
                    $(this).val('');
                }
            })
        });
     }
});

Wir werden auch die Javascript-Datei mit unserer HTML-Seite verknüpfen:

1	<script type="text/javascript" src="placeholder.js"></script>

Damit dies funktioniert, müssen wir den Feldeingaben eine placeholder-Klasse hinzufügen:

1	<input type="text" name="username" class="placeholder" placeholder="me@tutsplus.com">
2	<input type="password" name="password" class="placeholder" placeholder="password">

Fügen wir nun das Styling für die placeholder-Klasse in unserer CSS-Datei hinzu:

1	.placeholder {
2	color: #444;
3	}

Wenn wir schon dabei sind, fügen wir auch einen hilfreichen CSS-Schnipsel hinzu, der dafür sorgt, dass die Breite der Eingaben unabhängig von Padding und Rahmen gleich bleibt:

1	* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Für weitere Informationen, warum box-sizing so großartig ist, hat Paul Irish eine großartige Erklärung.

Schritt 8: Hinzufügen einer einfachen Animation

Um unser Formular noch schicker zu gestalten, fügen wir dem Formular beim Laden der Seite eine einfache aufsteigende Animation hinzu. Beginnen wir damit, die Animation zu deklarieren und Keyframes hinzuzufügen:

@keyframes "login" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
   	margin-top: -50px;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
   	margin-top: -75px;
 }

}

@-moz-keyframes login {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-webkit-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-ms-keyframes "login" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-o-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

Das obige CSS deklariert eine neue Animation namens login und ändert die Werte für margin-top und opacity, sodass das Formular eingeblendet wird und in Position steigt. Fügen wir nun das CSS für die slick-login-ID hinzu:

	-webkit-animation: login 1s ease-in-out;
	-moz-animation: login 1s ease-in-out;
	-ms-animation: login 1s ease-in-out;
	-o-animation: login 1s ease-in-out;
	animation: login 1s ease-in-out;

Jetzt wird jedes Mal, wenn die Seite geladen wird, die 1-Sekunden-Animation ausgeführt. Jetzt, wo wir gestylt, repariert und animiert haben, sind wir fertig!

Endgültiges HTML und CSS

Hier ist ein Blick auf den endgültigen HTML-Code für dieses schicke Anmeldeformular:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Slick Login</title>
	<meta name="description" content="slick Login">
	<meta name="author" content="Webdesigntuts+">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
	<script type="text/javascript" src="placeholder.js"></script>
</head>

<body>
	<form id="slick-login">
		<label for="username">username</label><input type="text" name="username" class="placeholder" placeholder="me@tutsplus.com">
		<label for="password">password</label><input type="password" name="password" class="placeholder" placeholder="password">
		<input type="submit" value="Log In">
	</form>
</body>

</html>

Und das CSS:

/*
CSS RESET
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License:  none (public domain)
 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display: block;
}

body {
	line-height: 1;
}

ol,ul {
	list-style: none;
}

blockquote,q {
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS Animations */
@keyframes "login" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
   	margin-top: -50px;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
   	margin-top: -75px;
 }

}

@-moz-keyframes login {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-webkit-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-ms-keyframes "login" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

@-o-keyframes "login" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-top: -50px;
 }
 100% {
   filter: alpha(opacity=100);
   opacity: 1;
   margin-top: -75px;
 }

}

/* Main CSS */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	font-family: sans-serif;
	
	background-color: #323B55;
	background-image: -webkit-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -moz-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -o-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: -ms-linear-gradient(bottom, #323B55 0%, #424F71 100%);
	background-image: linear-gradient(bottom, #323B55 0%, #424F71 100%);
}

#slick-login {
	width: 220px;
	height: 155px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -110px;
	margin-top: -75px;

	-webkit-animation: login 1s ease-in-out;
	-moz-animation: login 1s ease-in-out;
	-ms-animation: login 1s ease-in-out;
	-o-animation: login 1s ease-in-out;
	animation: login 1s ease-in-out;
}

#slick-login label {
	display: none;
}

.placeholder {
    color: #444;
}

#slick-login input[type="text"],#slick-login input[type="password"] {
	width: 100%;
	height: 40px;
	positon: relative;
	margin-top: 7px;
	font-size: 14px;
	color: #444;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	padding-left: 20px;
	
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
	background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);

	-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
	box-shadow: inset 0px 2px 0px #d9d9d9;

	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
	-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
	box-shadow: inset 0px 2px 0px #a7a7a7;
}

#slick-login input:first-child {
	margin-top: 0px;
}

#slick-login input[type="submit"] {
	width: 100%;
	height: 50px;
	margin-top: 7px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-shadow: 0px -1px 0px #5b6ddc;
	outline: none;
	border: 1px solid rgba(0, 0, 0, .49);

	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	border-radius: 6px;

	background-color: #5466da;
	background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -moz-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -o-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: -ms-linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	background-image: linear-gradient(bottom, #5466da 0%, #768ee4 100%);
	
	-webkit-box-shadow: inset 0px 1px 0px #9ab1ec;
	box-shadow: inset 0px 1px 0px #9ab1ec;
	
	cursor: pointer;

	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	-ms-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

#slick-login input[type="submit"]:hover {
	background-color: #5f73e9;
	background-image: -webkit-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -moz-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -o-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: -ms-linear-gradient(bottom, #5f73e9 0%, #859bef 100%);
	background-image: linear-gradient(bottom, #5f73e9 0%, #859bef 100%);

	-webkit-box-shadow: inset 0px 1px 0px #aab9f4;
	box-shadow: inset 0px 1px 0px #aab9f4;
	margin-top: 10px;
}

#slick-login input[type="submit"]:active {
	background-color: #7588e1;
	background-image: -webkit-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -moz-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -o-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: -ms-linear-gradient(bottom, #7588e1 0%, #7184df 100%);
	background-image: linear-gradient(bottom, #7588e1 0%, #7184df 100%);

	-webkit-box-shadow: inset 0px 1px 0px #93a9e9;
	box-shadow: inset 0px 1px 0px #93a9e9;
}

Abschluss

Hier ein kleiner Einblick in das Endergebnis:

Das Tolle an diesem Formular ist, dass es sehr einfach zu ändern ist. Es ist auch sehr einfach zu erweitern, weitere Eingaben, Validierung, Funktionalität usw. hinzuzufügen. Danke fürs Mitlesen und ich hoffe, Sie haben etwas gelernt. Mich würde interessieren, wofür Sie das verwenden!