Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Themen

PHP forms

Gast noe
Gast noe
in Skript- und Webserverprogrammierung

Empfohlene Antworten

Veröffentlicht

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

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

nope...

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

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.

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.

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

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.

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

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

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

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.