Peter Bucher - Mein Experiment, meine Spielereien, meine Welt...   ·   Stefan Falz   ·   Jürgen Gutsch   ·   Golo Roden   ·   ASP.NET Zone   ·   Microsoft ASP.NET
Willkommen bei ASP.NET Zone. Anmelden | Registrieren | Hilfe

Beispiel: Formular àla CSS

Es gibt sehr viele Anleitungen da draussen im Netz, wie Formulare am besten per CSS zu formatieren seien.
Mir war es wichtig, nicht zuviel Markup zu benötigen und trotzdem eine schöne Lösung zu finden.

Aus diversen anderen Ansätzen wäre das ein möglicher:

Code:

<html>
<head>
    <title>Test Formular</title>
    <style type="text/css">     
        fieldset {
            margin-bottom: 8px;
            padding: 8px;
        }
       
        input, textarea {
            display: block;
            float: left;
            margin-top: 0.6em;
            padding: 2px;
           
            width: 18em;
            height: 2em;
        }
       
        input, textarea, button {
            background: url(input_bg.gif) repeat-x bottom;
        }
       
        textarea {
            height: 8em;
        }
       
        br {
            clear: left;
        }
       
        label {
            width: 4em;
            padding: 5px;
            float: left;
            line-height: 2em;
        }
       
        .rechteBox {
            float: right;
            text-align: left;
            border: 1px dotted gray;
           
            padding: 8px;
           
            height: 100px;
            width: 180px;
        }
    </style>
</head>
<body>
<form id="aspnetform" method="post">
<fieldset>
    <legend>Pers&ouml;nlich</legend>
    <label for="txtName">Name:</label>
    <br type="text" id="txtName" name="txtName" />
    <label for="txtAlter">Alter:</label>
    <br type="text" id="txtAlter" name="txtAlter" />
    <label for="txtText">Text:</label>
    </textarea id="txtText" cols="20" name="txtTest">
</fieldset>
<fieldset>
    <legend>Internet</legend>
    <label for="txtBlog">Blog:</label>
    <br type="text" id="txtBlog" name="txtBlog" />
    <label for="txtWebsite">Website:</label>
    <br type="text" id="txtWebsite" name="txtWebsite" />
</fieldset>
<fieldset>
    <legend>Abschluss</legend>
    <div class="rechteBox">
        <h3>InfoBox</h3>
        <p>
            Das ist ein Beispiel.
        </p>
    </div>
    <label for="txtSicherheitscode">4 + 7 =</label>
    <br type="text" id="txtSicherheitscode" name="txtSicherheitscode" />
    </label>
    <input type="submit" name="btnSubmit" value="Formular absenden..." />
</fieldset>
<div style="clear: both;" />
</form>
</body>
</html>
Veröffentlicht Mittwoch, 30. Januar 2008 21:33 von Peter Bucher
Abgelegt unter: , , ,

Kommentare

# Formular gestalten/ positionieren - XHTMLforum

Donnerstag, 16. Oktober 2008 14:15 by Formular gestalten/ positionieren - XHTMLforum
Anonyme Kommentare sind nicht zugelassen