HTML & CSS for begyndere (del 46): Kontaktformularen (1)

Jeg går herfra ud fra, at I opretter en ekstra HTML-fil. Jeg gemmer denne under navnet kontakt.html. kontakt.html er placeret på samme niveau som den allerede velkendte index.html.

I denne første del udføres de grundlæggende indstillinger på formularen. Ting som afrundede kanter, farvegradienter osv. vil følge i den næste vejledning.

Inde i kontakt.html oprettes formularen. Formularen defineres inden for div-området med klassen content. Overvej derefter, hvilke felter der skal oprettes. Jeg har besluttet mig for at indsamle følgende oplysninger:

• Navn
• E-mail-adresse
• Kommentar

I skal naturligvis selv beslutte, hvilke oplysninger I ønsker at indhente. Generelt anbefaler jeg dog kun at indsamle de faktisk nødvendige data. De fleste besøgende på hjemmesider skyr nemlig omfattende formularer. Så hold det kort.

Grundstrukturen af min formular ser således ud:

<div class="content">
   <form class="form" action="#" method="post">
   <fieldset>
   <legend>Kontakt os</legend>
   <ol>
      <li>
      <label for="name">Navn:</label>
      <input type="text" name="name" id="name" value="" />
      </li>
      <li>
      <label for="email">E-mail-adresse:</label>
      <input type="text" name="email" id="email" value="" />
      </li>
      <li>
      <label for="comment">Kommentar:</label>
      <textarea cols="32" rows="7" name="content" id="content"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="submit" id="submit" value="Send" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

Formularen indeholder ikke umiddelbart nogen særligheder. Omkring formularets felter er en fieldset-definition anvendt. Hvordan man opretter formularets felter, og hvad label-elementerne handler om, blev allerede beskrevet tilstrækkeligt. På dette tidspunkt er fokus derfor på formularlayoutet.

Når man ser resultatet i browseren, vises der indledningsvis en formular, der ikke er særlig tiltalende.





Naturligvis skal der gøres forbedringer.

Først og fremmest gøres der grundlæggende oplysninger om formularen.

form {
   padding: 3px 0 0;
   margin: 10px auto;
   width: 550px;
 }

Her defineres ydre og indre afstande. Derudover sættes der en bredde på 550 pixel for formularen.

Vi fortsætter med fieldset-udformningen.

fieldset {
   padding: 10px 20px 25px;
 }

Også her defineres afstandene.

Selv formularfelterne er oprettet inden for en ordnet ol-liste.

ol {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

For at denne liste ikke visuelt længere skal opfattes som en liste, bruges list-style-type: none;. Derudover sættes kanter og indvendig afstand til henholdsvis 0.

I næste skridt defineres listeelementerne. Disse flyder til venstre og har en indvendig afstand på 10 pixel.

li {
   float: left;
   padding: 10px;
 }

Der er også en særlighed med hensyn til knappen nederst i formularen. Den skal højrejusteres.

li.button {
   float: none;
   clear: both;
   text-align: right;
}

Formularoverskriften

Lad os nu dedikere os til legend-elementet. Herover defineres formularoverskriften.





Definitionen for overskriften ser således ud:

fieldset legend {
   font-weight: bold;
   font-size: 22px;
   margin: 20px 0 0 10px;
}

Beskrivelserne

Label-elementet er også stødt på i denne serie. Via dette label kan der etableres en logisk forbindelse mellem feltbetegnelsen og det faktiske formularfelt. Der er i øvrigt en særegenhed ved CSS-definitionen her.

label {
   display: block;
   cursor: pointer;
   font-weight: bold;
   line-height: 24px;
}

Jeg udstyrer label-elementet bl.a. med en cursor-angivelse. Derved signaliseres det for besøgende, at feltbetegnelserne er klikbare. Hvis de klikker på en feltbeskrivelse, indsættes markøren automatisk i det tilhørende felt.

Formularfelterne udformes

Næste skridt er at udforme de faktiske formularfelter. Først og fremmest oplyses der generelle oplysninger om input og textarea.

input, textarea {
   color: #3399FF;
   border: 1px solid #3399FF;
   font: 13px Helvetica, Arial, sans-serif;
   padding: 8px 10px;
   width: 190px;
}

Dette drejer sig udelukkende om designmæssige ting. Der skal lægges særlig vægt på rammerne. Så snart markøren sættes i et felt, skifter rammen farve. Det er i øvrigt ikke kun en æstetisk aspekt. Faktisk hjælper det også besøgende med at udfylde formularen. Så de kan altid se, i hvilket felt markøren befinder sig.

Nu følger nogle oplysninger om det flerlinjede tekstinputfelt.

textarea {
   width: 430px;
   overflow: auto;
 }

Bredden på dette felt er fastsat til 430 pixels. Lidt mærkeligt kan instruktionen overflow: auto måske virke ved første øjekast i forbindelse med flerlinjede inputfelter. Denne linje skyldes ældre versioner af Internet Explorer. Faktisk viste denne browser også rullebjælker i flerlinjede inputfelter, selv når det ikke var nødvendigt. Med overflow: auto kan dette skønhedsproblem undgås.

Design submit-knappen

For øjeblikket ser sende-knappen ret skrabet ud. Det vil ændre sig nu. Resultatet vil se sådan ud:





Forskellige egenskaber tildeles knappen.

• Baggrundsfarve

• Skrifttype

• Ramme

• Afstande

Den tilhørende CSS-syntaks er som følger:

input[type="submit"] {
   background-color: #3399FF;
   color: #fff;
   cursor: pointer;
   font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
   border: 1px solid #000;
   padding: 5px 10px;
   width: auto;
 }

Måske værd at nævne her er angivelsen input[type="submit"]. Gennem denne selector kan der tilgås input-elementer, som har attribut-værdi-kombinationen type="submit".