zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Formular mit fieldset gestalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.04.2013, 18:43
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard Formular mit fieldset gestalten

hi,

ich habe bereits mit fieldset, legend, label etc. ein entsprechendes Formular definiert und mit css gestaltet. Bei den radio-buttons habe ich ein Problem. Den radio-button habe ich bereits mit
Code:
float:left
gefloatet. Die Radios erscheinen nebeneinander, aber die Bezeichnungen Frau / Herr unter den Radios. Kann mir da jemand einen Tipp geben, dass die Bezeichnungen neben den Radios stehen?
HTML-Code:
<form id="myform" action="kontaktformular.php" method="post">
         <fieldset>
           <legend>Kontakformular:</legend>
           <label for="anrede">Anrede</label>
           <label for="frau" class="radio"><input id="anrede" name="anrede" type="radio" value="" />Frau</label>
           <label for="mann"><input id="anrede" name="anrede" type="radio" value="" />Herr</label>
           <label for="firma">Firma<input id="firma" name="firma" type="text" value="" /></label>
           <label for="name">Name* <input id="vornachname" name="vornachname" type="text" value="" /></label>
           <label for="strassehausnr">Stra&szlig;e und Haus-Nr.<input id="strassehausnr" name="strassehausnr" type="text" value="" /></label>
           <label for="plzort">PLZ und Ort<input id="plzort" name="plzort" type="text" value="" /></label>
           <label for="telefon">Telefon<input id="telefon" name="telefon" type="text" value="" /></label>
           <label for="email">E-Mail*<input id="email" name="email" type="text" value="" /></label>
           <label for="anfrage">Ihre Anfrage:</label>
           <label for="anfrage"><textarea></textarea>
          </fieldset>
          </form>
css-code:
Code:
#myform fieldset, #myform input, #myform textarea {
    border: 1px solid #cccccc;
}

#myform fieldset, #myform label, #myform input
{
display:block;
}

#myform fieldset {
width: 24em;
margin: 0em 0em 0em 0em;
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 1em;
}

#myform label {
margin-bottom: 1em;
font-weight: bol;
text-indent: 0.1em;
}

#myform label.radio
{
float:left;
}
Angehängte Grafiken
Dateityp: jpg bild.jpg (39,3 KB, 7x aufgerufen)

Geändert von seeadler (03.04.2013 um 18:47 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.04.2013, 18:51
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Die input gehören nicht ins label sondern dahinter. Und dann musst die label natürlich auch noch mit floaten...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.04.2013, 19:26
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

ich bin ein wenig verwirrt, dass die inputs außerhalb der labels definiert werden müssen;
Ich habe code so wie ich ihn jetzt definiert habe aus einer css-literatur. Wenn die inputs außerhalb definiert werden müssen, was muss dann in die labels bzw. wozu benötige ich dann überhaupt die labels?
Mit Zitat antworten
  #4 (permalink)  
Alt 03.04.2013, 19:31
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

also dann so etwa:

HTML-Code:
<input id="anrede" name="anrede" type="radio" value="" />
<label for="frau" class="radio">Frau</label>
Mit Zitat antworten
  #5 (permalink)  
Alt 03.04.2013, 19:34
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.034
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Das müssen sie nicht, Inputs innerhalb von Label sind vollkommen in Ordnung. Du solltest deinen HTML trotzdem mal aufräumen, da passt einiges nicht zusammen. Das for-Attribut sollte immer die dazu passende Id des Inputs beinhalten. Du schließt nicht alle Label. Wenn die Label die Inputs umschließen und du beides nebeneinander haben möchtest, musst du die Label floaten (oder inline/inline-block verwenden).

Bitte stelle in Zukunft lauffähigen Code ein, am besten gleich mit einem Link zu deinem Problemfall, das erleichtert die Fehlersuche. Wenn du JsFiddle oder ähnliches nutzt, können die Helfer sogar direkt mit deinem Code arbeiten und ihn korrigieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 03.04.2013, 19:34
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

@ cebito
Doch das kann er so machen.

Aber er muss die id in class ändern und in CSS folgendes schreiben

Code:
#myform label.radio, #myform .anrede
{
            float:left;
}
Dann klappt das auch so.

Eine id darf immer nur ein einziges Mal vorkommen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 03.04.2013, 19:40
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Das müssen sie nicht, Inputs innerhalb von Label sind vollkommen in Ordnung.
Tatsächlich...
Zitat:
A label can be bound to an element either by using the "for" attribute, or by placing the element inside the <label> element.
Man lernt nie aus
Mit Zitat antworten
  #8 (permalink)  
Alt 03.04.2013, 20:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.06.2007
Beiträge: 370
seeadler befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Du schließt nicht alle Label. Wenn die Label die Inputs umschließen und du beides nebeneinander haben möchtest, musst du die Label floaten (oder inline/inline-block verwenden).
so jetzt müssten alle labels geschlossen sein; und entsprechend id's geändert
HTML-Code:
<form id="myform" action="kontaktformular.php" method="post">
         <fieldset>
           <legend>Kontakformular:</legend>
           <label for="anrede">Anrede</label>
           <label for="frau" class="radio" class="anrede"><input id="frau" name="anrede" type="radio" value="" />Frau</label>
           <label for="mann"><input id="mann" name="anrede" type="radio" value="" />Herr</label>
           <label for="firma">Firma<input id="firma" name="firma" type="text" value="" /></label>
           <label for="vornachname">Name*<input id="vornachname" name="vornachname" type="text" value="" /></label>
           <label for="strassehausnr">Stra&szlig;e und Haus-Nr.<input id="strassehausnr" name="strassehausnr" type="text" value="" /></label>
           <label for="plzort">PLZ und Ort<input id="plzort" name="plzort" type="text" value="" /></label>
           <label for="telefon">Telefon<input id="telefon" name="telefon" type="text" value="" /></label>
           <label for="email">E-Mail*<input id="email" name="email" type="text" value="" /></label>
           <label for="anfrage">Ihre Anfrage:</label>
           <label for="anfrage"><textarea></textarea></label>
          </fieldset>
          </form>
Ich möchte aber nur die labels für die Radios nebeneinander haben; der Rest soll untereinander bleiben..........
hier der link: TESTSEITE
Mit Zitat antworten
  #9 (permalink)  
Alt 03.04.2013, 20:31
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Und was soll das?
2 mal class bei label
und bei Frau und Mann haste die ID dringelassen
und bei label mann die class vergessen, so kannste im CSS die Elemente nicht selektieren oder nur sehr schwierig.

HTML-Code:
<label for="frau" class="radio" class="anrede"><input id="frau" name="anrede" type="radio" value="" />Frau</label>   
           <label for="mann"><input id="mann" name="anrede" type="radio" value="" />Herr</label> 
so kann es aussehen:
HTML-Code:
<label for="frau" class="anrede">
    <input id="frau" class="anrede" name="anrede" type="radio" value="" />Frau
</label>   
<label for="mann class="anrede"
    <input id="mann" class="anrede" name="anrede" type="radio" value="" />Herr
</label> 
Somit kannst du das CSS so belassen.


N.B. Schau dir die Seite auch mal mit ausgeschaltetem Javascript an!
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.04.2013, 20:55
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.034
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Dann gib den Labels die die Radios beinhalten eine Klasse (oder nutze [type="radio"] im Selektor, wenn du keine Rücksicht auf ältere Browser nehmen musst) und setz die Inputs (Radios) darin auf inline/inline-block.
Mit Zitat antworten
Sponsored Links
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
Problem bei Formular layout. cooky79 CSS 0 30.05.2011 20:54
Formular gestalten/ positionieren BoFiaZ CSS 1 16.10.2008 14:14
Deaktiviertes Formular gestalten? tscho CSS 2 15.08.2008 09:52
fieldset ohne formular .robert (X)HTML 5 30.01.2007 18:10
Formular benutzerfreundlicher gestalten Geronimo Barrierefreiheit 2 26.09.2006 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:36 Uhr.