Formulier elementen netjes uitlijnen
Onderstaand stuk code gebruik ik om mijn formulier elementen netjes onder elkaar uit te lijnen met links de titel, en rechts het element.
Dit werkt verder prima. Maar in IE is is het gebruik van de <br /> weer verplicht, omdat hij anders niet die formulierelementen uitlijnt.
Heeft iemand enig idee of die <br /> echt nodig is, of is er een mooie andere oplossing voor?
Dit is mijn code:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form method="POST" action="">
<label for="title">Titel</label> <input type="text" name="title" id="title" size="50" /><br />
<label for="keyword">Keyword (page/<i>naam</i>)</label> <input type="text" name="keyword" id="keyword" size="50" /><br />
<label for="is_menu">Toevoegen aan hoofdmenu</label><input type="checkbox" name="is_menu" id="is_menu" /><br />
etc...
</form>
<label for="title">Titel</label> <input type="text" name="title" id="title" size="50" /><br />
<label for="keyword">Keyword (page/<i>naam</i>)</label> <input type="text" name="keyword" id="keyword" size="50" /><br />
<label for="is_menu">Toevoegen aan hoofdmenu</label><input type="checkbox" name="is_menu" id="is_menu" /><br />
etc...
</form>
?>
En de CSS die erbij hoort:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
form label {
display: block;
width: 200px;
float : left;
margin-top: 4px;
clear:both;
}
display: block;
width: 200px;
float : left;
margin-top: 4px;
clear:both;
}
Of kent iemand nog wat beters verder om formulier elementen netjes uit te lijnen op correcte wijze?
(mensen die over tabels beginnen krijgen een pak voor de broek ;-) )
Gewijzigd op 23/06/2010 00:22:05 door - Ariën -
Code (php)
1
2
3
4
5
2
3
4
5
<form method="POST" action="">
<p><label for="title">Titel</label> <input type="text" name="title" id="title" size="50" /></p>
<p><label for="keyword">Keyword (page/<i>naam</i>)</label> <input type="text" name="keyword" id="keyword" size="50" /></p>
<p><label for="is_menu">Toevoegen aan hoofdmenu</label><input type="checkbox" name="is_menu" id="is_menu" /></p>
</form>
<p><label for="title">Titel</label> <input type="text" name="title" id="title" size="50" /></p>
<p><label for="keyword">Keyword (page/<i>naam</i>)</label> <input type="text" name="keyword" id="keyword" size="50" /></p>
<p><label for="is_menu">Toevoegen aan hoofdmenu</label><input type="checkbox" name="is_menu" id="is_menu" /></p>
</form>
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
form label {
display: block;
width: 200px;
float : left;
}
form p {
overflow: hidden; /* Werkt het zelfde als een clearboth na een floating iets */
margin: 0px 0px 4px 0px;
}
display: block;
width: 200px;
float : left;
}
form p {
overflow: hidden; /* Werkt het zelfde als een clearboth na een floating iets */
margin: 0px 0px 4px 0px;
}
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<form ...>
<fieldset>
<legend>Formulier naam</legend>
<dl>
<dt><label>...</label></dt>
<dd><input...></dd>
</dl>
</fieldset>
</form>
<fieldset>
<legend>Formulier naam</legend>
<dl>
<dt><label>...</label></dt>
<dd><input...></dd>
</dl>
</fieldset>
</form>
Want voor zo ver ik weet mag en kan dit gewoon.
Gewijzigd op 23/06/2010 09:37:38 door Joakim Broden
Oetzie en mijn achternaam op 23/06/2010 09:37:19:
Aar anoniem? Wat bedoel je?
Want voor zo ver ik weet mag en kan dit gewoon.
Want voor zo ver ik weet mag en kan dit gewoon.
Dat het kan geloof ik graag, maar maar of het mag.
Lees eens: http://home.parse.nl/~michiel/semantiek.html
Een appel kan je ook schillen met een Samurai-zwaard en een autoband kan je oppompen met een fietspomp. Het feit dat het volgens de validator kan geloof ik wel, 'maar of het hoort' is waar het om gaat, en dat weet de Validator natuurlijk weer niet.
Gewijzigd op 23/06/2010 11:19:15 door - Ariën -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
while($product = mysql_fetch_object($query))
{
echo "<tr><form action=\"add.php\" method=\"post\">\n";
echo "<input type=\"hidden\" name=\"product_id\" value=\"".$product->id."\" />";
echo "<tr> € ".$product->prijs." ";
echo "<td>Aantal: <input type=\"text\" name=\"aantal\" size=\"2\" maxlength=\"2\" value=\"1\" />\n </td>";
echo "<td><input type=\"submit\" value=\"Toevoegen\" /></td>";
echo '<input type="hidden" name="soort" value=" " />';
echo "</form>\n </td>";
}
?>
{/code]
while($product = mysql_fetch_object($query))
{
echo "<tr><form action=\"add.php\" method=\"post\">\n";
echo "<input type=\"hidden\" name=\"product_id\" value=\"".$product->id."\" />";
echo "<tr> € ".$product->prijs." ";
echo "<td>Aantal: <input type=\"text\" name=\"aantal\" size=\"2\" maxlength=\"2\" value=\"1\" />\n </td>";
echo "<td><input type=\"submit\" value=\"Toevoegen\" /></td>";
echo '<input type="hidden" name="soort" value=" " />';
echo "</form>\n </td>";
}
?>
{/code]
Gewijzigd op 23/06/2010 16:44:13 door John D
Oetzie en mijn achternaam op 23/06/2010 11:33:03:
mhhh ok, dan gebruik je toch <br />? :) Trouwens ik pomp men banden van mijn auto altijd gewoon met mijn fiets pomp :P
Als jij moeite en moeilijk wilt doen, ik houd je niet tegen ;-)
John D op 23/06/2010 16:32:06:
Hmmm: mensen die over tabels beginnen krijgen een pak voor de broek. Ik heb mijn eerste en enige website wel met tabels gedaan.
Toch blijft het een keuze die je voor je zelf af kan wegen. Maar als je met tables in tables aan het werken bent, en opeens erachter komt dat je liever een kolom op een andere plek wilt plaatsen, dan is het een flink gewurm met de table-framework die je dan hebt. met CSS is het heel makkelijk aan te passen gelukkig. En met enkele regels kan je al meer aanpassen dan met een framework met tabellen.
Eigenlijk is het gewoon het beste de dingen die je ter beschikking hebt (de HTML-tags) op de juiste manier te gebruiken zodat het weinig inspanning en moeite kost. Dat is nou de 'semantiek' die ik bedoel, en uitgelegd worden door Michiel in het genoemde artikel.
Tabellen zijn doorgaans meer bedoeld voor tabulaire overzichten, zoals prijslijsten i.p.v layout indeling.
Gewijzigd op 23/06/2010 22:36:40 door - Ariën -