zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kontaktformular Hilfe nötig :)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.08.2008, 00:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.08.2008
Beiträge: 7
sunny55 befindet sich auf einem aufstrebenden Ast
Standard Kontaktformular Hilfe nötig :)

[CODE]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. 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 textfelder und die das Abschicken und Eingabe Löschen Feld 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>
css:
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;
}
Habe noch ein Screenshot hinzugefügt
Danke für die nette Hilfe.

Gruss Sunny
Angehängte Grafiken
Dateityp: jpg Formular.jpg (65,6 KB, 18x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.08.2008, 19:59
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zwei Dinge fallen mir dazu ein:
1. Du willst bestimmt keinen Reset-Button. Wer das Formular nicht abschicken will, der braucht den Button nicht. Und wer es abschicken will, vertippt sich vielleicht – und braucht ihn erst recht nicht.
2. Du solltest den Absendebutton unbedingt wie einen Button aussehen lassen, damit deine Besucher ihn auch als solchen erkennen.

Generell ist das Gestalten von Formularelementen immer noch mit vielen Schwierigkeiten verbunden. Hier ist weniger mehr.

input:active input:focus – hier fehlt ein Komma.

Gruß
Thomas
__________________
toscho.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.08.2008, 20:29
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Naja... ich passe Formularfelder auch gerne soweit wie möglich an das Desgin der Seite ein, wenn ich dafür keine Bilder verwenden muss sondern es mit CSS lösen kann.
Ich verändere dann schon teilweise den Rahmen und die Hintergundfarbe sowie die Farbe und Schroftart und Größe des Textes. Auch Größe und padding des Feldes habe ich schon verändert.
Gleiches gilt auch für Buttons bei mir. Allerdings gebe ich toscho dort Recht, dass man die Buttons und Felder noch gut erkennen sollte und sie auf anhieb finden muss ohne vorher goß zu suchen. Auch sollten Sie sich immer noch vom Hintergrund abheben und auf keinen Fall mit ihm verschmelzen. Es sollte aber wirklich auch zum Design der Seite passen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe bei Kontaktformular paule01 Serveradministration und serverseitige Scripte 1 14.12.2008 22:58
Hilfe bei Kontaktformular -> Select-Felder scroll Serveradministration und serverseitige Scripte 6 13.12.2008 17:53
brauche Hilfe kontaktformular mol38 (X)HTML 5 23.03.2007 16:40
Hilfe bei Kontaktformular Susanne Serveradministration und serverseitige Scripte 11 30.09.2006 15:11
Hilfe bitter nötig villain CSS 11 05.10.2004 10:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:31 Uhr.