CSS und HTML auf einer Seite für Fertiggaragen

Die Firma Garagen Verkauf bietet Fertiggaragen in verschiedenen Variationen an. Ob als Einzelgarage, Doppelgarage, Garage mit Satteldach, oder auch Reihengaragen. Auch Garagen mit anhängendem Geräteraum gehören zum Sortiment. Auch werden Garagen ganz nach Kundenwünschen angepasst.
Zum Telefonservice gehört auch eine Kundenfreundliche 0800 Rufnummer dazu.
Das Verkaufsgebiet ist Deutschland, wie auch die Schweiz und Österreich. Bei Bedarf gibt man im Kontaktformular “Sonstige” an, denn auch in diesem Fall, steht man nicht auf verlorenem Posten.

Html Definition für das Kontakt/Anfrage-Formular von zum Beispiel Garagen Verkauf.de
Sollten hier Tabellen vermisst werden, es gibt keine, da beim arbeiten mit Css für Formulare, Tabellen nicht mehr zwingend nötig sind.

//Das Rollfenster: Hier werden die definierten Begriffe beim anklicken des Rollfensters angezeigt. Klickt man auf einen Begriff, wird der Firma, die diese E-Mail bekommt angezeigt, um welches Produkt es geht.
<form action=”formmailer.php” method=”post” name=”form1″ id=”form1″>
<span>
<p><label for=”name”>Typ</label>
<select name=”typ”>
<option value=”Einzelgarage”>Einzelgarage</option>
<option value=”Doppelgarage”>Doppelgarage</option>
<option value=”Reihengarage”>Reihengarage</option>
<option value=”Sonstiges”>Sonstiges</option>
</select>
</p>
</span>
//Ende des Rollfensters.

//Ab hier beginnen die einzelnen auszufüllenden Textfelder
<span id=”abmessungen”><p><label for=”name”>Wunsch-Größe</label>
<input type=”text” name=”abmessungen” id=”abmessungen” value=”" /> (L x B x H in cm)</p>
</span>

<span id=”textfield1″>
<p><label for=”name”>Vorname</label>
<input type=”text” name=”vorname” id=”vorname” />

<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p></span>

<span id=”textfield2″>
<p><label for=”name”>Name</label>
<input type=”text” name=”name” id=”name” />
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p></span>

<span id=”textfield3″><p><label for=”name”>Strasse</label>
<input type=”text” name=”strasse” id=”strasse” />
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p></span>

<span id=”textfield4″><p><label for=”name”>Plz</label>
<input type=”text” name=”plz” id=”plz” />
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p></span>

<span id=”textfield5″><p><label for=”name”>Ort</label>
<input type=”text” name=”ort” id=”ort” />
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p></span>

<span id=”textfield6″>
<p><label for=”name”>Telefon</label>
<input type=”text” name=”telefon” id=”telefon” />
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p>
</span>

<span id=”email”>
<p><label for=”name”>Email</label>
<input type=”text” name=”email” id=”email” />
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span>
<span class=”textfieldInvalidFormatMsg”>Invalide Email-Adresse.</span></p>
</span>
//Ende der einzelnen Eingabefelder

//Hier wird das Herkunftsland bestimmt.
<span>
<p><label for=”herkunft”>Herkunft</label>
<select name=”herkunft”>
<option value=”Deutschland”>Deutschland</option>
<option value=”Österreich”>Österreich</option>
<option value=”Schweiz”>Schweiz</option>
<option value=”Sonstige”>Sonstige</option>
</select>
</p>
</span>
//Ende der Bestimmung.

//Ab hier besteht die Möglichkeit eine individuelle Information einzugeben, die in den obigen Textfeldern nicht möglich ist.
<p><label for=”nachricht”>Ihre Nachricht</label>
<textarea name=”nachricht” cols=”" rows=”5″ id=”anfrage”></textarea>
<span class=”textfieldRequiredMsg”>Ihre Eingabe wird benötigt.</span></p>
//Ende der Möglichkeit der individuellen Information-Eingabemöglichkeit

//Der Button zum abschicken, des fertig ausgefüllten Formulars
<p><input class=”send” value=”abschicken” type=”submit” /></p>
</form>
//Ende des Formularbutton

//Ende der Html Definition.

Beginn der Css Definition class:

Die Css Definition ” textfieldRequiredMsg” ist auch zuständig, wenn ein Textfeld zum ausfüllen übersehen wird, dann erscheint die Warnmeldung “Ihre Eingabe wird benötigt.” Gleichzeitig wird das entsprechende Textfeld, in diesem Fall rötlich, mit dem Hexadezimalwert “#ff9f9f” ausgefüllt.

Bei der Klasse “navcontainer” wird in Html auch die Definition z.B.   “id navcontainer” verwendet.

Die aufgeführten Details der Css Klassen, sind nicht unbedingt identisch mit der original Webseite.

. textfieldRequiredMsg
{

font-color:  #ff9f9f;
}

.boxtext
{
font-color:  #753975;
}

.seperator
{
Font-color: #000000;
}

//Weitere Defintionen
.highslide

.navcontainer

.navlist

Comments are closed.