Hallo,
ich bräuchte mal Hilfe bei dem erstellen von einem Kontaktformular. Als blutiger Anfänger in Sachen html und css bin ich gerade am gestalten einer eigenen Page. Darin sollte auch ein Kontaktformular enthalten sein. Nachdem ich bisher alles andere alleine mit diversen Infoseiten geschafft habe, kam ich leider beim Kontaktformular nicht weiter. Ich habe mir also (vorübergehend) ein freies Layout aus dem Netz geholt um es optisch zu verändern und zu verstehen wie so etwas gemacht wird. Leider stören mich dabei die beiden Buttons: Abschicken und Eingabe Löschen. Ich möchte sie so gestalten wie die Menüfelder: kontaktdaten, Anfrage, Aktion. Also die gleiche Grafik als Hintergrund verwenden, bekomme das aber nicht hin. Sind die EIngabefelder und die Abschicken und Eingabe Löschen Buttons miteinander verbunden und müssen erst getrennt werden? Aber wie?
Hier der Code:
html:
css:
ich bräuchte mal Hilfe bei dem erstellen von einem Kontaktformular. Als blutiger Anfänger in Sachen html und css bin ich gerade am gestalten einer eigenen Page. Darin sollte auch ein Kontaktformular enthalten sein. Nachdem ich bisher alles andere alleine mit diversen Infoseiten geschafft habe, kam ich leider beim Kontaktformular nicht weiter. Ich habe mir also (vorübergehend) ein freies Layout aus dem Netz geholt um es optisch zu verändern und zu verstehen wie so etwas gemacht wird. Leider stören mich dabei die beiden Buttons: Abschicken und Eingabe Löschen. Ich möchte sie so gestalten wie die Menüfelder: kontaktdaten, Anfrage, Aktion. Also die gleiche Grafik als Hintergrund verwenden, bekomme das aber nicht hin. Sind die EIngabefelder und die Abschicken und Eingabe Löschen Buttons miteinander verbunden und müssen erst getrennt werden? Aber wie?
Hier der Code:
html:
Code:
<div id="content">
<h1 style="text-decoration:underline;">Kontakt</h1>
<form name="tutorial_formular" action="contact_out.php" method="post" >
<fieldset class="kontaktdaten">
<legend>Kontaktdaten</legend>
<label for="vorname" accesskey="1">Vorname</label><input id="vorname" name="FormVorname" type="text" value="" /><br />
<label for="nachname" accesskey="2">Nachname</label><input id="nachname" name="FormNachname" type="text" value="" /><br />
<label for="email" accesskey="3">E-Mail</label><input id="email" name="FormEMail" type="text" value="" />
</fieldset>
<fieldset class="anfrage">
<legend>Anfrage</legend>
<label for="text">Nachricht</label>
<textarea id="text" name="FormBemerkung" cols="30" rows="3" onfocus="this.value=''" >Hier können Sie Ihre Nachricht hinterlassen</textarea>
</fieldset>
<fieldset class="buttons">
<legend>Ihre Aktion</legend>
<input type="submit" value="Abschicken" class="senden" name="senden" />
<input type="reset" value="Eigabe löschen" class="senden" name="senden" />
</fieldset>
</div>
Code:
/*Kontaktformular*/
fieldset {
width: 30em;
margin: 1.5em auto 1.5em auto;
display: block;
font-size: 0.80em;
border: 1px solid #ddd;
background-image:url(kontaktfieldset.png);
clear: both;
}
* html fieldset {padding: 5px;}
legend {
background: url(Button02.jpg);
padding: 4px;
border: 1px solid #ddd;
border-right-width: 2px;
border-bottom-width: 2px;
margin-bottom: 4px;
font-weight: bold;
}
label {
margin: 5px 0;}
.kontaktdaten label {
display: block;
width: 5em;
float: left;
}
.anfrage label {
display: block;
width: 5em;
float: left;
}
input,textarea {
margin: 3px 0;
border: 1px solid #d1d1d1;
background: white;
padding: 3px 3px;
}
input:active input:focus, input:hover { background: url(Button02.jpg)}
.buttons {text-align: center;}
a.locationCat{color: #8d8c8c; font-weight: bold;}
.error {
font: 13px Verdana, Arial, Helvetica, sans-serif;
color:red;
font-weight:bold;
}
