Formular: Label Breite definieren

**mavo** · #1 11.05.06, 16:06

Hallo,

mit der Version 4 wurden ja aus den Formularen in Tabellenform welche in Div. Mit CSC kann man ja alles wunderbar formatieren denk man...

Mein Problem: Da die Labels zu den INputfeldern jetzt einfach nacheinander kommen, sieht das Formular unschön aus, nicht mehr so wie früher, dass die Input Felder alle untereinander waren, sondern jetzt alle etwas versetzt je nach Länge des Label Textes.

Jetzt wollte ich schnell mal per CSS die Breite des labels definieren, aber das geht ja nicht! Das is meiner Meinung nach ein wenig ein Bug von den T3 Jungs.

Wie kann ich das ändern? Einfach per CSS wäre mir das liebste! Aber das geht ja wohl nicht...

LineMan · #2 11.05.06, 23:43

hi...

das hat mit typo3 wenig zu tun und... na klar geht das:

z.B. wenn du dein label links vor dem formfeld haben willst... und selbige immer gleich groß sein sollen... das nächste feld in der nächsten zeile erscheinen soll... dann kannst du es z.B. so machen:

Beispiel (habe ich mal eben so zusammengeschustert - nur das du ne idee bekommst:sad:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>css-form</title> <style type="text/css" media="screen">
/*fix default browserspaces between elements*/
* {
	padding:0px;
	margin:0px;
}
body {
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	padding: 10px;
}

h1 {
	font-size: 14px;
	font-weight:bold;
	background:#F4F4F4;
	display:block;
	padding:5px;
	border-bottom: 1px dotted #333;
	margin-bottom:10px;
}
a:link, a:visited, a:active {
	color: #666666;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #333333;
}
label {
	float:left;
	display:block;
	width:100px;
	margin-bottom:10px;
	padding-left:10px;
}
input, textarea, select {
	float:left;
	display:block;
	width:250px;
	border: 1px solid #333;
	background:#F4F4F4;
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	margin-bottom:10px;
	padding:1px;
}
/*clearing all floats and fix firefox and ie backgroundcolor-bug */
div.clearer {
	clear:both;
	font-size:1px;
	line-height:1px;
	display:block;
	height:1px;
} 
form {
	background:#EFEFEF;
	width:400px;
	border: 1px dotted #333;
}
.form-button {
	margin-left:110px !important;
	margin-left:55px; /*to fix ie6 position*/
	width:100px;
}
.option {
	border:none;
	background:none;
	width:auto;
}
fieldset {
	border:none;
	padding-left:100px;
	padding-bottom:10px;
	display:block;
}
fieldset input {
	width:auto;
	border:none;
	background:none;
	float:left;
	display:block;
	margin-right:10px;
	margin-top:3px !important;
	margin-top:0px; /*to fix ie6 position*/
}
fieldset label {
	width:auto;
	float:left;
	display:block;
	padding-right:2px;
	white-space:nowrap; /*to fix ie6 wrapping*/
}
</style> </head> <body> <form action="#" method="post" enctype="application/x-www-form-urlencoded" id="deineform"> <h1>Kontakt</h1> <div class="form-css"> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <div class="clearer">&nbsp;</div> <label for="adresse">Adresse:</label> <input type="text" name="adresse" id="adresse" /> <div class="clearer">&nbsp;</div> <label for="nachricht">Nachricht:</label> <textarea name="nachricht" rows="5" cols="50" id="nachricht"></textarea> <div class="clearer">&nbsp;</div> <fieldset> <label for="option1">Option 1</label> <input name="optionen" type="radio" value="wert1" id="option1" checked="checked" /> <label for="option2">Option 2</label> <input name="optionen" type="radio" value="wert2" id="option2" /> <label for="option3">Option 3</label> <input name="optionen" type="radio" value="wert3" id="option3" /> </fieldset> <div class="clearer">&nbsp;</div> <fieldset> <label for="check1">Check 1</label> <input name="check1" type="checkbox" value="wert1" id="check1" checked="checked" /> <label for="check2">Check 2</label> <input name="check2" type="checkbox" value="wert2" id="check2" /> <label for="check3">Check 3</label> <input name="check3" type="checkbox" value="wert3" id="check3" /> </fieldset> <div class="clearer">&nbsp;</div> <label for="select">Anliegen:</label> <select name="liste" id="select"> <option value="wert1">wert1</option> <option value="wert2">wert2</option> <option value="wert3">wert3</option> </select> <div class="clearer">&nbsp;</div> <input name="absenden" type="button" value="Senden" class="form-button" /> <div class="clearer">&nbsp;</div> </div> </form> </body> </html>

**mic_jan** · #3 09.07.06, 17:59

Hi, dein Vorschlag ist zwar nett, traf das Problem aber nicht wirklich...

Denn das Formular wird standardmäßig mit "div"s gewrappt, die ein wenig ärger machen ;-)

Lieben Grus,

Michael

**mstuebner** · #4 09.07.06, 18:39

Zitat:

Zitat von mic_jan

Hi, dein Vorschlag ist zwar nett, traf das Problem aber nicht wirklich...

Denn das Formular wird standardmäßig mit "div"s gewrappt, die ein wenig ärger machen ;-)

...was für mich der Grund war Tmailform (pil_mailform) einzusetzen. Für Formulare Tabellen einzusetzen finde ich äusserst legitim.

**mic_jan** · #5 09.07.06, 20:41

Zitat:

Zitat von mstuebner

...was für mich der Grund war Tmailform (pil_mailform) einzusetzen. Für Formulare Tabellen einzusetzen finde ich äusserst legitim.

Naja, legitim schon, aber nicht TYPO3-Redakteursfreundlich :-| Okay, ich gebe zu, dass das Anlegen von Formularen sowieso nicht userfreundlich ist ;-)

Eigentlich müsste man ja nur den Wrap

Code:

<div class="csc-mailform-field">| /</div>

durch

Code:

 |<br />

ersetzen.

Aber wie finde ich nur die richtige Stelle!? KAnn da jemand helfen?

Lieben Gruss,

Michael

Spyker · #6 10.07.06, 09:02

geht doch auch wunderbar mit den div´s

Beispiel: http://typo3.fruit-lab.de/kontakt.html

einfach feste breite für das mutterelement und dann die label´s auf block setzen & auch mit fester breite.

Beste,
Tim

**mic_jan** · #7 10.07.06, 09:38

Zitat:

Zitat von Spyker

geht doch auch wunderbar mit den div´s

Beispiel: http://typo3.fruit-lab.de/kontakt.html

einfach feste breite für das mutterelement und dann die label´s auf block setzen & auch mit fester breite.

Ja, wenn du erst das Beschreibungsfeld und dann das Input-Feld in jeweils einer eigenen Zeile hast ;-)

Lieben Gruss,

Michael

LineMan · #8 10.07.06, 10:30

hmmm... meinst du das hier? damit kann man ja das mailformular frei gestalten...

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

tt_content.mailform.20 {
accessibility = 1
noWrapAttr=1
formName = mailform
dontMd5FieldNames = 1
REQ = 1
layout = <div class="csc-mailform-field">###LABEL### ###FIELD###</div>
COMMENT.layout = <div class="csc-mailform-label">###LABEL###</div>
RADIO.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-radio">###FIELD###</span></div>
LABEL.layout = <div class="csc-mailform-field">###LABEL### <span class="csc-mailform-label">###FIELD###</span></div>
labelWrap.wrap = |
commentWrap.wrap = |
radioWrap.wrap = |<br />
REQ.labelWrap.wrap = |
stdWrap.wrap = <fieldset class="csc-mailform"> | </fieldset>
params.radio = class="csc-mailform-radio"
params.check = class="csc-mailform-check"
params.submit = class="csc-mailform-submit"
}

ich verwende es in meiner seite inetwa so:

Typoscript-Code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

tt_content.mailform.20 {
accessibility = 1
noWrapAttr=1
formName = mailform
dontMd5FieldNames = 1
REQ = 1
layout = ###LABEL### ###FIELD###<br />
COMMENT.layout = ###LABEL###
RADIO.layout = ###LABEL### ###FIELD###
LABEL.layout = ###LABEL### ###FIELD###
labelWrap.wrap = |
commentWrap.wrap = |
radioWrap.wrap = |
REQ.labelWrap.wrap = |
stdWrap.wrap = <div id="mailform"><fieldset> | </fieldset></div>
params.radio =
params.check =
params.submit =
}

**david** · #9 20.07.06, 18:23

Hallo Zusammen,

Zitat:

Zitat von mstuebner

...was für mich der Grund war Tmailform (pil_mailform) einzusetzen. Für Formulare Tabellen einzusetzen finde ich äusserst legitim.

Gerade bei Formularen sind Tabellen nicht legitim, weil diese die zugehörigkeit der Label zu den entspr. Feldern in eine falsche Lesereihenfolge anordnen. Dies ist nicht Barrierefrei und deshalb verwerflich.

Details zu dieser Problematik findet man unter: http://www.einfach-fuer-alle.de/artikel/formulare/

Gruss
David

tom613 · #10 01.08.06, 09:52

Ein Dankeschön an LineMan.
Dein Beispiel mit CSS hat mir sehr geholfen.

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
sr_feuser_registration neues Label	forTeesSake	TYPO3 4.x Fragen und Probleme	8	27.06.08 14:20
Powermail: Sender und Empfänger über das Formular definieren	mic_jan	powermail	5	14.03.08 23:00
Mailformular: Label von Radiobuttons: wieso <br /></label>?	AnnaM	TYPO3 4.x Fragen und Probleme	2	06.09.07 11:11
Login LABEL Problem	BoniToe	TYPO3 4.x Fragen und Probleme	4	30.03.07 10:12
Label zu sr_feuser_register hinzufügen	Büropalme	Alle anderen Extensions	4	22.08.06 16:12

Suche

Userpanel