Zum Inhalt springen

PHP forms

noe

Von noe
in Skript- und Webserverprogrammierung

 Teilen

Empfohlene Beiträge

noe

noe

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
noe

noe

Geschrieben
  • Autor
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
_n4p_

_n4p_

Geschrieben
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
noe

noe

Geschrieben
  • Autor
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
etreu

etreu

Geschrieben
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
_n4p_

_n4p_

Geschrieben
Geschrieben

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 ...

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...