Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



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.

Formular uden CSS

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 ;-)

Formular pyntet med CSS

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

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|