Topics / CSS / ID: 87

Schöne Formulare mit CSS

Es gibt sehr viele ansprechend gestaltete Websites aber die meisten kapitulieren vor den Formularen. Entweder werden die Formularelemente im Standard-Design gelassen oder die Buttons werden maximal gegen eine Grafik ausgetauscht.

Damit Sie Ihre Formulare ansprechender gestalten soll nachfolgendes Beispiel einen kleinen Anstoß geben, was mit CSS alles möglich ist.

Dieses Formular kommt ohne eine Tabelle aus und es ist außerdem auch noch XHTML konform. Nachfolgend die CSS Formatierungen.

1. form {
2.    border: 1px solid #666;
3.    padding:20px 10px;
4.    background-image: url(images/emailformular.jpg);
5.    background-repeat:no-repeat;
6.    width: 570px;
7.    text-align: left;
8. }
9. input {
10.    display:block;
11.    width: 12em;
12.    float: left;
13.    border-bottom: 1px dotted #000;
14.    border-left: 1px solid #D3B7C3;
15.    border-right: 1px solid #D3B7C3;
16.    border-top: 1px solid #D3B7C3;
17.    padding: 2px;
18.    background: #D3B7C3;
19.    margin: 5px;
20. }
21. #plz {
22.    width: 5em;
23. }
24. #ort {
25.    width: 12em;
26. }
27. label {
28.    width: 5em;
29.    margin: 5px 5px 5px 14em;
30.    padding: 5px;
31.    float: left;
32.    text-align: right;
33.    font-weight: normal;
34.    color: #000;
35. }
36. .buttons {
37.    padding: 3px;
38.    background-color: #EDE2E6;
39.    border: 3px double #3F2830;
40. }

Fehlt jetzt nur noch der Quellcode für das Formular.

1. <div style="text-align:center;margin:0px auto;">
2. <form action="#">
3. <p style="text-align:center;font-size:18px;font-weight:bold;">Feedback-Formular!</p>
4. <label for="nachname">Name:</label>
5. <input name="nachname" id="nachname" type="text" />
6. <br style="clear:left;" />
7. <label for="vorname">Vorname:</label>
8. <input name="vorname" id="vorname" type="text" />
9. <br style="clear:left;" />
10. <label for="strasse">Strasse:</label>
11. <input name="strasse" id="strasse" type="text" />
12. <br style="clear:left;" />
13. <label for="plz">PLZ:</label>
14. <input name="plz" type="text" size="5" maxlength="5" id="plz" />
15. <label for="ort">Ort:</label>
16. <input name="ort" id="ort" type="text" />
17. <br style="clear:left;" />
18. <label for="land">Land:</label>
19. <input name="land" id="land" type="text" />
20. <br style="clear:left;" />
21. <label for="email">E-Mail:</label>
22. <input name="email" id="email" type="text" />
23. <br style="clear:left;" />
24. <input type="submit" name="senden" value="Absenden" />
25. <input type="reset" name="reset" value="Löschen" />
26. <br style="clear:left;" />
27. </form></div>

eingestellt am: 28.10.2005  (6209 mal gelesen)

 Druckansicht | Übersicht CSS | zurück