Anzeige
Tutorialbeschreibung

Formular gestalten mit Hilfe von CSS

Formular gestalten mit Hilfe von CSS

Ich werde euch zeigen, wie man einzelne Felder individuell gestalten könnt! Nachdem Workshop, werdet ihr jedes einzelne Formularfeld, eine andere Hintergrundfarbe(bild), Schriftfarbe, Schriftgröße, Schrift usw. verpassen können.


Vorwort:
Wer noch keine HTML Kentnisse (speziell Formular Tags) hat, kann sich hier die wichtigsten Tags anschauen, sodass ihr euch das gewünschte Formular zusammenbauen könnt!
Wer keine Ahnung hat, wie man sich die Formulardaten zuschicken lassen kann, der schaut einfach in mein anderes Tutorial, dass ich geschrieben habe ("Formulare in HTML erstellen").

Vorbereitung:
Damit wir alle auf dem gleichen Stand sind, habe ich euch hier ein kleines Formular zusammengebaut!
In diesem Tutorial geht es nicht um den Inhalt des Formulares, bzw. wie gut das Formular selber ist, sondern rein um das Designen!!!
(Deshalb habe ich auch das Formular in Tabellen erstellt, da ich finde, da es für Anfänger leichter zu demonstrieren ist.)

Hier geht's zum Formular


Schritt 1:

So, wir haben das Formular in unseren Editor importiert (also den Quelletext reinkopiert), jetzt können wir sofort anfangen:

Sehr wichtig ist es, dass man den einzelnen Formularfelder Namen erteilt.
Ich habe zum Beispiel dem Altersfeld den Namen "alter" gegeben (Befehl: id="alter")!

Nun können wir oben im CSS Teil die ID Alter anlegen, und diese ganz nach belieben formatieren:

Bilder

Das ist die erste Möglichkeit um Formularfelder zu formatieren!

Schritt 2:

Wer lieber (z.B.) alle Textfelder gemeinsam formatieren will, der sollte diese Möglichkeit anwenden:

Bilder

Jetzt kommen bei dem ein oder anderen vielleicht folgende Frage auf:
Warum man bei der Version 1 im CSS Bereich ein # vor der jeweiligen Anweisung hinschreibt, und bei der Version 2 garnichts:

Erläuterung: Bei der Version 1 möchte man ja eine "id" formatieren, also die id gibt den Namen aus, und wenn man id's formatiert, ist es in css so, dass man ein "#" vor dem gewünschten Formatierungswert schreibt.
Bei der Version 2 formatiert man ja einen gewöhnlichen HTML - Tag (andere: p, h1, h2, body etc.), deshalb muss man kein weiters Zeichen vor dem Wert anführen.

Schritt 3:

Ich nehme in meinem Beispiel die zweite Variante:

Ich habe den "input-tag" wie folgt formatiert:

 background-color: #003300;
 color: #FFFFFF;
 font-weight: bold;

Bilder

Schritt 4:

Nun, dass der "Senden-Button" gleich formatiert wurde, wie der Textbereich, gefällt mir garnicht, da ich eigentlich nur die Textfelder so formatieren wollte. Grund dafür ist, dass auch der "Sende-Button" einen "Input-Tag" verwendet. Jetzt werden wir den Button jedoch einzeln formatieren:

Das geht auch ziemlich schnell und einfach, da wir unser Formular von Anfang an gründlich erstellt haben, haben wir der Schaltfläche einen Namen gegeben, ich habe in meinem Beispiel "Button" genommen.

Wir gehen in den CSS Bereich und erstellen eine neue id mit dem Namen "Button" (#Button) und den formatieren wir, völlig egal, wir können das CSS völlig ausnützen und auch Rahmen erstellen.

Ich habe in meinem Beispiel folgende Formatierungswerte genommen:

#button {
 background-color: #FFFFFF;
 color: #000000;
 border: 0;
 border-bottom: 1px dotted black;
 font-family: "Courier New", Courier, monospace;
 font-size: 18px;
 font-weight: bold;
}

Nun sieht das ganze so aus:

Bilder


Ich finde, schaut ganz tüchtig aus, jetzt werden wir noch oben die Menügruppe und unten den Textbereich formatieren:

Schritt 5:

Zuerst zu der Menügruppe:

Wir können auf 2 verschiedenen Methoden formatieren, auf der einen Seite über den HTML - Tag "select" und als zweite Möglichkeit besteht, dass wir (da wir für jedes Formularfeld einen Namen vergeben) den ID -Tag formatieren!

Nun müssen aber Überlegungen getroffen werden, auf der einen Seite, wenn wir den ID Tag formatieren, und wir später vl. eine zweite Menügruppe in unser Formular bauen wollen, wird dieses nicht mitformatiert, da ja nur das eine Formularfeld gezielt formatiert wurde.
Möchten wir aber dass alle Menügruppen im Formular gleich formatiert werden, so formatieren wir den HTML-Tag "select", was wir in unserem Beispiel verwenden werden.

Ich habe wie folgt formatiert:

select {
 background-color: #FF6600;
 color: #FFFFFF;
 font-weight: bold;
}

Jetzt sieht es so aus:

Bilder

Schritt 6:

Jetzt noch den Textbereich:

es gilt das gleiche Schema wie oben, formatiert man den ID Tag -> nur für diesen Textbereich, oder formatiert man den HTML-Tag ("textarea") und hat dafür alle Textbereiche aufeinmal gleich formatiert.

Wir formatieren wie oben, den HTML-Tag "textarea".

Ich habe folgende formatierungen vorgenommen:

textarea {
 background-image:url(http://tinyurl.com/y6sfnb);
 color:#000000;
 font-weight:bold;
}


(ich habe, wie ihr sicher seht, ein Hintergrundbild verwendet, da ich denke, dass es ziemlich gut reinpasst, und damit ihr seht, welche guten Ergebnisse man erzielen kann.)

Nun ist unser Formular fertig.

Wenn wir jetzt noch den Text (Geschlecht, Name, Alter, E-Mail Adresse, Anregungen) formatieren, könnten wir zu so einem Ergebniss kommen:

Bilder

Wie man den Text formatiert werde ich hier nicht beschreiben, den das geht erstens genau gleich wie mit den Formularfeldern, also sprich mit CSS, und zweitens gehört das nicht zu dem eigentlichen Tutorial wo die Formularfelder formatiert werden können.

Ich hoffe mein kleines Tutorial zu dem Thema hat euch gefallen, falls Fragen auftauchen, bitte zögert nicht und schreibt mich einfach an!

Das fertige Formular zum Download gibt es hier

 


Mit freundlichen Grüßen
David10

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MrJimiHancock
  • 05.07.2012 - 22:10

Gute Anregungen für ein nettes aussehendes Formular. Danke, jetzt bin ich inspiriert:)

Portrait von Freistoss
  • 20.08.2009 - 12:08

Passt! Füllt mein Blackout perfekt aus... :) Danke

Portrait von Qfine
  • 25.05.2009 - 01:32

Finds gut =) geht auch schnell , nur ob man dafür wirklich ein Tutorial gebraucht hat hmm....

Portrait von xXxDemoxXx
  • 30.10.2008 - 14:34

Link= defekt .... :(
Wenn möglich, bitte ändern ;)
Ansonsten gut beschrieben

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.10.2007 - 17:28

Nicht schlecht, aber irgendwie!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.09.2007 - 16:33

danke dafür!
glei mal rumbasteln :P

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.05.2007 - 21:18

Einfache und schnelle verschönerung der sonst öden Formulare. Gutes tutorial. thx

Portrait von Elminster
  • 06.05.2007 - 18:29

Für Anfänger gut geeignet mit Studium des Vorhergehenden Artikels!!

danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.02.2007 - 12:46

umfangreich und informativ... thx...

x
×
×