PHP forms

noe · 12. Januar 2011

Hi!

Ich bin ziehmlich neu im Gebiet Internet-programmierung und hab eine Frage zu PHP forms. Ich hab folgende forms in meinem html-body:

<form method=post enctype=multipart/form-data action=processor.php

	onSubmit="return validatePage1();">

<ul class=mainForm id="mainForm_1">


	<li class="mainForm" id="fieldBox_2"><label class="formFieldQuestion">age</label><textarea

		class=mainForm name=field_2 ...></textarea></li>

	<li class="mainForm" id="fieldBox_6"><label class="formFieldQuestion">Save

	Search As</label><input class=mainForm type=text name=field_6

		... li>

	...weitere listenelemente

	... JavaScript

	... submit-button

</form>[/PHP]

Und ich würde es gerne so haben, dass label und textarea schön aligned sind, also links der label, rechts das Eingabefeld, so wie hier zum Beispiel: ........

Was ich aber erhalte ist ein ungleichmäßiger Abstand zwischen label und feld, je nach Größe des Felds/Labels.

Kann mir jemand sagen wie man das im css file spezifizieren kann. Ich hab da schon einges versucht, mit dem position-attribut, oder dem float attribut, es kommt aber nicht so heraus wie ich es gern haben möchte.

Vielen Dank im vorraus,

Noe

_n4p_ · 12. Januar 2011

gib einfach allen labels eine feste breite, und zwar immer die gleiche

Ueberdosis · 13. Januar 2011

gib einfach allen labels eine feste breite, und zwar immer die gleiche

nope...

gibt den Labels die CSS-Eigenschaft "display: block;".

noe · 13. Januar 2011

Funktioniert leider nicht - also die labels & Eingabefelder erscheinen nun untereinander. In

Home

ist zu sehen wie die Seite aussieht wenn man gar keine css einfügt, und wie sie aussieht wenn man display:block verwendet. Den labels eine feste Breite zu zuordnen funktioniert auch nicht - sieht aus als ob man gar keine css verwendet hätte.

_n4p_ · 13. Januar 2011

stimmt, ich hatte das float: left; vergessen.

display: block; allerdings kann in dem fall gar nicht funktionieren, entweder führt es zu dem beschriebenen verhalten oder es ist überflüssig.

bei den checkboxen ist noch zu beachten, das die zumindest im Firefox automatisch ein margin-left: 4px; bekommen. damit die auch genau ausgerichtet sind musst du für die checkbox also entweder margin-left: 0px; einstellen oder die breite des labels um 4px verringern.

noe · 13. Januar 2011

Das hatte ich auch schon versucht, aber allein ein float:left; scheint nicht zu genügen, die label sind ja sowieso schon links, und bleiben da auch. Ich hab dann versucht auch die felder rechts zu befördern - wenn das funktionieren würde würd ich alles einfach in einem kleineren rechteck packen. Ich weiß aber nicht wie die Eingabefelder, als ganze bezeichnet werde. Bei folgender Spezifikation:

label.formFieldQuestion {

	float: left;

}


label.formFieldOption {

	float: right;

}


input.formFieldStyle {

	float: right;

}


#formFields {

	float: right;

}

kommt folgendes raus:

Home

etreu · 13. Januar 2011

Wenn du float verwendest, dann solltest du auch Gebrauch von clear machen.

Ich favorisiere zur Zeit display:inline-block. Diese Eigenschaft wird allerdings erst ab IE7 unterstüzt. Wenn du also ältere Browser unterstützen must/willst, dann brauchst du entweder float (wobei manchmal eine umgekehrte Reihenfolge der Elemente im Markup hilfreich sein kann) oder probierst es über die position-Werte (ein Container wird relativ positioniert und die darin enthaltenen Element absolut. Letzteres funktioniert ganz gut, wenn du die Felder in Zeilen unterbringen kannst.

_n4p_ · 14. Januar 2011

ich weiß nich, ist es so schwer 2 informationen zusammenzusetzen?

ich sprach von fester breite und hab später das float: left; ergänzt, von float right war keine rede.

clear braucht man an der stelle nicht zwingend, weil sowieso alles in <li> geschachtelt ist.


<html>

<head>

<title>Test</title>

<style type="text/css">

<!--

.left {

	float: left;

	width: 200px;

}

.formFieldOption {

	margin-right: 8px;

}

.checkbox {

	margin-left: 0px;

}

-->

</style>


</head>

<body>

<ul id="mainForm_1">

	<li id="fieldBox_4">

		<label class="left">Star</label>

		<select id="field_4" name="field_4">

			<option value=""></option>

			<option value="Any">Any</option>

		</select>

	</li>

	<li id="fieldBox_5">

		<label class="left">With Photo</label>

		<span>

		  <input type="radio" value="yes" id="field_5_option_1" name="field_5" class="checkbox">

		  <label for="field_5_option_1" class="formFieldOption">yes</label>

		  <input type="radio" value="no" id="field_5_option_2" name="field_5" class="checkbox">

		  <label for="field_5_option_2" class="formFieldOption">no</label>

		</span>

	</li>


	<li id="fieldBox_6">

		<label class="left">Save Search As</label>

		<input type="text" value="" size="20" id="field_6" name="field_6" class="mainForm">

 </li>



	<li class="mainForm"><input type="submit" value="Submit" class="mainForm" id="saveForm"></li>

</ul>

</body>

</html>

ist nur mal fix hingeklatscht, aber ich hoffe es ist jetzt klar was ich sagen wollte ...

noe · 14. Januar 2011

Es klappt zwar noch nicht, aber ich werd's mir genauer ansehn. Danke!

_n4p_ · 14. Januar 2011

also bei mir sieht das vorhin gepostete dann so aus wie im anhang

noe · 15. Januar 2011

Funktioniert jetzt auch bei mir. Ich hatte der Einfachheit halber nicht alle Listeelemente gepostet und musste noch einpaar Sachen anpassen. Danke!

Anmelden

PHP forms

Empfohlene Beiträge

noe

_n4p_

Ueberdosis

noe

_n4p_

noe

etreu

_n4p_

noe

_n4p_

noe

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Benutzerkonto erstellen

Anmelden

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de