Lav en pæn formular
Sat på siden 05-11-2004
Det er let at lave en formular pæn uden at bruge tabeller. Stylesheets er midlet.
Selve formular-koden ser måske sådan ud i HTML:
<form method="post" action="test.php">
<p>Dette er en
formular</p>
<p><label
for="navn">Navn:</label>
<input type="text" id="navn"
name="navn" size="30"></p>
<p><label
for="notat">Notat:</label>
<textarea id="notat"
name="notat" cols="30"
rows="5"></textarea></p>
<p><label
for="styresystem">Styresystem:</label>
<select
id="styresystem"
name="styresystem">
<option>Windows</option>
<option>Mac</option>
<option>Linux</option>
<option>DOS</option>
<option>Ægtefælle</option>
</select></p>
<p><input
type="submit" value="Sådan! Færdig."></p>
</form>
Resultatet er ikke imponerende, men med ganske få linjer stylesheet bliver det.
I et vedhæftet stylesheet eller indsat øverst i dokumentet laver du følgende:
form p {
width: 400px;
clear: both;
}
form p
label {
float: left;
}
form p input, form p textarea, form
p select {
float: right;
}
input[type=submit] { border: thin dashed #5C75A4; background-color: #D9DCE2; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; vertical-align: middle; }
Den nederste linje skal du kun have med, hvis du også ønsker at ændre knappens udseende.
Resultatet er jo nydeligt ;-)
Du kan også opleve formularen online på http://www.tips-og-tricks.com/eksempler/niceform.html
Bemærk, at hvis du ser formularen i MSIE, vil knappen ikke have ændret sig. Der er brugt godkendt stylesheet, men MSIE understøtter ikke dette fuldt ud.
Dette tip er kraftigt inspireret af bogen HTML Utopia: Designing Without Tables Using CSS, som er let at gå til og meget pædagogisk opbygget. Du vil aldrig mere bruge tabeller, hvis først du har læst denne bog.
Bemærk, at du gratis kan downloade de første kapitler af bogen og danne dig et indtryk: www.kortlink.com/cssbog