*
Login-Header
blockHeaderEditIcon
Social-media-Header
blockHeaderEditIcon
Worldsoft-Logo
blockHeaderEditIcon
Worldsoft Logo
Menu
blockHeaderEditIcon
Menu

Anleitung Formulare mithilfe von CSS verschönern

Benötigt: Formulare(Oasis) und CSS.

Auf dieser Seite wurde ein Beispiel Formular verwendet das keine Funktionen besitzt. Bitte füllen sie dieses Formular nicht aus.

Erklärung:

Zuerst müssen Sie ein Formular in der CMS anlegen. Ich empfehle Ihnen den Formular-Generator zu verwenden. Sobald sie die Formular Felder angelegt haben entspricht das Layout sehr wahrscheinlich nicht ihren Vorstellungen.

CSS Klassen die wir gestalten müssen. Die einzige arbeite wird sein im CSS die Klassen zu gestalten da das Formular(HTML-Code) schon vorgegeben ist.

Erklärung der verwendeten CSS Klassen für ein Formular
1 input[type="text"] Das sind alle Standard Eingabe Felder im Formular wie Vorname, Nachname
2 input[type="submit"] Das ist der Abschick Button zu unterst bei einem Formular
3 select Das sind alle Auswahlfelder/Dropdowns in einem Formualr wie Sprache, Land
4 textarea Das sind die grossen Eingabe Felder in dennen man längere Nachrichten schreiben kann, meistens nur einmal auf dem Formular vorhanden

Formular CSS

Das unter Formular entspricht dem CSS das Links davon aufgelistet ist.

Anrede:
Sprache:
Vorname:
Nachname:
Stadt:
Strasse:
Postleitzahl:
Land:
E-Mail:
Telefonnummer:
Ihre Nachricht:
* Erforderlich

Erklärung der verwendeten CSS Eigenschaften für ein Formular
1 cursor:pointer; Beim hovern wird anstatt des Standard Mouse-Cursor eine Hand angezeigt
2 appearance
3 transition-property
4 transition-duration
4 transition-timing-function Die Zeit in der die Animation von dem Hintergrund beim hovern verändert wird
Code-Download: Formular CSS Code
backtotop
blockHeaderEditIcon
Footer-06
blockHeaderEditIcon

Instructions

Pseudo :
User-Login
Votre E-mail
Veuillez entrer un code postal valide.
Veuillez entrer un numéro de téléphone valide.
Veuillez corriger ce champ pour continuer.
Veuillez indiquer le nom et le prénom.