Formularaufbau
lexus_mod
- html
0 Ole0 Der Martin
Hallo,
ich möchte ein Formular erstellen, kann ich das so wie unten dargestellt anlegen oder geht das einfacher oder ist das volliger schrott was ich da gemacht habe?
danke und grüße
lexus_mod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
div#wrap{
position:absolute;
width:300px;
}
div#wrap ul{
list-style:none;
padding:0;
}
div#wrap li.fildName{
float:left;
width:100px;
padding-bottom:10px;
}
div#wrap li.fildInput{
float:left;
width:200px;
padding-bottom:10px;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li class="fildName">Anrede</li>
<li class="fildInput">
<input type="text" name="1" id="1" />
</li>
<li class="fildName">Name</li>
<li class="fildInput">
<input type="text" name="1" id="1" />
</li>
<li class="fildName">E-Mail</li>
<li class="fildInput">
<input type="text" name="1" id="1" />
</li>
</ul>
</div>
</body>
</html>
Hi
ein paar sachen sind mir aufgefallen
so long
Ole
(8-)>
Hi
- dir fehlt schon mal <form> mit den entsprechenden Attributen.
ja, das stimmt und submit fehlt auchnoch.
- Ids dürfen nur einmal vergeben werden.
Das ist in diesem Fall doch so oder nicht?
- Warum eine Liste?
Darum gehts mir, kann ich das in einer Liste aufbauen oder nicht und welche Probleme können aufreten (Browser technich). Welche Tags für formulare sind gänig?
Grüße
Hi
- Ids dürfen nur einmal vergeben werden.
Das ist in diesem Fall doch so oder nicht?
Du hast dreimal die id "1" vergeben.
Darum gehts mir, kann ich das in einer Liste aufbauen oder nicht und welche Probleme können aufreten (Browser technich). Welche Tags für formulare sind gänig?
Das ist imho schon eine Geschmackssache. Ob Liste oder Tabelle oder weder noch, sondern mit <label>...da gehen die Meinungen auseinander.
Solltest du eine Liste bevorzugen würde ich einer Definitionsliste den Vorzug gegenüber ul geben.
so long
Ole
(8-)>
Du hast dreimal die id "1" vergeben.
ups... recht haste.
Das ist imho schon eine Geschmackssache. Ob Liste oder Tabelle oder weder noch, sondern mit <label>...da gehen die Meinungen auseinander.
Solltest du eine Liste bevorzugen würde ich einer Definitionsliste den Vorzug gegenüber ul geben.
prima danke
have a nice day
Hi,
ich möchte ein Formular erstellen, kann ich das so wie unten dargestellt anlegen oder geht das einfacher oder ist das volliger schrott was ich da gemacht habe?
abgesehen davon, dass IDs dokumentweit eindeutig sein müssen (darauf hat Ole ja schon hingewiesen), dürfen sie auch nicht mit einer Ziffer beginnen.
<div id="wrap">
<ul>
<li class="fildName">Anrede</li>
<li class="fildInput">
<input type="text" name="1" id="1" />
</li>
<li class="fildName">Name</li>
<li class="fildInput">
<input type="text" name="1" id="1" />
</li>
<li class="fildName">E-Mail</li>
<li class="fildInput">
<input type="text" name="1" id="1" />
</li>
</ul>
</div>
Das erste, was mir auch auffiel: Hier fehlt das eigentliche Formular.
Und dann: Was hat das umschließende div#wrap für einen Zweck? Die dafür angegebenen Formatierungen kannst du ebensogut auf das ul-Element anwenden (oder dann eben auf das form-Element), das div ist in jedem Fall überflüssig.
Zur Wahl der Struktur ... Hmm, ich habe noch nie gesehen, dass jemand eine Liste verwendet, um Formularelemente zu strukturieren. Ist aber eigentlich kein schlechter Gedanke - das Formular kann man selbstverständlich als Liste von Formularelementen auffassen.
Ich würde aber nicht die Beschriftung und das input-Element als separate Listeneinträge auffassen, sondern eher folgende Struktur favorisieren:
<li>
<label ... >Beschriftung</label><input ... />
</li>
Das, finde ich, gibt die Semantik des Formulars besser wieder - eine Liste von Einträgen, die wiederum aus label und input bestehen. Wenn dann noch jedes input-Element eine ID bekommt, kannst du die Labels auch mit <label for="id"> auf das folgende input-Element beziehen. Eine Schachtelung <label><input /></label> fände ich zwar eleganter, aber das begreift der IE leider nicht.
So ersparst du dir nebenbei auch das Hantieren mit Klassen, denn du kannst bei dieser Struktur bequem label und input anhand des Element- und des Nachfahrenselektors erfassen.
So long,
Martin