|
|||
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 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ß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> 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; } Geändert von seeadler (03.04.2013 um 19:47 Uhr) |
Sponsored Links |
|
|||
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? |
|
||||
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. |
|
|||
@ 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; } Eine id darf immer nur ein einziges Mal vorkommen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Zitat:
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ß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> hier der link: TESTSEITE |
|
|||
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> 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> 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. |
Sponsored Links |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem bei Formular layout. | cooky79 | CSS | 0 | 30.05.2011 21:54 |
Formular gestalten/ positionieren | BoFiaZ | CSS | 1 | 16.10.2008 15:14 |
Deaktiviertes Formular gestalten? | tscho | CSS | 2 | 15.08.2008 10:52 |
fieldset ohne formular | .robert | (X)HTML | 5 | 30.01.2007 19:10 |
Formular benutzerfreundlicher gestalten | Geronimo | Barrierefreiheit | 2 | 26.09.2006 21:18 |