Jag antar att ni skapar en extra HTML-fil. Jag sparar den i alla fall under namnet kontakt.html. kontakt.html finns på samma nivå som index.html som ni redan känner till väl.
I denna första del görs de grundläggande inställningarna för formuläret. Saker som rundade hörn, färgförlopp osv. kommer sedan i nästa handledning.
Inom kontakt.html skapas formuläret. Formuläret definieras inom div-området med klassen content. Fundera därefter på vilka fält som ska skapas. Jag har beslutat att fråga efter följande information:
• Namn
• E-postadress
• Kommentar
Ni måste självklart bestämma vilken information ni vill få. Generellt rekommenderar jag dock att endast begära in de faktiskt nödvändiga data. De flesta besökare på webbplatser undviker nämligen omfattande formulär. Håll det kortfattat.
Den grundläggande strukturen för mitt formulär ser ut som följer:
<div class="content">
<form class="form" action="#" method="post">
<fieldset>
<legend>Kontakta oss</legend>
<ol>
<li>
<label for="name">Namn:</label>
<input type="text" name="name" id="name" value="" />
</li>
<li>
<label for="email">E-postadress:</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="Skicka" />
</li>
</ol>
</fieldset>
</form>
</div>Formuläret innehåller till att börja med inga särdrag. En fieldset-definition har använts runt om formulärfälten. Hur man skapar formulärfält och vad label-elementen innebär har redan beskrivits tillräckligt. På denna punkt bör fullt fokus därför ligga på formateringen av formuläret.
När man ser resultatet i webbläsaren visas till att börja med ett ganska oattraktivt formulär.
Naturligtvis behöver detta förbättras.
Först görs grundläggande angivelser för formuläret.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Här definieras ytter- och inre marginaler. Dessutom sätts en bredd på 550 pixlar för formuläret.
Vidare med fieldset-formateringen.
fieldset {
padding: 10px 20px 25px;
}
Själva formulärfälten är skapade inom en ordnad ol-lista.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
För att denna lista inte optiskt ska se ut som en lista används list-style-type: none;. Dessutom sätts kanter och inre marginal till 0 vardera.
I nästa steg definieras listpunkterna. Dessa lutas till vänster och har en inre marginal på 10 pixlar.
li {
float: left;
padding: 10px;
}
Det finns en särskild sak att notera om knappen som placeras under formuläret. Denna ska justeras till höger.
li.button {
float: none;
clear: both;
text-align: right;
}Formulärrubriken
Låt oss nu ägna oss åt legend-elementet. Genom detta definieras formulärrubriken.
Definitionen för rubriken ser ut så här:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Beskrivningarna
label-elementet har även tidigare behandlats inom denna serie. Genom detta label kan en logisk koppling skapas mellan fältbeskrivningen och det faktiska formulärfältet. När det gäller CSS-definitionen finns det förresten en särskildhet här.
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Jag förser label-elementet bl.a. med en cursor-specifikation. Det signalerar för besökarna att fältbeskrivningarna går att klicka på. Om de faktiskt klickar på en fältsbeskrivning, placeras automatiskt markören i det tillhörande fältet.
Formulärfälten formateras
I nästa steg formateras de faktiska formulärfälten. Först görs allmänna angivelser om input och textarea.
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Det handlar endast om designmässiga saker. Särskild uppmärksamhet bör riktas mot ramarna. När man placerar markören i ett fält ändras färgen på ramen. Detta är inte bara en estetisk aspekt. Faktum är att det också hjälper besökarna att fylla i formuläret. På så sätt ser de alltid var markören för närvarande befinner sig.
Nu följer några specifikationer för det flerradiga textinmatningsfältet.
textarea {
width: 430px;
overflow: auto;
}
Bredden på detta fält är satt till 430 pixlar. Något som kan verka konstigt vid första anblicken är instruktionen overflow: auto i samband med flerradiga inmatningsfält. Denna rad beror på äldre versioner av Internet Explorer. Faktum är att den webbläsaren visade skrollfält även i flerradiga inmatningsfält när det egentligen inte var nödvändigt. Genom overflow: auto kan detta skönhetsproblem undvikas.
Designa Skicka-knappen
För närvarande är Skicka-knappen ganska enkel. Det kommer att ändras nu. Resultatet kommer att se ut så här: 
Knappen tilldelas olika egenskaper.
• Bakgrundsfärg
• Utseende på texten
• Ram
• Avstånd
Den tillhörande CSS-syntaxen ser ut på följande sätt:
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;
}
Det kan vara värt att nämna specifieringen input[type="submit"] här. Genom denna selektor väljs input-element som har attribut-värd-kombinationen type="submit".
