 |
 |
|||||
Formulär med HTML-kodFör att skapa ett formulär behövs minst tre saker:
Dessa detaljer behandlas nedan. Har du bråttom kan du skippa till slutet på detta avsnitt som visar ett exempel med nödvändig kod. FORM-taggenFORM-taggen används för att märka upp start och slut på formulär. Attributen i taggen används för att tala om var formulärets innehåll ska skickas samt hur innehållet ska skickas. De två viktigaste attributen i FORM-taggen är
Nedan visas koden för ett enkelt formulär som skickar innehållet till filen MINSIDA.ASP. Kontrollernas och Submit-knappens position har markerats med (HTML-)kommentarer.
Metoderna get och postEtt formulär kan skickas på två olika sätt: med get eller post. Den stora skillnaden är hur innehållet skickas och hur mycket som kan skickas. Metoden get är den ursprungliga (den gamla) varianten av hur man skickar formulär. Innehållet skickas som en del av URL:en (se exempel nedan) till (t.ex.) ASP-sida som hanterar innehållet i formuläret. Eftersom vi använder URL:en för att skicka innehållet så är mängden data vi kan skicka begränsad (127 till 255 tecken).
Metoden post är den nyare varianten för att skicka formulär. Data i formulär skickas som en del av webbläsarens begäran om webbsidor. Därför syns inte innehållet i URL:en. Det är också den metod som bör användas om man frågar efter ett lösenord i formuläret. Eftersom data skickas i begäran så är inte mängden data heller begränsad. Observera att lösenordet fortfarande skickas okrypterat även om metoden post används! Att använda metoden post är alltså ett säkert kort. :-) KontrollerMånga av de vanliga kontroller som används i t.ex. Visual Basic finns även i HTML:
Enkla kontroller (<INPUT>)De flesta av kontrollerna skapas m.h.a. INPUT-taggen (utom flerradiga textrutor och list-/kombinationsrutor). Kontroller som skapas med INPUT-taggen använder attributet TYPE för att tala om vilken typ av kontroll som ska skapas. I tabellen nedan visas attributet och typen av kontroll som skapas. Attributet NAMEGemensamt för de flesta kontroller är att man använder attributet NAME för att ange namnet på kontrollen. Namnet används för att referera till värdet i den mottagande ASP-sidan. Ett enkelt textfält med namnet "mintext" skulle skapas med följande HTML-kod:
Attributet VALUEVill vi ange ett värde när formuläret laddas kan vi använda attributet VALUE. Tex ger följande HTML-kod:
följande utseende: Flerradiga textfält (<TEXTAREA>)Flerradiga textfält skiljer sig på en del punkter från de enradiga, bortsett från att fältet har flera rader. :-) Bl.a. så har fältet både en öppnande och avslutande tagg. Och attributen COLS och ROWS används för att ange (ungefärligen) hur många teckens bredd och höjd som textfältet ska visas med. Exempel på HTML-kod för ett flerradigt textfält visas nedan (observera att allt som skrivs mellan öppnande och avslutande tagg kommer att visas i textfältet - även mellan slag och radbrytningar!)
List- och kombinationsrutor (<SELECT> och <OPTION>)Precis som med textfältet så har list- och kombinationsrutor en öppnande och avslutande tagg. Och för varje alternativ i rutan så används taggen <OPTION>. OPTION-taggens attribut VALUE kan användas för att skicka ett annat värde än det som visas för besökaren. Nedan visas två exempel på hur man skapar en kombinationsruta i HTML-kod. I det första exemplet visas en kombinationsruta och i det andra exemplet en listruta. För att få en kombinationsruta kan man utelämna attributet SIZE och om man vill ha en listruta istället, så anger man ett värde större än 1 för attributet SIZE (t.ex. SIZE="4").
Submit-knappenSubmit-knappen är egentligen en "vanlig" kontroll med fördefinerat beteende, d.v.s. att skicka iväg formulärets innehåll till webbservern. Det finns även en knapp till som brukar användas i kombination med Submit-knappen - Reset-knappen. Reset-knappen återställer (tömmer) formuläret till de värden som kontrollerna innehåll när webbsida med formuläret laddades. Submit-knappen skapas med en INPUT-tagg vars attribut TYPE satts till "submit". Texten som ska visas på knappen anges med attributet VALUE. Nedan visas HTML-koden som behövs för att skapa en Submit-knapp.
Ett enkelt formulärHTML-koden som har med formuläret att göra har markerat med fet stil. <HTML> <H1>Ett enkelt formulär</H1> <FORM METHOD="post" ACTION="registrera.asp"> </BODY> Microsoft FrontPage och Visual InterDevGivetvis går det lite lättare att skapa formulär om man använder verktyg för att redigera webbsidor visuellt. Microsoft FrontPage 2000 och Visual InterDev 6 är två sådana verktyg som är lämpliga då man jobbar med Microsoft teknologier (därmed inte sagt att de är de bästa för utveckling av webbsidor :-). FrontPage är bäst (av de två) för att utveckla utseendet för webbsidorna, medan Visual InterDev är bättre då man skriver ASP- och JavaScript-kod. För formulär är också FrontPage bäst då så fort man placerar en kontroll på webbsidan så lägger FrontPage till FORM-taggen samt Submit- och Reset-knappar. | Till början på sida | Hämta information från formulärHär beskrivs hur man hämtar informationen från ett formulär som skickats till ASP-sidan. Tyvärr finns (ännu?) inget bra verktyg för att generera kod för att läsa innehållet från ett formulär. Vi måste alltså skriva koden själv. För att webbserver ska veta att en webbsida innehåller ASP-kod (och kunna tolka den) måste filen med webbsidan ha filändelsen .ASP. Objektet RequestAll information (data?) som skickas från en webbläsare när den (eller snarare besökaren) begär en webbsida placeras i objektet Request. Från detta objekt kan vi sen i vår ASP-kod hämta bl.a. innehållet från formulär. Objektet finns alltid tillgängligt och behöver alltså inte skapas. Beroende på hur formuläret skickades, get eller post, så finns det två vektorer som innehåller innehållet från formuläret - QueryString respektive Form. För att hämta innehållet i ett formulär som skickats med metoden get så använder vi alltså vektorn QueryString i Request-objektet
Om vi istället skickar formuläret med metoden post så använder vi vektorn Form
Att hantera innehållet från exempelformuläret ovan (Ett enkelt formulär) kan ske med nedanstående kod (eftersom formuläret skickas med metoden post). Här deklareras först två variabler som sedan tilldelas innehållet från textkontrollerna namn och epost.
Skriva till webbsidaGivetvis är det inte bara intressant att läsa data från ett formulär, utan kommunikation sker ofta år andra hållet med utskrift. För att skriva till den resulterande webbsidan använder vi istället objektet Response, även det alltid tillgängligt. Metoden vi använder är Write() och i nedanstående kod (som fortsätter från den ovan) skriver ut innehållet i variablerna efter lite ledtext.
Eftersom ASP-sidan är så enkel (liksom formuläret) så skulle vi kunna ersätta ovanstående två rader med följande kod.
Det sista alternativet är ibland att föredra då det gör det lättare att läsa HTML-koden (liksom ASP-koden), speciellt om mängden "utskrifter" år små. Man använder ASP-koden för att hantera logiken och HTML-koden för presentation. Egentligen så bör man använda komponenter för att hantera det mesta av logiken samt ASP endast för att anropa metoder i komponenterna och eventuell utskrift av resultatet från metodanropen. Se ASP och komponenter för mer information. | Till början på sida | Ett lite större exempelI detta exempel använder vi två filer:
Förklaring till koden i filen STORRE1.HTMHTML-koden för formuläret är inte mycket mer komplex än den i det enkla exemplet ovan. Men tabellen som används för att styra bredden på textraderna och för att kunna centrar webbsidans innehåll gör att koden ser värre ut än den är. Men koden för tabellen skapas relativt enkelt i t.ex. Microsoft FrontPage. Formuläret i detta exempel innehåller bl.a. två textrutor och en Submit-knapp. Men här visas även hur man använder radioknappar och textrutor i HTML-formulär (samt hur man hanterar dess innehåll nedan). RadioknapparRadioknappar brukar användas i grupper om två eller fler - besökaren kan då endast markera en av radioknapparna. För att gruppera radioknapparna så ger man dem samma värde på INPUT-taggens attribut NAME. Och för att skicka olika värden, beroende på vilken radioknapp som besökaren valde, så använder man attributet VALUE. Attributet CHECKED (utan något värde efter ett likhetstecken!) används för att avgöra vilken radioknapp (om någon) som ska vara markerad när webbsida med formulär laddas. I detta exempel använder vi två radioknappar för att besökare ska kunna ange om han/hon är en student eller lärare. Radioknappen ges namnet sysselsattning och värdena "studerande" respektive "larare". Observera att svenska tecken har ersatts med bokstäverna a eller o. Efter radioknappen skrivs ledtext för att visa på vilket alternativ som radioknappen avser.
KryssrutorKryssrutor brukar, i motsats till radioknappar, kunna anges oberoende av varandra, d.v.s. används för att markera inga eller flera alternativ. Om vi bara anger namnet på kontroller (med attributet NAME) så kommer värdet "on" skickas om besökare markerat kryssrutan. Vill vi skicka något mer intressant värde (än "on") så kan vi använda attributet VALUE. Även här kan vi använda attributet CHECKED för att låta en (eller flera) kryssrutor vara markerade när webbsida laddas. Observera även att kryssrutans namn (och därmed innehåll) endast skickas om kryssrutan har markerats!
Fullständiga koden för filen STORRE1.HTMKoden för HTML-formuläret har markerats med fet stil i koden nedan. <HTML>
<HEAD>
<TITLE>Ett större exempel med formulär</TITLE>
</HEAD>
<BODY>
<!-- Centrera tabell -->
<DIV ALIGN="center">
<CENTER>
<!-- Tabell används för att styra bredd på text och för att kunna
centrera. Tabellen innehåller endast en rad och en kolumn -->
<TABLE BORDER="0" WIDTH="600">
<TR>
<TD WIDTH="100%">
<H1>Ett större exempel med formulär</H1>
<P>I detta exempel visas ett formulär i filen STORRE1.HTM
och som skickar innehållet till en fil med namnet
STORRE1.ASP.</P>
<HR>
<!-- START: Formulär -->
<FORM METHOD="post" ACTION="storre1.asp">
<P>Förnamn<BR>
<INPUT TYPE="text" NAME="fnamn"></P>
<P>Efternamn<BR>
<INPUT TYPE="text" NAME="enamn"></P>
<P>Jag är:
<INPUT TYPE="radio" NAME="sysselsattning"
VALUE="studerande" CHECKED>studerande
<INPUT TYPE="radio" NAME="sysselsattning"
VALUE="larare">lärare</P>
<P>Jag vill ha information om:
<INPUT TYPE="checkbox" NAME="bocker">läroböcker
<INPUT TYPE="checkbox" NAME="program">program</P>
<P><INPUT TYPE="submit" VALUE="Skicka!"></P>
</FORM>
<!-- SLUT: Formulär -->
<HR>
</TD>
</TR>
</TABLE>
</CENTER>
</DIV>
</BODY>
</HTML>
Förklaring till koden i filen STORRE1.ASPHTML-koden är i stort sett den samma i denna fil som i den med HTML-formuläret, bortsett från att den inte innehåller ett formulär. ASP-koden har delats upp i två delar där den första delen deklarerar variabler och hämtar innehållet från formuläret. Denna del har placerats innan den öppnande HTML-taggen. Den andra delen av ASP-koden har placerats i webbsidans kropp (d.v.s. i BODY-taggen) för att utskrift ska kunna ske direkt där den ska användas (med Response.Write). En viktig sak, som ganska tydligt framkommer i detta exempel, är det flitiga användandet av If-satser i ASP-kod. Innehåll från formulär måste kontrolleras ganska ingående så att det inte genereras några fel i ASP-koden. Helst av allt så bör man använda JavaScript-kod för att validera formuläret innan formuläret skickas till webbservern och ASP-sidan. Med validering menas att man kontrollerar att alla obligatoriska fält innehåller något, och gärna då giltiga värden. Men JavaScript ligger är utanför ämnet för denna webbsida. ASP-kod del 1I första delen av ASP-koden deklareras en variabel blnSkickat som en flagga som används för att avgöra om resten av koden ska exekveras. (Det finns inget skäl att exekvera någon kod om det inte finns något att göra. :-) Genom att kontrollera om egenskapen Count i vektorn Request.Form är större än noll (0) så kan flaggan (variablen blnSkickat) sätts till sant, annars falskt. Flaggan används även i den andra delen av ASP-koden.
Och om något skickats så deklarerar vi variabler för att lagra innehållet i formuläret samt hämtar och tilldelar innehållet till variablerna. Det är ingen skillnad mot det enkla exemplet ovan. ASP-kod del 2Det första vi gör att kontrollera att något skickats genom att använda vår flagga blnSkickat. Efter lite ledtext så skriver vi ut besökarens för- och efternamn. Inte heller detta är något nytt jämfört med det enkla exemplet ovan. Radioknappar och kryssrutorDäremot så skiljer sig hanteringen av innehållet i radioknappar och kryssrutor. Som nämnts ovan så kan man (med diverser attribut i INPUT-taggen) styra vad som ska skickas när besökare väljer en radioknapp eller sätter en bock i en kryssruta. I HTML-formuläret har jag valt att skicka beskrivande strängar från radioknapparna men endast värdet "on" om besökare markerar en kryssruta. Eftersom radioknappen för sysselsättningen "lärare" innehåller svenska tecken (bokstaven ä för att vara exakt) så har jag valt att skickat texten "larare" istället. Därmed måste jag kontrollera om besökarens sysselsättning är studerande (alt. lärare) eller inte och sen skriva ut besökarens sysselsättning. (Det vore bättre att endast skicka en bokstav, d.v.s. "s" och "l", men exemplet visar ju på problemet.)
Kryssrutorna skapar lite mer problem, men problemet är främst relaterat till att utskriften ska se bra ut (d.v.s. om texten "och" ska skrivas ut emellan "intressena"). Hade vi bara valt att spara i en databas så hade vi endast behövt kontrollerat om kryssrutan var vald eller inte för att skriva sant eller falskt till fältet i databasen. Men eftersom jag valt att göra en "snygg" utskrift så måste jag kontrollera om kryssrutorna är markerade, för att i så fall skriva ut vad besökaren är intresserad av. Om besökaren är intresserad av första alternativet (läroböcker) så sätter jag en flagga så att jag i nästa If-sats kan avgöra om texten "och" ska skrivas ut mellan "intressena".
Detta större, men relativt enkla, exempel slutat med ca 100 rader med HTML- och ASP-kod (inklusive tomma rader och kommentarer!). Ska sanningen fram så bidrar "designen" (tabellen) för webbsidan med ca 25 rader av koden. Men 75 rader för att hantera och skriva ut 5 kontroller är kanske inte så "produktivt"... Fullständig kod för filen STORRE1.ASPASP-koden har markerats med fet stil (utom kommentarer) <%
Option Explicit
'Deklarera variabler
Dim blnSkickat
'Om formulär skickats och är ifyllt - sätt flagga till sant
If Request.Form.Count > 0 Then
blnSkickat = True
Else '... annars sätt till falskt
blnSkickat = False
End If
'Dekl. endast variabler och hämta värden om formulär skickats
If blnSkickat Then
'Deklarera variabler för innehåll i formulär
Dim strFnamn, strEnamn, strSysselsattning, strBocker, strProgram
Dim blnBocker
'Hämta innehållet i formuläret
strFnamn = Request.Form("fnamn")
strEnamn = Request.Form("enamn")
strSysselsattning = Request.Form("sysselsattning")
strBocker = Request.Form("bocker")
strProgram = Request.Form("program")
End If
%>
<HTML>
<HEAD>
<TITLE>Ett större exempel med formulär</TITLE>
</HEAD>
<BODY>
<!-- Centrera tabell -->
<DIV ALIGN="center">
<CENTER>
<!-- Tabell används för att styra bredd på text och för att kunna
centrera. Tabellen innehåller endast en rad och en kolumn -->
<TABLE BORDER="0" WIDTH="600">
<TR>
<TD WIDTH="100%">
<H1>Ett större exempel med formulär</H1>
<P>I denna fil, STORRE1.ASP, läses innehållet från
formuläret i filen STORRE1.HTM och visas nedan..</P>
<HR>
<%
'Om formulär skickats - visa innehållet i formuläret
If blnSkickat Then
'Skriv ut lite ledtext
Response.Write "<P>Du uppgav följande information om dig "
Response.Write "själv:</P>"
'***********************************
'*** Skriv ut för- och efternamn ***
Response.Write "<P><B>Förnamn:</B> " & strFnamn & "</P>"
Response.Write "<P><B>Efternamn:</B> " & strEnamn & "</P>"
'***********************************
'*** Skriv ut sysselsättning ***
'Påbörja HTML-stycke och skriv ut ledtext för sysselsättning
Response.Write "<P><B>Du är </B>"
'Om sysselsättning är stud. - skriv ut texten "studerande"...
If strSysselsattning = "studerande" Then
Response.Write "studerande"
Else '... annars texten "lärare"
Response.Write "lärare"
End If
'Avsluta HTML-stycke
Response.Write "</P>"
'***********************************
'*** Skriv ut "intressen" ***
'Påbörja HTML-stycke och skriv ut ledtext för intresse
Response.Write "<P><B>Du vill ha information om:</B> "
'Om intresserad av läroböcker - skriv ut texten "läroböcker"
If strBocker = "on" Then
Response.Write "läroböcker"
'Sätt flagga att intresserad av böcker
blnBocker = True
End If
'Om intresserad av program - skriv ut texten "program"
If strProgram = "on" Then
'Om även intresserad av böcker skriv ut texten " och "
If blnBocker then
Response.Write " och "
End If
Response.Write "program"
End If
'Avsluta HTML-stycke
Response.Write ".</P>"
'***********************************
Else '... annars meddela besökare att fylla i formuläret
Response.Write "<P>Du måste fylla i formuläret först."
REsponse.Write " Använd länk nedan.</P>"
End If
%>
<HR>
<P><A HREF="storre1.htm">Visa formulär</A></P>
<HR>
</TD>
</TR>
</TABLE>
</CENTER>
</DIV>
</BODY>
</HTML>
| Till början på sida | Tillbaka till ASP | Skapad av: Björn G D Persson. Uppdaterad: 2007-01-25. |
||||||
 |
 |
Formulär med HTML
Tillbaka