Bia Rask ● Webbkurs

HTML & CSS

FORMULÄR

 

Läs Adobes hjälpsida om formulär i Dreamweaver.

Vill du hellre se film visar Define forms in web pages och Work with form properties enkelt och tydligt hur du skapar formulär i Dreamweaver.

Behöver du hjälp med koden hittar du den på w3schools.com:

Jobbar du i Bootstrap rekommenderas även ett besök på getbootstrap.com.

Bootsnipp.com har en sida där du kan dra och släppa fält, knappar med mera och få fram kod att klistra in på din webbsida.

Om formulär

Formulär kan fylla många funktioner på en webbsida: kontakt, inloggning, beställning, anmälan, felanmälan, gästboksinlägg och mycket mera.

Ofta väljer man att skapa kontaktformulär istället för att lämna ut sin e-mailadress. En annan fördel med formulär är att du kan kräva att besökaren fyller i utvalda rutor eller väljer bland alternativ innan det går att skicka informationen till dig. Det ökar chansen att du får all information du behöver från besökaren.

Det  räcker inte med att lägga in ett formulär där besökaren kan fylla i uppgifter. De måste bearbetas och leda till någon sorts resultat också. Det finns massor att lära om det, men här skarpar vi bara lite på ytan. Läs till exempel Adobes hjälpsidor om formulär och de andra länkarna som tipsas om längre upp på sidan.

Du kan skapa formulär med HTML (innehåll) och CSS (grafisk utformning), men för att göra något med det besökaren skriver in krävs någon form av skript på servern. Det kan till exempel vara FormMail som används om datan ska skickas till dig i ett mail. Du anger själv var skriptet finns när du skapar formuläret, exempel:

<form action="http://www.example.com/cgi-bin/FormMail.pl">.

 

Formulär i Dreamweaver

Infoga formulär

I Dreamweaver kan du infoga ett formulär genom att gå till Infoga > Formulär > Formulär.

<form></form>

Sedan är det dags att ange formulärets egenskaper i panelen Egenskaper. Panelen byter innehåll utifrån var du har placerat muspekaren, så markera formuläret (t.ex. genom att klicka på någon av form-taggarna i koden) om du inte kommer åt det du ska ändra.

 

Id

Ge formuläret ett unikt namn. Som vanligt ska namnet vara logitskt så du slipper undra vad som är vad när du ska redigera sidan i framtiden.

<form id="formularnamn">

 

Action

Här anger du adressen till skriptet som processar formuläret.

<form action="http://www.example.com/cgi-bin/FormMail.pl">

Om du vill att innehållet ska mailas till dig kan du använda följande: http://media.guldstadsgymnasiet.se/cgi-bin/FormMail.pl. (Fungerar bara på skolans server och med era skolmailadresser.)

 

Method

<form method="post">

Det finns två sätt att skicka data, get och post.

Med get läggs värdet till efter adressen till sidan. Denna variant är vanlig till sökformulär, men annars används den inte så ofta. En fördel är att det går att sätta ett bokmärke på sidan man kommer till. Nackdelar är att det finns en gräns för hur mycket data som går skicka och att det är lätt att se i efterhand vad besökaren skrivit i sitt formulär eftersom det syna i webbhistoriken.

Om du vill lägga till information till en databas, skicka mail eller ladda upp filer till en server används post. Med post kommer informationen inte att synas i webbadressen och man kan skicka mer information. Parametrarna inte syns i webbhistoriken, men informationen är normalt inte skyddad och kan fångas upp av hackare. Om känslig information, som lösenord, personnummer eller kontokortsnummer, skickas måste förbindelsen vara krypterad.

 

Accept charset

Genom att välja någon teckenuppsättning som kan hantera Å, ä och ö slipper du svar som ser underliga ut. Välj till exempel UTF-8 eller ISO-8859-1.

 

Infoga formulärobjekt

I Infoga-panelen hittar du flera formulärobjekt som du kan använda. Placera muspekaren där du vill att objektet ska hamna och klicka på önskat objekt i panelen.

Vi tittar på några av de val du kan göra i Egenskaper-panelen när du infogat ett objekt:

 

Id, name & value

Id och name är ger namn åt objekten. De ska vara unika, men ett och samma objekt har ofta samma värde (namn) vid båda egenskaperna.

<input name="fornamn" type="text" id="fornamn">

Om det däremot handlar om en grupp av alternativknappar eller kryssrutor använder man samma värde vid name för alla alternativ i gruppen men unika värden vid id.

<label><input type="radio" name="fargval" id="fargval_svart" value="svart">
Svart</label>
<br>
<label><input type="radio" name="fargval" id="fargval_vit" value="vit">
Vit</label>
<br>
<label><input type="radio" name="fargval" id="fargval_rosa" value="rosa">
Rosa</label>

Value används för att bestämma vilken text som ska stå på en knapp och för att ange vilket värde som ska skickas när besökaren valt bland olika alternativ.

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

 

Type

Type talar om vilken typ av data som ska skrivas in. Har du använt dig av Infoga-panelen fylls detta i automatiskt utifrån vad du klickade på. Några exempel på värden för Type är: text, submit, radio, checkbox, button, number, password och email.

 

Placeholder

Placeholder används om man vill att det ska stå något i ett fältet innan besökaren skriver in sina uppgifter. Ofta används detta för att tala om vad besökaren förväntas ange, till exempel sitt namn.

 

Size, rows & maxlengt

Size talar om hur lång en ruta ska vara.

Rows berättar hur många rader en ruta ska täcka.

Maxlengt bestämmer hur många tecken som ska gå skriva in. Ett exempel på användningsområde är att begränsa antalet tecken till 5 när man skriver in postnummer för att hindra besökarna att skriva in hela postadressen i rutan.

 

Auto complete, auto focus & required

Auto Complete som gör att datorn försöker fylla i uppgifter automatiskt.

Required kryssas för om du vill att besökaren ska tvingas fylla i information för att kunna skicka formuläret.

Auto Focus ger en extra markering i hopp om att besökaren ska uppmärksamma objektet.

<input name="allergier" type="text" autofocus="autofocus" id="allergier" placeholder="Ange ev. allergier!">

 

Textfält/textområde

Infoga > Formulär > Text/Textområde

De båda objekten liknar varandra, men textområde ger en större ruta att skriva i.

För att besökaren ska förstå vad hen ska skriva kan vi antingen skriva en etikett före textfätet, i Place Holder eller med taggen <label>.

 

<p>Förnamn: <input name="fornamn" type="text" id="fornamn"></p>

Förnamn:

 

<input name="fornamn" type="text" id="fornamn" placeholder="Förnamn">

 

<p><label for="problembeskrivning">Beskriv problemet:</label><br>
<textarea name="problembeskrivning" cols="40" rows="3" id="problembeskrivning"></textarea></p>


 

Kryssruta/kryssrutegrupp

Besökaren väljer själv hur många kryssrutorm som bockas för.

Infoga > Formulär > Kryssruta/Kryssrutegrupp

 

<input type="checkbox" name="villkoren_godkanns" id="villkoren_godkanns">
<label for="villkoren_godkanns">Jag godkänner villkoren.</label>

 

Infoga kryssrutegrupp

<p>Jag vill boka följande utflykter:</p>
<label>
<input type="checkbox" name="utflykter" value="vasterbottensforfattarna" id="utflykter_vasterbottensforfattarna">
Rundtur Västerbottensförfattarna</label>
<br>
<label>
<input type="checkbox" name="utflykter" value="flottfard" id="utflykter_flottfard">
Flottfärd längs Skellefteälven</label></p>

Jag vill boka följande utflykter:




Alternativknappar

Kallas även radioknappar. Det som skiljer dem från kryssrutor är dels utseendet och dels att man bara väljer ett av alternativen när det handlar om alternativknappar. Med kryssrutor kan man välja flera. Alternativknapparna i en grupp ska ha samma värde vid name för att besökaren bara ska kunna välja en av dem, men id ska vara unikt.

Infoga > Formulär > Alternativknapp/Grupp med alternativknappar

 

Infoga grupp med alternativknappar

<label><input name="fargval" type="radio" id="fargval_svart" value="svart" checked="checked">
Svart</label>
<br>
<label><input type="radio" name="fargval" value="vit" id="fargval_vit">
Vit</label>
<br>
<label><input type="radio" name="fargval" value="rosa" id="fargval_rosa">
Rosa</label>




 

 

Knappar

Infoga > Formulär > Knappen Skicka/Knappen Återställ/Knapp

Submit skickar formuläruppgifterna och reset återställer alla data.

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

 

Dolda fält

Infoga > Formulär > Dold

Ett dolt fält fungerar ungefär som ett vanligt textfält, men med den viktiga skillnaden att det inte syns på webbsidan. Det används för att förmedla information som besökaren inte skrivit in. Det kan till exempel gälla vilken adress ett mail ska skickas till eller vad som ska anges på ämnesraden i mailet.

<input name="subject" type="hidden" value="Anmälan till bröllop">

Fieldset

Infoga > Formulär > Fältuppsättning

Fältuppsättningar används för att tydligare visa vilka alternativ som hör ihop.

<fieldset>
<legend>Vilken luciakandidat röstar du på?</legend>
<p><input name="lucia" type="radio" value="ida" id="ida"><label for="ida">Ida Berg</label></p>
<p><input name="lucia" type="radio" value="sverker" id="sverker"><label for="sverker">Sverker Johansson</label></p>
<p><input name="lucia" type="radio" value="anders" id="anders"><label for="anders">Anders Andersson</label></p>
</fieldset>

Placeholder image

 

 

Validera formulär

Med hjälp av JavaScript-kod kan informationen som besökaren skrivit in i formuläret valideras så det upptäcks om besökaren inte angett data i rätt format (siffror, epostadress).

Kontrollera att alla textfält du vill validera har unika namn och markera sedan Skicka-knappen. Fönster > Beteenden > klicka på plustecknet > Validera formulär. Ange de verifieringsregler du önskar för varje textfält och klicka sedan OK.

Skicka innehållet som e-post

Ofta används formulär till kontaktsidor, för anmälningar eller felanmälningar. Om så är fallet brukar man använda ett skript som skickar innehållet till en mailadress, till exempel FormMail. Många webbhotell har skriptet på plats på servern.

Ta till exempel en titt på one.coms supportsida Hur använder jag FormMail?

Av säkerhetsskäl begränsar man vilka adresser som det går skicka e-post till. Många webbhotell väljer att det ska gå skicka till epostadresser på samma domän som webbsidan ligger på.

För er som läser kursen ligger skriptet på http://media.guldstadsgymnasiet.se/cgi-bin/FormMail.pl och det är bara era skolmailadresser som fungerar. OBS! Kolla i skräpposten om du inte ser mailet!

 

Lägga in mottagare

Du behöver lägga in din epostadress i ett dolt fält för att det ska fungera: Infoga > Formulär > Dold

<input name="recipient" type="hidden" id="recipient" value="fornamn.efternamn@domän.se">

 

Ämnesrad i mailet

<input name="subject" type="hidden" id="subject" value="Det du vill ska stå på ämnesraden i mailet">

 

Skicka vidare till tacksida

Ofta lägger man in ett dolt fält med en länk till en tacksida. Det kan hända att det finns en standardsida i skriptet, men gör du en egen kan du utforma den som du vill.

<input name="redirect" type="hidden" id="redirect" value="http://media.guldstadsgymnasiet.se/mediaweb/DittNamn/tack.html">

 

Kolla att allt är med & ev. skicka vidare till felsida

För att kolla att allt är ifyllt kan man lägga till dessa två dolda fält (se även "validera formulär"):

<input name="missing_fields_redirect" type="hidden" id="missing_fields_redirect" value="http://media.guldstadsgymnasiet.se/mediaweb/DittNamn/fel.html">

<input name="required" type="hidden" id="required" value="fornamn,efternamn,email,message">

 

Svarssida & felsida

Om man klickar på "Skicka" och inget händer är det lätt att tro att uppgifterna inte gick iväg. Därför lägger man ofta in dolda fält som skickar besökaren vidare till en en tack-sida om allt gick bra och en fel-sida om det inte fungerade, till exempel för att inte allt var ifyllt som det skulle.

Ibland finns funktioner inlagda i skriptet som anges vid action som talar om att informationen skickas eller att något gick fel. Även om det skulle finnas kan man föredra att skapa egna sidor för att kunna utforma dem som man vill.

Infoga > Formulär > Dold

<input type="hidden" name="redirect"
value="http://www.example.com/tack.html">


<input type="hidden" name="missing_fields_redirect"
value="http://www.example.com/fel.html">