php.de

Zurück   php.de > Webentwicklung > HTML, Usability und Barrierefreiheit

HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 17.07.2009, 21:53  
Neuer Benutzer
 
Registriert seit: 09.07.2009
Beiträge: 12
PHP-Kenntnisse:
Anfänger
Horst Stack befindet sich auf einem aufstrebenden Ast
Horst Stack eine Nachricht über Skype™ schicken
Standard Formular - Grundsätzliches zum Formatieren

Guten Abend,

ich möchte einem Formular ein einheitliches Aussehen verpassen. Einzelne Inputfelder, die zusammen mit dem dazugehörigen Label in einer Zeile stehen, lassen sich problemlos auf verschiedene Weise anpassen.
Mein Problem sind die Telefonnummern, sowie PLZ und der Ort. Auch die Mehrfachauswahl hätt' ich gerne "auf Breite". Ansätze waren mit Pixelangaben für width zu arbeiten, was ich eigentlich vermeiden wollte, da habe ich aber das Problem, wie der Browser die Zeichen zwischen den Feldern interpretiert. Grafik will ich auch nicht, weil ich "denke zu wissen" das das auch anders funktionieren kann. Hab' zig Sachen schon ausprobiert, auch die Tuts wie z.B. bei Einfach für alle durchgearbeitet, aber ich finde einfach nicht raus, wie ich das am geschicktesten mit der exakten Breite für alle Elemente anstellen soll.

HTML-Code:
...
<form action="foo" method="post">
	<fieldset>
		<legend>Pers&ouml;nliche Daten</legend>
		
		<!-- Start Anrede / Radiobuttons -->
		<fieldset class="radio_btn">
			<legend>Anrede: </legend>
				<input type="radio" id="herr" name="anrede" value="herr" checked="checked" />
				<label for="herr"> Herr </label>
				<input type="radio" id="frau" name="anrede" value="frau" />
				<label for="frau"> Frau </label>
		</fieldset>
		
		<!-- Start Daten / Auswahl verschiedenster Elemente -->
		<fieldset class="daten">
			<legend>Daten-gemischt: </legend>
				<label for="namen" class="left" >Namen etc.:</label>
				<input type="text" id="namen" name="namen" class="formtext" /><br />
				<label for="strasse" class="left" >Stra&szlig;e: </label>
				<input type="text" id="strasse" name="strasse" class="formtext"/>
				<label for="strNr">Nr.: </label>
				<input type="text" id="strNr" name="strNr" /><br />
				<label for="plz" class="left" >Plz.: </label>
				<input type="text" id="plz" name="plz" class="plz"/>
				<label for="ort">Ort: </label>
				<input type="text" id="ort" name="ort" /><br />
				<label for="telefon" class="left" >Telefon: </label>
				<input type="text" id="telefon" name="vorwahl" class="formtext"/> - 
				<input type="text" name="durchwahl" /><br />
			
				<label for="land" class="left" >Land: </label>
				<select name="land" id="land" class="formtext">
					<option value="">-- bitte w&auml;hlen --</option>
					<option value="DE">Deutschland</option>
					<option value="AU">&Ouml;sterreich</option>
					<option value="SU">Schweiz</option>
				</select><br />
			
			<label for="email" class="left" >E-Mail*: </label>
			<input type="text" id="email" name="email" class="formtext"/>	
		</fieldset>
		<input type="submit" value="absenden" />
	</fieldset>
</form>
...
Code:
body {
	font-size: x-small;
	font-family: Arial, Helvetica, sans-serif;
	}
	
.left {
	width: 13em;
	float: left;
	display: block;
	}

.formtext {
	margin: 2px 2px;
	padding: 3px 3px;
	width: 14em;
	}

.plz {
	margin: 2px 2px;
	padding: 3px 3px;
	width: 5em;
	}
Könnt' Ihr mir sagen, wie ich das am Besten anpacken kann. Wie es aussehen soll, habe ich im Anhang.

Vielen Dank, euer Horst
Miniaturansicht angehängter Grafiken
formular-grundsaetzliches-zum-formatieren-soll_solls_sein.jpg  
Horst Stack ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 17.07.2009, 22:02  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.266
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard

Du musst zunächst wissen, dass die Angabe des padding im <input>/<select>/.. zur Breite dazu gerechnet wird. Das heißt eine Breite von 100% und padding-left: 2px ergibt eine Breite von 100% + 2px. Mit sowas umzugehen ist sehr ungünstig. Versuch also auf das Mischen von Einheiten (% + absolut) zu verzichten.

Du kannst dich auch mal an floating-Bereichen ranwagen:

Code:
<div>
  <input type="text" style="width:100%" value="Straße" /></div>
<div>
  <div style="width:75%;float:left;margin:0;padding:0"><input type="text" style="width:100%" value="PLZ" /></div>
  <div style="width:24%;float:right;margin:0;padding:0"><input type="text" style="width:100%" value="Stadt" /></div>
  <br style="clear:both" />
</div>
Mehr dazu hier:
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
__________________
"Nuschel ich?" - "Was?"
Chriz ist offline   Mit Zitat antworten
Alt 17.07.2009, 22:07  
Neuer Benutzer
 
Registriert seit: 09.07.2009
Beiträge: 12
PHP-Kenntnisse:
Anfänger
Horst Stack befindet sich auf einem aufstrebenden Ast
Horst Stack eine Nachricht über Skype™ schicken
Standard

Super - vielen Dank. Mir ist auch sowas durch den Kopf gegangen mit den Prozentangaben, aber ich wußte nicht genau, wie ich es umsetzen kann. Also sind die divs doch unumgänglich.

... ich mach mich gleich wieder an die Arbeit.

EDIT: Klappt wunderbar. Auch mit dem ausgelagerten css. Mach da mal weiter und poste das Ergebnis. Wie seht Ihr das eigentlich mit den Telefonnummern? Ich habe mich entschieden, Telefon, sowie Telefax, als eine Variable zu speichern, also keine Vor- und Durchwahl anzubieten !?

Geändert von Horst Stack (17.07.2009 um 23:01 Uhr).
Horst Stack ist offline   Mit Zitat antworten
Alt 17.07.2009, 23:19  
Moderator
 
Benutzerbild von Chriz
 
Registriert seit: 11.05.2008
Beiträge: 6.266
Chriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer AnblickChriz ist ein wunderbarer Anblick
Standard

Normalisierung (Datenbank) – Wikipedia
Zitat:
Ob Inhalte atomar sind bzw. ob tatsächlich eine Wiederholungsgruppe vorliegt, lässt sich oft nur im Licht der Anwendung entscheiden: Wo z. B. für praktisch jede kommerzielle Anwendung eine Spalte „Telefonnummer“ (ohne Vor- & Durchwahlen) als atomar betrachtet werden darf, könnte es für einen Telekommunikationsbetreiber durchaus sinnvoll sein, weiter aufzuteilen: { .., Zifferngruppe1, Zifferngruppe2, Zifferngruppe3,.. }.
__________________
"Nuschel ich?" - "Was?"
Chriz ist offline   Mit Zitat antworten
Alt 17.07.2009, 23:39  
Neuer Benutzer
 
Registriert seit: 09.07.2009
Beiträge: 12
PHP-Kenntnisse:
Anfänger
Horst Stack befindet sich auf einem aufstrebenden Ast
Horst Stack eine Nachricht über Skype™ schicken
Standard

Yo, Bettlektüre - Danke Dir.

Die Telefon- und Telefaxnummer wird in diesem Fall nur einmal in der Datenbank gespeichert. Werde mir den Wikipedia-Artikel gleichmal zu Gemüte führen...
Poste morgen dann mal das Formular - läuft echt rund jetzt (... bis auf die ganzen divs, aber damit kann ich leben)
Horst Stack ist offline   Mit Zitat antworten
Antwort


Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
PHP: Formular Generator Zergling-new Tutorials 16 06.07.2010 03:14
Ergebnis von Formular in iFrame zeigen PsychoEagle HTML, Usability und Barrierefreiheit 2 22.07.2009 21:07
PDF Formular ausfüllen mit PHP Formular oomworld PHP Tipps 2009 1 26.03.2009 19:09
Wie würdet ihr das Formular submitten? pras Datenbanken 5 05.03.2009 21:33
Problem mit Formular, Daten an datenbank senden Aurec PHP Tipps 2008 11 20.11.2008 18:17
Wert aus Textfeld in neues Formular übernehmen (kein Submit) PsychoEagle HTML, Usability und Barrierefreiheit 9 02.01.2007 14:51
formular includen samspa5 PHP Tipps 2006 13 18.03.2006 11:37
[Erledigt] Formular in Formular HTML, Usability und Barrierefreiheit 4 19.10.2005 12:18
[Erledigt] Formular testen .... HTML, Usability und Barrierefreiheit 7 19.09.2005 14:03
[Erledigt] PHP Formular ~~wichtig~~ PHP Tipps 2005 27 29.05.2005 19:38
[Erledigt] Formular formatieren HTML, Usability und Barrierefreiheit 5 30.01.2005 13:45
Im Formular user abfragen? Datenbanken 3 06.01.2005 10:51
[Erledigt] Daten in einem Formular ausgeben und ändern PHP Tipps 2004-2 7 07.12.2004 17:22
Daten in Formular formatieren. PHP Tipps 2004 3 11.08.2004 12:47
[Erledigt] Daten in neuem Formular anzeigen PHP Tipps 2004 6 21.07.2004 10:44

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
php telefonnummer formatieren, http://www.php.de/html-usability-und-barrierefreiheit/57187-formular-grundsaetzliches-zum-formatieren.html, javascript telefonnummer formatieren, php formularfelder formatieren, php formular formatieren, <select name=\namen\> breite?, radio text input gemischt, php <input type=\text\ padding, php formularfelder breite, fieldset breite, form telefonnummer, formular schrift formatieren php, telefonnummer php formatieren, <fieldset am besten formatieren mit css, fieldset formatieren html, radio formatieren label inpiut, formtext form fieldset, php label formatieren, html fieldset breite, eingabeformulare der richtige grundsätzliches erscheinungsbild

Alle Zeitangaben in WEZ +2. Es ist jetzt 06:45 Uhr.




Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum