46 besökare, 1 medlem och 1 Student är online nu
Loopia

webdesign och HTML

Förutsättningar för att följa guiden

Den här guiden är en direkt fortsättning på guiden Formulär - forms » och om du vill veta mer om formulär börjar du med den guiden. Exemplen visar CSS-koden men ger inga detaljerade beskrivningar om vad koden innebär. Om du inte har grundkunskaper i CSS börjar du med guiden CSS - grunder »

Alla formulär i denna guide använder både attributen NAME och ID (trots att XHTML förordar att endast "id" ska användas). Anledningen är att "name" används av programkod som tex PHP och javascript. Om bara "id" används är risken stor att funktionerna blir felaktiga och det kan vara en bra idé att använda både "name" och "id" under en övergångsperiod .

 

Textfält <INPUT> och TEXTAREA

Formulärkontrollen <INPUT> finns i olika typer och du hittar dem i guiden Formulär - forms »

Oformaterat formulär

Exemplet nedan är oformaterat:







 

HTML-koden till exemplet:

<form method="post" action="" >

<label for="fnamn">Förnamn:</label><br />
<input type="text" name="fnamn" id="fnamn" placeholder="ditt förnamn"><br>

<label for="enamn">Efternamn:</label><br>
<input type="text" name="enamn" id="enamn" placeholder="ditt efternamn"><br>

<label for="epost">E-postadress:</label><br>
<input type="email" name="email" id="email" placeholder="din e-postadress">
<br>

<input type="submit" name="skicka" id="skicka" value="Skicka" />

</form>

CSS-formaterat formulär

Här är samma exempel med CSS-formatering:







 

HTML-Koden till exemplet:

<form name="formular" id="formular" method="post" action="" >

<label for="fnamn">Förnamn:</label><br />
<input type="text" name="fnamn" id="fnamn" placeholder="ditt förnamn"><br>

<label for="enamn">Efternamn:</label><br>
<input type="text" name="enamn" id="enamn" placeholder="ditt efternamn"><br>

<label for="epost">E-postadress:</label><br>
<input type="email" name="email" id="email" placeholder="din e-postadress">
<br>

<input type="submit" name="skicka" id="skicka" value="Skicka" />

</form>

CSS-Koden till exemplet:

@charset "utf-8";

#formular {
width: 600px;
border: 5px solid rgba(234,234,234,1.00);
border-radius: 10px;
background-color: rgba(225,225,225,1.00);
padding: 20px;
font-size: 16px;
}

#formular input[type=text],
#formular input[type=email] {
width: 100%;
padding: 10px 5px 10px 10px;
margin: 5px 0 15px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
}

#formular input[type=submit] {
width: 100%;
background-color: rgba(42,90,157,1.00);
color: rgba(255,255,255,1.00);
padding: 15px 20px;
margin: 10px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
}

#formular input[type=submit]:hover {
background-color: rgba(101,151,222,1.00);
}

/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#formular {
width: 90%;
}
}

Observera att formateringen i exemplet är begränsad att till gälla för formulär med ID #formular och formateringen anges för #formular input[type=text]

Om du bara har ett formulär behöver du inte referera till formulärets ID och det räcker då att ange formateringen för input[type=text]

Notera att formuläret är responsivt och använder:
@media only screen and (max-width: 768px)

Läs mer om responsiv CSS i guiden Responsive layout »

 

Fokus på fält

Om du vill att textmarkören ska placeras i ett fält när sidan laddas in kan du använda AUTOFOCUS i ett av fälten - se exempel här »

<input type="text" name="fnamn" id="fnamn" autofocus placeholder="ditt förnamn">

Använda pseudo-classen :focus

Med CSS kan du tilldela aktivt fält fokus. I exemplet nedan används pseudo-classen :focus som tilldelar fältet egenskaper när markören flyttas mellan fälten.

Klicka in markören och flytta med TABB för att se fokus:







CSS-koden för att tilldela kontrollerna input[type=text] och input[type=email] fokus:

#formular input[type=text]:focus,
#formular input[type=email]:focus {
background-color: rgba(253,255,184,1.00);
}

CSS-koden för att tilldela alla input fokus:

#formular input:focus {
background-color: rgba(253,255,184,1.00);
}

 

TEXTAREA

Formulärkontrollen TEXTAREA (fältet för meddelande) kan ha i flera fall dela samma format som övriga INPUT. Men i detta exempel gäller höjden gäller bara för detta fält. I exemplet är höjden 200px:








HTML-koden:

<label for="textarea">Meddelande:</label><br>
<textarea name="meddelande" id="meddelande"></textarea><br>

Om du har flera TEXTAREA i samma formulär så kan du ange olika ID för dem om du vill ha olika formatering. I exemplet nedan formateras alla textarea.

CSS-koden:

#formular textarea {
width: 100%;
height: 200px;
padding: 10px 5px 10px 10px;
margin: 5px 0 15px 0;
border: 2px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-family: inherit;
font-size: 18px;
}

Observera att formateringen i exemplet är begränsad att till gälla för formulär med ID "formular" med #formular textarea

Du kan ange endast textarea om formateringen det ska gälla TEXTAREA i alla formulär.

 

Lista, dropdownlista SELECT

Formulärkontrollen SELECT har begränsade möjligheter när det gäller formatering och du kan aldrig vara säker på att ditt valda format visas korrekt då utseendet varierar i olika webbläsare.

Här är ett exempel där SELECT används i samma formulär FORM som tidigare exempel ovan:

HTML-koden:

<form name="formular" id="formular" method="post" action="" >

<label for="select">Vilken är din favoritårstid?<br><br>
</label>

<select name="favoritarstid" id="favoritarstid">
<option>Välj årstid här!</option>
<option value="var">Vår</option>
<option value="sommar">Sommar</option>
<option value="host">Höst</option>
<option value="vinter">Vinter</option>
</select>

</form>

Om du har flera SELECT i samma formulär så kan du ange olika ID för dem om du vill ha olika formatering. I exemplet nedan formateras alla SELECT.

CSS-koden:

#formular {
width: 600px;
border: 5px solid rgba(234,234,234,1.00);
border-radius: 10px;
background-color: rgba(225,225,225,1.00);
padding: 20px;
font-family: "Roboto", "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
font-size: 16px;
}

#formular select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 5px;
background-color: rgba(242,242,242,1.00);
font-size: 16px;
}

/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#formular {
width: 90%;
}
}

Observera att formateringen i exemplet är begränsad att till gälla för formulär med ID #formular och formateringen anges för #formular select

Om du bara har ett formulär behöver du inte referera till formulärets ID och det räcker då att ange formateringen för select

Notera att formuläret är responsivt och använder:
@media only screen and (max-width: 768px)

Läs mer om responsiv CSS i guiden Responsive layout »

 

Knappar, buttons SUBMIT

Knappar finns av typen SUBMIT, RESET och BUTTON:

<input type="submit">  Skickar innehållet i ett formulär
<input type="reset">  Återställer innehållet i ett formulär
<input type="button">  Klickbar knapp som används i tex Javascript

Här är ett exempel där knapparna används i samma formulär FORM som tidigare exempel ovan:







HTML-koden:

<form name="formular" id="formular" method="post" action="" >

<label for="fnamn">Förnamn:</label><br />
<input name="fnamn" type="text" id="fnamn" placeholder="ditt förnamn"><br>
<label for="enamn">Efternamn:</label><br>
<input name="enamn" type="text" id="enamn" placeholder="ditt efternamn"><br>
<label for="epost">E-postadress:</label><br>
<input name="email" type="email" id="email" placeholder="din e-postadress">
<br>

<input type="submit" name="submit" id="submit" value="Skicka formuläret" />
<input type="reset" name="reset" id="reset" value="Återställ" />

</form>

CSS-koden:

#formular {
width: 600px;
border: 5px solid rgba(234,234,234,1.00);
border-radius: 10px;
background-color: rgba(225,225,225,1.00);
padding: 20px;
font-family: "Roboto", "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif;
font-size: 16px;
}

#formular input[type=text],
#formular input[type=email] {
width: 100%;
padding: 10px 5px 10px 10px;
margin: 5px 0 15px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
}

#formular input[type=text]:focus,
#formular input[type=email]:focus {
background-color: rgba(254,255,226,1.00);
}

#formular input[type=submit] {
width: 80%;
background-color: rgba(42,90,157,1.00);
color: rgba(255,255,255,1.00);
padding: 15px 20px;
margin: 10px 0;
border: none;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
font-size: 18px;
}

#formular input[type=reset] {
width: 18%;
background-color: rgba(95,95,95,1.00);
color: rgba(255,255,255,1.00);
padding: 15px 20px;
margin: 10px 0;
border: none;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
font-size: 18px;
}

#formular input[type=submit]:hover,
#formular input[type=reset]:hover {
background-color: rgba(101,151,222,1.00);
}

/* MOBILTELEFON och SMARTPHONE (portrait/stående) */
@media only screen and (max-width: 768px){
#formular {
width: 90%;
}
#formular input[type=submit],
#formular input[type=reset] {
width: 100%;
}
}

Observera att formateringen i exemplet är begränsad att till gälla för formulär med ID #formular och formateringen anges för #formular input[type=submit]

Om du bara har ett formulär behöver du inte referera till formulärets ID och det räcker då att ange formateringen för input[type=submit]

Notera att formuläret är responsivt och använder:
@media only screen and (max-width: 768px)

Läs mer om responsiv CSS i guiden Responsive layout »