[Time2Die]

Wie stehen das "for="-Attribut im <label> und das "id="-Attribut im <input> zueinander?

Die beiden stehen ja irgendwie in Verbindung. Müssen für eine barrierefreie Website in den beiden Attributen das selbe drinstehen?

Und noch was:

Wenn ich per POST oder GET den Inhalt aus einem <input type="text"> oder <input type="textarea"> übetragen will, wo muss ich was hinschreiben?

Das tut man doch normalerweise mit einem value... .... Aber was hier im Value steht, steht dann nur als vorgefertigter Text im Textfeld...

[Vertaler]

Das <input>-Element mit der Identifikation X wird vom <label>-Element mit dem Attribut for="X" angesprochen. Da Identifikationswerte eindeutig sind (sein sollten), passt das auch ganz gut. Natürlich wirkt sich das nur auf <input type="radio"> und <input type="checkbox"> aus.

Wenn du dein Formular mit der Methode GET abschickst (<form method="get">), werden die Werte aus den <input>-Elementen als Parameter mit ihren Namen als Attribute an die URL des aufgerufenen Skripts angehängt (Attribut action im <form>-Element).

Beispiel:

<form method="get" action="index.php">
<input id="anfang" name="seite" type="radio" value="1" /> <label for="anfang">hier gehts zum Anfang</label><br />
<input id="ende" name="seite" type="radio" value="2" /> <label for="ende">hier gehts zum Ende</label><br />
<input type="submit" value="Abschicken" />
</form>

Wenn du das abschickst, kommst du danach zur URL index.php?seite=1 bzw. index.php?seite=2 im gleichen Verzeichnis wie das Dokument, in welchen das Formular steht.

Bei der Übergabemethode POST ist das etwas anders, hier werden die Daten per HTTP-Request zum Server geschickt, nicht über die URL. Verschiedene Programmiersprachen können die POST-Parameter dann auslesen, in PHP geht das zum Beispiel über das global verfügbare assoziative Array $_POST.
Auf die GET-Parameter kann man entsprechend über das Array $_GET zugreifen.

[Time2Die]

Das <input>-Element mit der Identifikation X wird vom <label>-Element mit dem Attribut for="X" angesprochen. Da Identifikationswerte eindeutig sind (sein sollten), passt das auch ganz gut. Natürlich wirkt sich das nur auf <input type="radio"> und <input type="checkbox"> aus.

Wenn du dein Formular mit der Methode GET abschickst (<form method="get">), werden die Werte aus den <input>-Elementen als Parameter mit ihren Namen als Attribute an die URL des aufgerufenen Skripts angehängt (Attribut action im <form>-Element).

Beispiel:

<form method="get" action="index.php">
<input id="anfang" name="seite" type="radio" value="1" /> <label for="anfang">hier gehts zum Anfang</label><br />
<input id="ende" name="seite" type="radio" value="2" /> <label for="ende">hier gehts zum Ende</label><br />
<input type="submit" value="Abschicken" />
</form>

Wenn du das abschickst, kommst du danach zur URL index.php?seite=1 bzw. index.php?seite=2 im gleichen Verzeichnis wie das Dokument, in welchen das Formular steht.

Bei der Übergabemethode POST ist das etwas anders, hier werden die Daten per HTTP-Request zum Server geschickt, nicht über die URL. Verschiedene Programmiersprachen können die POST-Parameter dann auslesen, in PHP geht das zum Beispiel über das global verfügbare assoziative Array $_POST.
Auf die GET-Parameter kann man entsprechend über das Array $_GET zugreifen.

Danke für die Infos, desn Großteil wusste ich aber schon.

Das hat aber meine Frage nicht beantwortet.

Bei den Radiobuttons z.B. ist ja das was im Value steht auschlaggebend beim senden.
Wenn ich einen Radiobutton mit dem value "test" habe, dies dann z.B. in eine Datenbank übertragen möchte, müsste ich dann in der Übertragungsdatei
$testvariable=$_POST['test] schreiben um das dann auch als Variable zu deklarieren.

Wie mach ich das mit einem Textfeld?

Wie gesagt, der value in einem Textfeld oder einer Textarea bestimmt ja hier nur was schon standardmäßig drinsteht (man kennt das ja bei einigen Formularen, wo in einem Textfeld schon drinsteht "Vorname eingeben" oder so).

[Satans Krümelmonster]

Wenn du

<form action="index.php" method="post">
<textarea name="textarea_name"></textarea>
</form>

abschickst, wird das, was du eingetragen hast, in der Variablen $_POST[textarea_name] gespeichert.

Was du da mit der Value geschrieben hast, ist totaler Unsinn. Das "name"-Attribut ist entscheidend für den Array-Key. - Bei allen Form-Feldern

[Time2Die]

Wenn du

<form action="index.php" method="post">
<textarea name="textarea_name"></textarea>
</form>

abschickst, wird das, was du eingetragen hast, in der Variablen $_POST[textarea_name] gespeichert.

Was du da mit der Value geschrieben hast, ist totaler Unsinn. Das "name"-Attribut ist entscheidend für den Array-Key. - Bei allen Form-Feldern

Vielen Dank!

Noch eine Frage (passt eher nicht zum Thema):

Angenommen ich mache einen Texteinzug und benutze dazu eine Maßeinheit, gibt es dann so etwas wie "websichere" Maßeinheiten?

Damit meine ich, dass der Texteinzug IMMER gleich ist, egal wie viel Zoll der Bildschirm hat oder mit welcher Auflösung der User fährt.

[Satans Krümelmonster]

ja, px sollte das sein, was du suchst.

[Vertaler]

Etwas anderes: Wenn du etwas, das von einem Formular kommt, in eine MySQL-Datenbank per PHP-Funktion mysql_query() einträgst (was wohl das gängigste Verfahren ist), solltest du auf jeden Fall vorher mysql_real_escape_string() nutzen, ansonsten öffnest du der SQL-Injection Tür und Tor.

[Chris]

ja, px sollte das sein, was du suchst.

Die Größe eines Pixels ist nicht festgelegt, weiß nicht ob das nun also die beste Lösung ist.

Damit meine ich, dass der Texteinzug IMMER gleich ist, egal wie viel Zoll der Bildschirm hat oder mit welcher Auflösung der User fährt.

Wo nachgemessen? Auf dem Monitor? Es gibt so gesehen keine websichere Einheit. Prozentuale Einheiten sind für sowas eventuell noch das sinnvollste, 10% des sichtbaren Bereiches sind nunmal immer 10%. Egal wie breit das Bild nun ist. Andererseits sind 20 px auf einem Mobiltelefon schon viel zu viel, auf einem 24-Zöller aber zu vernachlässigen.
Sich von der Textgröße abhängig zu machen ist oft ein guter Weg, die Einheit dafür nennt sich em. Senkt der Nutzer nun die Textgröße verkleinert sich auch der Einzug, relativ gesehen bleibt er gleich, aber kleinere oder größere Schrift kann für den Nutzer angenehmer sein.

[Time2Die]

Noch eine Frage...

Ich habe bei einem Formular folgendes:

<div class="daten"><label for="Bauvorhaben">Bauvorhaben</label></div>
<div class="input"><input type="text" name="bauvorhaben" id="bauvorhaben" size="40" /></div>

Ich will Abstände zwischen dem Label und dem Input regeln. Wenn man das ohne tables machen will, kommt man wohl nicht drum, Label und Input seperat in einen eigenen div-Bereich zu tun.

Hier stehen die Style-Anweisungen:

.daten
{
margin-left:40%;
}

.input
{
margin-left:50%;
}

Die Einzüge stimmen, jedoch steht der Input eine Zeile unterhalb des Labels.

[Bild: beispiel.jpg]


Wie kann ich das umgehen?

[Kylex]

du kannst das zeilenweise floaten lassen
das prinzip:

<div class="row">
<div class="label">...</div>
<div class="input">...</div
</div>

div.row {
clear: both;
overflow: hidden;
}
div.label {
float: left;
}
div.input {
float: left;
}

clear hebt den float auf und beschränkt ihn auf die kindelemente, bei clear sollte man immer auch overflow: hidden; verwenden, da einige browser das ganze sonst suboptimal darstellen

in deinem fall könnstest du dem input-div auch float: right; geben und den abstand von label und input zueinander regeln, indem du dem div, was die rows umgibt, eine breite gibst, die sich aus den breiten der label-divs, dem abstand und der breite der inputs zusammensetzt - in diesem fall brauchst du keine margins, den abstand der labels nach links würde ich über das umgebende div der rows regeln
andernfalls würde ich davon abraten, prozentwerte bei margin zu nutzen...auf was sollen sich die prozent überhaupt beziehen? ...wenn du mehrere inputs hast, sollten die nicht untereinander gleich ausgerichtet stehen?
desweiteren musst du, falls dir der ie6 wichtig ist, jeden margin eines floatenden elements für den ie6 halbieren, da der ie6 margins von floatenden elementen verdoppelt

[Time2Die]

Ich kapier das nicht, wie du das meinst:

in deinem fall könnstest du dem input-div auch float: right; geben und den abstand von label und input zueinander regeln, indem du dem div, was die rows umgibt, eine breite gibst, die sich aus den breiten der label-divs, dem abstand und der breite der inputs zusammensetzt - in diesem fall brauchst du keine margins, den abstand der labels nach links würde ich über das umgebende div der rows regeln

Könntest du es mir bitte anhand eines Beispiels demonstrieren?

Oder andernfalls: ist es heutzutage eigentlich noch legitim ein Formular mit einer Tabelle zu machen?
Damit hätte ich keine Probleme was die Abstände anginge.
Aber jeder sagt immer "nein ist nicht barrierefrei" - inwiefern soll eine Tabelle denn bitte die Barrierefreiheit einschränken?

[Kylex]

kann ich, andeutungsweise:

<div class="formWrapper">
<form ...>
<div class="row">
<div class="label">...</div>
<div class="input">...</div
</div>
</form>
</div>

div.formWrapper {
width: 340px;
margin-left: 20px;
}
div.row {
clear: both;
overflow: hidden;
}
div.label {
width: 120px;
float: left;
}
div.input {
width: 180px;
float: right;
}

in diesem beispiel sind alle labels linksbündig (und das gesamte formular hat 20px abstand nach links) und alle inputs rechtsbündig und der abstand der inputs von den labels regelt sich über die breite von div.formWrapper ...hier sind es messbare 40px, da 340 - 120 - 180 = 40
wenn du div.label und div.row hintergrundfarben gibst, kannst du auch sehr gut sehen, was passiert, wenn du einzelne werte änderst

Oder andernfalls: ist es heutzutage eigentlich noch legitim ein Formular mit einer Tabelle zu machen?
Damit hätte ich keine Probleme was die Abstände anginge.
Aber jeder sagt immer "nein ist nicht barrierefrei" - inwiefern soll eine Tabelle denn bitte die Barrierefreiheit einschränken

tabellen sollte man generell nicht für layout-fragen verwenden
barierefreiheit ist mir persönlich egal, tabellen sind aber unflexibel und fehleranfällig
wenn du ein formular baust, indem es unterschiedlich große elemente gibt und in den zeilen auch eine unterschiedliche anzahl von elementen vorkommen kann, ist die methode mit den row-divs sehr einfach, wenn man sie einmal verstanden hat, zudem ist sie extrem flexibel und durch css-klassen lässt sich das layout sehr schnell anpassen
mit tabellen hätte man viel mehr arbeit und letztendlich vergeudete zeit

[Time2Die]

Vielen herzlichen Dank!

Es funktioniert! Dass mit dem float, clear und overflow habe ich zwar hierbei nicht so kapiert, aber das werde ich mir einfach auswendig merken müssen.

[Kylex]

bitte

float regelt ursprünglich den textumfluss
wenn du z.b. ein bild und einen text hast, kann es ganz nützlich sein, dass das bild links steht und der text rechts neben dem bild beginnt und wenn er ausreichend lang ist, links unter dem bild weitergeht
diese eigentlich komplexe eigenschaft kann man erhalten, indem man dem bild eine einzige eigenschaft, nämlich float:left; verpasst - das bild steht links und wird rechts umflossen

dieses prinzip kann man auch auf andere elemente mit fester breite anwenden und so z.b. divs nebeneinander anordnen lassen

clear ist wichtig, um dem browser mitzuteilen, auf welche elemente float einfluss haben soll, denn man gibt ja nicht den elementen, die umfließen sollen float, sondern den elementen, die umflossen werden sollen
float ist sozusagen gierig und will alles umfließen lassen, was sich in seiner baum-ebene befindet, diese gier muss man mit clear begrenzen und float aufheben

overflow dient ursprünglich dazu, festzulegen, wie sich ein element verhalten soll, wenn sich etwas in ihm befindet, was größer ist als sein eltern-element
mit overflow kann man z.b. scrollbalken immer anzeigen lassen
overflow: hidden; legt dagegen fest, dass alles, was größer ist, abgeschnitten und damit nicht angezeigt wird

detaillierter kannst du das z.b. bei selfhtml oder css4you nachlesen

[Time2Die]

Okay, habe doch noch eine Frage:

Wie würde es aussehen, wenn ich drei solche Formulare nebeneinader in einem zentrierten div-Bereich haben will?

Hab da schon mit dem div.row rumprobiert, komm aber nicht drauf.