Om beter gebruik te maken van de form-helper en eindelijk een einde te maken aan die tables die een form zo groot maken, heb ik maar eens gekeken of ik een standaard manier kan vinden om het uitlijn effect van een table zo goed mogelijk na te bootsen in CSS. Een bijkomend voordeel is dat ik de form helper veel meer kan laten genereren en de code dus compacter wordt.
Na lezen over de form-helper in de docs (rtfm) heb ik het inlog formulier teruggebracht naar het volgende:
\views\users\login.ctp
<h2>Inloggen</h2>
<div id="formwrapper">
<?php echo $form->create('User', array('action' => 'login'));?>
<?php echo $form->input("username");?>
<?php echo $form->input("password");?>
<?php echo $form->end("Login"); ?>
</div>
Het meeste wat hierboven staat is vast duidelijk. De inputs leveren een label op + het input veld, zoals hieronder:
<div class="input text">
<label for="UserUsername">Username</label>
<input name="data[User][username]" type="text" value="" id="UserUsername" />
</div>
De
$form->end() levert een </form> op én een submit-button. Om dat netjes uitgelijnd te krijgen heb ik wat meer CSS nodig:
\webroot\css\stijlen.css
#formwrapper{
width: 350px;
border: 1px solid black;
text-align: right;
}
div > label{
float:left;
}
input[type=text]{
width: 15em;
}
input[type=password]{
width: 15em;
}
De truuk is als volgt: de wrapper, die de beschikbare breedte voor het form bepaalt, daarbinnen rechts uitlijnen voor de input-velden en een
float:left voor de labels. Werkt in elk geval in msie 7. ff 3 en opera 9. De vaste breedte van de wrapper kan nog een probleem opleveren: we'll cross that bridge when we get to it...Verder hoeft niets te worden gewijzigd: wat een mooie scheiding van presetatie en business logica! Van 30 naar 7 regels in 5 minuten...
Geen opmerkingen:
Een reactie posten