CSS erklärt anhand eines Formulares auf einem Fotobuch Portal

Diese Seite ist aufgebaut, für eine externe CSS Datei.

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

Dank CSS ist es heutzutage nicht mehr nötig, extra eine Tabelle zu erstellen, damit man ein Formular einbauen kann. Das heißt natürlich nicht, dass man keine Tabellen mehr verwenden darf.
Ein solches Login Formular dient dazu, dass Besucher sich bei einem Fotobuch Portal einloggen können.

Bei diesem Portal handelt dreht sich alles rund um das Thema Fotobuch, quasi alles, was man aus Fotos machen kann. Natürlich gibt es bei diesem Fotobuch Portal auch die Möglichkeit sich seine eigenen Bilder hochzuladen, und das Fotobuch Portal erledigt quasi den Rest. Auch ein Online-Album kann man sich erstellen. Selbst Poster und Leinwandgroße mit dem eigenen Motiv kann man dort bestellen. Der Service macht auch keinen Halt vor Aluminium Boards, auf dem Sie Ihre Poster etc. zum Beispiel an Ihre Freunde schicken können. Man bemerkt ohne große Probleme, dass dieses Portal für alles da ist, was Fotos betrifft.

Dieses Fotoportal Portal in ganz Europa und zählt über 2 Millionen Kunden, und freut sich auch auf Ihren Besuch.

Html Definition für das Einlog Formular von zum Beispiel dieser Seite:

Css erklärt,  anhand eines Formulars auf einem Fotobuch Portal

<h1>Einloggen mit Ihren Login-Daten:</h1>
<form class=”basic_form” method=”post” action=”/user/login/”>

<div id=”nickname_row” class=”form-row”>
<label for=”nickname”><span>E-Mail<br/>oder Benutzername:</span></label>
<input type=”text” name=”nickname” id=”nickname” value=”” class=”text” /></div>

<div id=”password_row” class=”form-row”><label for=”password”><span>Passwort:</span></label>
<input type=”password” name=”password” id=”password” value=”” class=”text” /></div>

<div id=”keeplogin_row” class=”checkbox_row”><label for=”keeplogin”>
<span><input type=”checkbox” name=”keeplogin” id=”keeplogin” value=”1? class=”checkbox” />Eingeloggt bleiben</span></label>
</div>

<div id=”form_submit_row” class=”form_end”>
<input type=”submit” name=”commit” value=”Einloggen” class=”button” /></div>
</form>

Hier die CSS Definition:

CSS Definition:

label {
width: 10em;
display: block;
float: left;
cursor: pointer;  /* Mauszeiger aendern */
}

// Durch das einsetzen von ” cursor: pointer;  /* Mauszeiger aendern */”  im “label” wird erreicht, dass sich der Mauszeiger beim überfahren von “Nachname, Vorname, PLZ und Wie finden Sie diese Seiten” zur Hand verändert.

form {
background-color: #eeeeff;
padding: 20px;
border: 1px solid silver;
}
// Nun geben wir dem Formular eine Hintergrundfarbe, so wie eine Breite hinzu. In diesem Beispiel verwenden wir Pastellblau.

.radiotrenner {
display: block;
float: left;
border-right: 1px solid black;
background-color: yellow;
width: 90px;
}

//Durch “radiotrennerEnde” werden unter anderem Kreise ausgefüllt.

.radiotrennerEnde {
display: block;
float: left;
border-right: 1px solid black;
margin-right: 1em;
background-color: yellow;
width: 90px;
}

// Durch das Einsetzen von “input” erreichen wir eine farbliche Feldkennung durch ansetzen des Mauscursors im entsprechenden Feld.
In unserem Beispiel wird dadurch das Eingabefeld Nachname und Vorname, gelb markiert. Die Postleitzahl allerdings rot, weil wir das so bestimmen.
Diese optisch farbliche Hintergrundgestaltung beim einsetzen des Mauscursors wirkt jedoch leider nur mit dem Internetbrowser Mozilla Firefox.

input:focus, textarea:focus {
background-color: yellow;
}
input#plz:focus {
background-color: red;
}

Wie wir erkennen, kann also durch bestimmte zusätzliche Werteingaben, ein Formular jederzeit verändert/erweitert werden.

Comments are closed.