Legend-Style einmal anders

Neben der eigentlichen Funktion des Legend-Styles bei Formularen lässt sich damit noch eine ganze Menge anstellen. Hier ein Beispiel:

Legend-Style einmal anders

Anstatt den inneren Rahmen mit dem "Schließen"-Symbol umständlich zu basteln oder als Grafik einzufügen, verwenden wir <legend>.

Nachfolgend zunächst das html:

<form name="formular" method="post">

<span id="textfeldaussen" class="feldaussenrahmen">
<fieldset>
<legend><span onclick="zu('textfeldaussen');" class="zu"/>[ x ]</span></legend>
<h3>Daten zur Registrierung:</h3>
<hr/>
<label class="formular">Name:</label>
<input type="text" name="name"/>
<br/>
<label class="formular">Vorname:</label>
<input type="text" name="vorname"/>
<br/>
<label class="formular">Straße:</label>
<input type="text" name="strasse" />
<br/>
<label class="formular">PLZ:</label>
<input type="text" name="plz" />
<br/>
<label class="formular">Ort:</label>
<input type="text" name="ort" />
<hr/>

<label></label><input type="button" value="weiter" /> </fieldset>
</span>
</form>

Damit wir nun das "[ x ]"-Symbol nach rechts bekommen, fügen wir beim <legend>-Tag align="right" ein:

<legend align="right"><span onclick="zu('textfeldaussen');" class="zu"/>[ x ]</span></legend>

Jetzt noch etwas css zum Stylen:

<style type=&qout;text/css">

body{
font-family:Arial, Helvetica, sans-serif;
}

.zu{
cursor:pointer;
}

.feldaussenrahmen{
position:fixed;
top:280px;
width:420px;
left:50%;
margin-left:-200px;
background-color:#f5f5f5;
padding:5px 20px 15px 15px;
border:1px solid#ccc;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 10px 10px 5px #999;
-moz-box-shadow: 10px 10px 5px #999;
box-shadow: 10px 10px 5px #999;
}

legend{
color:#555;
font-weight:bold;
background-color:#f5f5f5;
font-size:12px;
}

fieldset{
width:400px;
border:2px solid #ccc;
background-color:#f5f5f5;
color:#555;
font-size:13px;
}

label{
display:inline-block;
width:120px;
text-align:right;
}

h3{
font-size:13px;
}

hr,input,label{
margin:6px 0 6px 0;
}

hr{
color:#ccc;
}

</style>

Und eine Javascript-Funktion zum Schließen des Formulars:

<script type="text/javascript">

function zu(wert){
   document.getElementById(wert).style.display="none";
}

</script>

Hier könnt ihr das Formular in Aktion sehen:

[ x ]

Daten zur Registrierung:








« zurück