Skapa webbformulär

Senast uppdaterad den 27 apr. 2021

Obs!

Stödet för HTML-formulärelement har förbättrats i Dreamweaver Creative Cloud-uppdateringar. Information finns i Förbättrat HTML5-stöd för formulärelement.

Webbformulär

När en besökare matar in information i ett webbformulär som visas i en webbläsare och klickar på skicka-knappen, skickas informationen till en server där ett skript eller applikation på serversidan bearbetar den.Servern svarar genom att skicka den bearbetade informationen tillbaka till användaren (eller klienten), eller genom att utföra någon annan åtgärd baserad på formulärinnehållet.

Du kan skapa formulär som skickar data till de flesta programservrar, inklusive PHP, ASP och ColdFusion. Om du använder ColdFusion kan du också lägga till ColdFusion-specifika formulärkontroller till dina formulär.

Obs!

Du kan även skicka formulärdata direkt till en e-postmottagare.

Formulärobjekt

I Dreamweaver kallas formulärinmatningstyper för formulärobjekt.Formulärobjekt är mekanismerna som låter användare mata in data. Du kan lägga till följande formulärobjekt till ett formulär:

Textfält

Kan fyllas med valfri alfanumerisk text. Texten kan visas på en eller flera rader eller i ett lösenordsfält, där den text som matas in ersätts med asterisker eller punkter så att ingen som står bredvid kan läsa den.

Obs!

Lösenord och annan information som skickas till en server från ett lösenordsfält är inte krypterad. Den överförda informationen kan fångas upp och avläsas som alfanumerisk text. Av den anledningen bör du alltid kryptera data som du vill hålla hemliga.

Dolda fält

Lagra information som matats in av en användare, såsom ett namn, e-postadress eller visningsinställning, och använd sedan denna data när användaren nästa gång besöker webbplatsen.

Knappar

Utför åtgärder när de klickas på. Du kan lägga till ett anpassat namn eller etikett för en knapp, eller använda en av de fördefinierade etiketterna "Skicka" eller "Återställ". Använd en knapp för att skicka formulärdata till servern eller för att återställa formuläret. Du kan också tilldela andra bearbetningsuppgifter som du definierar i ett skript.Till exempel kan knappen beräkna den totala kostnaden för objekt som valts baserat på tilldelade värden.

Kryssrutor

Möjliggör flera val i en grupp med alternativ. Användaren kan välja så många alternativ han eller hon vill. Följande exempel visar tre markerade kryssrutor: Surfing, mountainbike och forsränning.

Alternativknappar

Representerar ömsesidigt uteslutande valmöjligheter. Att välja en knapp inom en radioknappsgrupp avmarkerar alla andra i gruppen (en grupp består av två eller fler knappar som delar samma namn). I exemplet nedan är Forsfärder det för närvarande valda alternativet. Om användaren klickar på Surfing, rensas knappen Forsfärder automatiskt.

Listmenyer

Visar alternativ i en rullbar lista. Användaren kan markera flera alternativ. Alternativet Lista visar alternativvärdena på en meny där användaren bara kan välja en rad. Använd menyer om utrymmet är begränsat och du behöver visa många artiklar eller om du vill ha kontroll över vilka värden som returneras till servern. Till skillnad från textfält, där användaren kan skriva vad han eller hon vill, även ogiltiga data, är resultaten från en meny exakta värden.

Obs!

En snabbmeny i ett HTML-formulär är inte detsamma som en grafisk snabbmeny. Information om hur du skapar, redigerar och visar en grafisk snabbmeny finns på länken i slutet av det här avsnittet.

Hoppmenyer

Navigeringslistor eller popup-menyer som låter dig infoga en meny där varje alternativ länkar till ett dokument eller en fil.

Filfält

Låt användare bläddra till en fil på sin dator och ladda upp filen som formulärdata.

Bildfält

Gör det möjligt att infoga en bild i ett formulär. Använd bildfält för att skapa grafiska knappar såsom Skicka- eller Återställ-knappar.Att använda en bild för att utföra andra uppgifter än att skicka data kräver att du kopplar ett beteende till formulärobjektet.

Skapa ett HTML-formulär

(Endast Creative Cloud-användare): Som en del av HTML5- stödet har nya attribut introducerats i egenskapspanelen för formulärelement. Dessutom har fyra nya formulärelement (E-post, sökning, telefon, URL) introducerats i formulärsektionen i panelen Infoga. Mer information finns i Förbättrat HTML5-stöd för formulärelement.

Öppna en sida och placera infogningspunkten där du vill att formuläret ska visas.

Välj Infoga > Formulär eller välj kategorin Formulär i panelen Infoga och klicka på ikonen Formulär.

Formulär indikeras med en prickad röd ram i designvyn. Om du inte ser denna kontur väljer du Visa > Visuella hjälpmedel > Osynliga element.

Ange HTML-formulärets egenskaper i Egenskapskontrollen (Fönster > Egenskaper):

a. Markera formuläret genom att klicka på ramen runt det i dokumentfönstret.

b. Ange ett unikt namn för formuläret i rutan Formulärnamn.

Om ett formulär ges ett namn går det att referera till eller styra det med ett skriptspråk, till exempel JavaScript eller VBScript. Om du inte tilldelar formuläret ett namn, genererar Dreamweaver ett namn med syntaxen formulärn, och ökar värdet n för varje formulär som läggs till på sidan.

c. Ange vilken sida eller vilket skript som ska behandla informationen från formuläret genom att fylla i rutan Händelse eller genom att klicka på mappikonen och bläddra fram till rätt sida eller skript. Exempel: behandlaorder.php.

d. Ange vilken metod som ska användas för att skicka formulärdata till servern på snabbmenyn Metod.

Ange något av följande alternativ:

Standard Använder webbläsarens standardinställning för att skicka formulärdata till servern. Standardvärdet brukar vara metoden GET.

GET Innebär att värdet läggs till efter adressen till sidan.

POST Innebär att formulärinformationen bäddas in i HTTP-begäran.

Använd inte metoden GET för att skicka långa formulär. En webbadress kan bara vara 8 192 tecken lång. Om mängden data som skickas är för stor kan den trunkeras, vilket kan leda till oväntade eller misslyckade bearbetningsresultat.

Dynamiska sidor som genereras av parametrar skickade med metoden GET kan markeras med bokmärken, eftersom alla värden som behövs för att återskapa sidan finns i den URL som visas i webbläsarens adressfält. Däremot kan bokmärken inte skapas för dynamiska sidor som genereras av parametrar som har skickats från POST-metoden.

Om du samlar in konfidentiella användarnamn och lösenord, kreditkortsnummer eller annan konfidentiell information, kan POST-metoden verka säkrare än GET-metoden. Information som skickas av POST-metoden är emellertid inte krypterad och kan enkelt fångas upp av en hackare. Vill du vara på den säkra sidan bör du använda en säker anslutning till en säker server.

e. (Valfritt) Ange MIME-kodningstypen för uppgifterna som skickas till servern för behandling på snabbmenyn Kodningstyp.

Standardinställningen för application/x-www-form-urlencode används normalt tillsammans med metoden POST. Om du skapar ett filöverföringsfält anger du MIME-typen multipart/form‑data.

f. (Valfritt) Ange i vilket fönster de data som returneras av programmet som anropas på snabbmenyn Mål ska visas.

Om det namngivna fönstret inte redan visas öppnas ett nytt fönster med detta namn. Ange något av följande målvärden:

_blank Öppnar måldokumentet i ett nytt fönster utan namn.

_parent Öppnar måldokumentet i det överordnade fönstret där det aktuella dokumentet visas.

_self Öppnar måldokumentet i det fönster dit formuläret skickats.

_top Öppnar måldokumentet i det aktuella fönstret. Det här värdet kan användas för att se till att måldokumentet visas i hela fönstret även om ursprungsdokumentet bara visades i en ram.

Infoga formulärobjekt på sidan:

a. Placera insättningspunkten där formulärobjektet ska infogas i formuläret.

b. Välj objektet på menyn Infoga > Formulär eller i kategorin Formulär på panelen Infoga.

c. Fyll i dialogrutan Hjälpattribut för inmatningskod. Klicka på Hjälp i dialogrutan om du vill ha mer information.

Obs!

Om dialogrutan Hjälpattribut för inmatningskod inte visas kan det ha funnits en inmatningspunkt i kodvyn när du försökte infoga formulärobjektet. Se till att inmatningspunkten är i designvyn och försök igen. Mer information finns i artikeln Skapa HTML-formulär i Dreamweaver av David Powers.

d. Ange objektens egenskaper.

e. Ange ett objektnamn i egenskapskontrollen.

Varje textfält, dolt fält, kryssruta och list/menyobjekt måste ha ett unikt namn som gör att det går att identifiera i formuläret. Formulärobjektens namn får inte innehålla mellanslag eller specialtecken. Du kan använda vilken kombination som helst av alfanumeriska tecken och understrykningstecknet (_). Den etikett du tilldelar objektet är variabelnamnet som lagrar fältets värde (de data som har angetts). Det är det värde som skickas till servern för behandling.

Obs!

Alla alternativknappar i en grupp måste ha samma namn.

f. Ge textfält, kryssrutor och alternativknappar etiketter genom att klicka bredvid objektet och skriva texten för etiketten.

Anpassa formulärets layout.

Använd radbrytningar, styckebrytningar, förformaterad text eller tabeller för att formatera dina formulär.Du kan inte infoga ett formulär i ett annat formulär (det vill säga du kan inte överlappa taggar), men du kan inkludera mer än ett formulär på en sida.

När du utformar formulär ska du komma ihåg att märka formulärfälten med beskrivande text för att låta användare veta vad de svarar på—till exempel "Skriv ditt namn" för att begära namnuppgifter.

Använd tabeller för att ge struktur åt formulärobjekt och fältetiketter.När du använder tabeller i formulär ska du se till att alla table-taggar finns mellan form-taggarna.

En självstudiekurs om hur du skapar formulär finns på www.adobe.com/go/vid0160_se.

För en handledning om att styla formulär med CSS, se www.adobe.com/go/vid0161.

Textfältobjekts egenskaper

Välj textfältsobjektet och ange något av följande alternativ i egenskapskontrollen:

Teckenbredd

Anger det maximala antalet tecken som kan visas i fältet.Detta nummer kan vara mindre än Max Chars, som anger det maximala antalet tecken som kan anges i fältet.Till exempel, om teckenbredden är inställd på 20 (standardvärdet) och en användare anger 100 tecken, kommer endast 20 av dessa tecken att vara synliga i textfältet.Även om du inte kan visa tecknen i fältet känns de igen av fältobjektet och skickas till servern för bearbetning.

Max. tecken

Anger det maximala antalet tecken som användaren kan ange i fältet för enradiga textfält.Använd Max Chars för att begränsa postnummer till 5 siffror, begränsa lösenord till 10 tecken, och så vidare.Om du lämnar rutan Max tecken tom kan användare ange vad som helst av text.Om texten överstiger teckenbredden för fältet kommer texten att rulla.Om en användare överstiger det maximala antalet tecken producerar formuläret ett varningsljud.

Antal rader

(Tillgängligt när alternativet Flerrader är valt) Anger höjden på fältet för flerrads textfält.

Inaktiverad

Inaktiverar textområdet.

Skrivskyddad

Gör att textområdet blir skrivskyddat.

Typ

Betecknar fältet som ett enkelrads-, flerrads- eller lösenordsfält.

En rad

Resulterar i en input-tagg med sitt type-attribut inställt på text.Inställningen Teckenbredd mappas till size-attributet, och inställningen Max Chars mappas till maxlength-attributet.

Flera rader

Resulterar i en textarea-tagg. Inställningen Teckenbredd mappas till cols-attributet, och inställningen Antal rader mappas till rows-attributet.

Lösenord

Resulterar i en input-tagg med sitt type-attribut inställt på password.Inställningarna Teckenbredd och Max tecken mappas till samma attribut som i enradiga textfält.När en användare skriver i ett lösenordstextfält visas inmatningen som punkter eller asterisker för att skydda det från observation av andra.

Startvärde

Tilldelar värdet som visas i fältet när formuläret först laddas. Du kan till exempel ange att användaren ska ange information i fältet genom att inkludera en anteckning eller ett exempelvärde.

Klass

Gör att du kan tillämpa CSS-regler på objektet.

Alternativ för knappar

Knappnamn

Tilldelar knappen ett namn. Två reserverade namn, Submit och Reset, säger åt formuläret att skicka formulärdata till bearbetar applikationen eller skriptet, eller att återställa alla formulärfält till sina ursprungliga värden, respektive.

Värde

Är texten som visas på knappen.

Åtgärd

Avgör vad som händer när knappen klickas.

Skicka formulär

Skickar formulärdata för bearbetning när användaren klickar på knappen. Data skickas till sidan eller skriptet som anges i formulärets Action-egenskap.

Återställ formulär

Rensar innehållet i formuläret då knappen klickas.

Ingen

Anger åtgärden som ska utföras när knappen klickas. Du kan till exempel lägga till ett JavaScript-beteende som öppnar en annan sida när användaren klickar på knappen.

Klass

Tillämpar CSS-regler på objektet.

Alternativ för kryssruteobjekt

Värde vid markering

Anger värdet som ska skickas till servern när kryssrutan är markerad. I en undersökning kan du till exempel ange värdet 4 för håller helt med och värdet 1 för håller inte alls med.

Ursprungligt läge

Bestämmer om kryssrutan är vald när formuläret laddas i webbläsaren.

Dynamisk

Låter servern dynamiskt bestämma kryssrutans initiala tillstånd. Du kan till exempel använda kryssrutor för att visuellt presentera Ja/Nej-information som är lagrad i en databaspost. Vid designtillfället vet du inte den informationen. Vid körning läser servern databasposten och väljer kryssrutan om värdet är Ja.

Klass

Tillämpar Cascading Style Sheets (CSS)-regler på objektet.

Alternativ för enskilda alternativknappar

Värde vid markering

Anger värdet som ska skickas till servern när radioknappen är vald. Du kan till exempel skriva skidåkning i rutan Markerat värde för att ange att en användare valde skidåkning.

Ursprungligt läge

Bestämmer om radioknappen är vald när formuläret laddas i webbläsaren.

Dynamisk

Låter servern dynamiskt bestämma radioknappens initiala tillstånd. Du kan till exempel använda radioknappar för att visuellt presentera information som är lagrad i en databaspost. Vid designtillfället vet du inte den informationen. Vid körning läser servern databasposten och markerar radioknappen om värdet matchar ett du angav.

Klass

Tillämpar CSS-regler på objektet.

Menyalternativ

Lista/meny

Tilldelar menyn ett namn. Namnet måste vara unikt

Typ

Anger om menyn fälls ned när du klickar (alternativet Meny) eller visar en rullningsbar lista med objekt (alternativet Lista). Välj alternativet Meny om du vill att endast ett alternativ ska vara synligt när formuläret visas i en webbläsare.För att visa de andra alternativen måste användaren klicka på nedåtpilen.

Välja alternativet Lista för att lista några eller alla alternativ när formuläret visas i en webbläsare, så att användare kan välja flera objekt.

Höjd

(Endast listtyp) Anger antalet objekt som visas i menyn.

Markeringar

(Endast listtyp) Anger om användaren kan välja flera objekt från listan.

Listvärden

Öppnar en dialogruta där du kan lägga till objekten i en formulärmeny:

Använd Plus (+) och Minus (–) knapparna för att lägga till och ta bort objekt i listan.
Ange en etikett och eventuellt ett värde för varje menyalternativ.
Varje objekt i listan har en etikett (texten som visas i listan) och ett värde (värdet som skickas till bearbetningsprogrammet om objektet väljs). Om inget värde anges skickas etiketten till bearbetningsprogrammet i stället.
Använd upp- och nedåtpilknapparna för att ordna om objekt i listan.
Objekt visas i menyn i samma ordning som de visas i dialogrutan Listvärden. Det första objektet på listan är det valda objektet när sidan laddas i en webbläsare.

Dynamisk

Låter servern dynamiskt välja ett objekt i menyn när det först visas.

Klass

Gör att du kan tillämpa CSS-regler på objektet.

Markerat från början

Anger de alternativ på listan som är markerade från början. Klicka på objektet eller objekten i listan.

Infoga filöverföringsfält

Du kan skapa ett filöverföringsfält som låter användare välja en fil på sin dator—som ett ordbehandlings dokument eller grafikfil—och överföra filen till servern. Ett fil fält ser ut som andra textfält förutom att det också innehåller en Bläddra-knapp. Användaren anger antingen manuellt sökvägen till filen de vill ladda upp, eller använder knappen Bläddra för att hitta och välja filen.

Innan du kan använda filöverföringsfält måste du ha ett skript på serversidan eller en sida som kan hantera filinlämningar. Konsultera dokumentationen för serverteknologin du använder för att bearbeta formulärdata. Till exempel, om du använder PHP, se "Hantera filöverföringar" i online PHP Manual på http://us2.php.net/features.file-upload.php.

Fil fält kräver att du använder POST metoden för att överföra filer från webbläsaren till servern. Filen läggas upp till adressen du anger i formulärets Åtgärd-ruta.

Obs!

Kontakta serverns administratör för att bekräfta att anonyma filöverföringar är tillåtna innan du använder filfältet.

Infoga ett formulär på sidan (Infoga > Formulär).

Markera formuläret så att det visas i egenskapskontrollen.

Ange formulärmetoden POST.

På snabbmenyn Kodningstyp väljer du multipart/form-data.

I Åtgärd-rutan anger du skriptet på serversidan eller sidan som kan hantera den överförda filen.

Placera infogningspunkten inuti formulärkonturen och välj Infoga > Formulär > Filfält.

Ange följande alternativ i egenskapskontrollen:

Filfältsnamn

Är namnet på filfältobjektet.

Teckenbredd

Anger det maximala antalet tecken som kan visas i fältet.

Max. tecken

Anger det maximala antalet tecken som fältet kan innehålla. Om användaren bläddrar för att hitta filen kan filnamnet och vägen överskrida det angivna värdet för Max tecken. Om användaren däremot försöker skriva in filnamnet och vägen tillåter filfältet endast det antal tecken som anges av värdet Max tecken.

Infoga en bildknapp

Du kan använda bilder som knappikoner. Om du använder en bild för att utföra andra uppgifter än att skicka data måste du koppla ett beteende till formulärobjektet.

Placera infogningspunkten inuti formulärstrukturen i dokumentet.

Välj Infoga > Formulär > Bildfält.

Dialogrutan Välj bildkälla visas.

Välj bilden för knappen i dialogrutan Välj Image Source och klicka på OK.

Ange följande alternativ i egenskapskontrollen:

Bildfält

Tilldelar knappen ett namn. Två reserverade namn, Submit och Reset, talar om för formuläret att skicka formulärdata till bearbetningsappen eller skriptet, eller att återställa alla formulärfält till sina ursprungliga värden.

Källa

Anger den bild du vill ha på knappen.

Alt

Här kan du ange beskrivande text om bilden inte laddas i webbläsaren.

Justera

Ställer in objektets justeringsattribut.

Redigera bild

Startar din standardbildredigerare och öppnar bildfilen för redigering.

Klass

Gör att du kan tillämpa CSS-regler på objektet.

Om du vill koppla ett JavaScript-beteende till knappen väljer du bilden och sedan beteendet i panelen Beteenden (Fönster > Beteenden).

Alternativ för dolda fält

Dolt fält

Är namnet på fältet.

Värde

Tilldelar fältet ett värde. Det här värdet skickas till servern när formuläret skickas.

Infoga en grupp med alternativknappar

Placera infogningspunkten inuti formulärstrukturen.

Välj Infoga > Formulär > Grupp med alternativknappar.

Fyll i dialogrutan och klicka på OK.

a. Ange ett namn på gruppen med alternativknappar i rutan Namn.

Om du anger att alternativknapparna ska skicka tillbaka parametrar till servern, kopplas de till namnet. Om du tilldelar gruppen namnet minGrupp och anger formulärmetoden GET (vilket innebär att URL-parametrar skickas i stället för formulärparametrar när användaren klickar på knappen Skicka) skickas uttrycket minGrupp=”CheckedValue” i URL:en för servern.

b. Klicka på plusknappen (+) om du vill lägga till en alternativknapp i gruppen. Ange en etikett och ett markeringsvärde för den nya knappen.

c. Ordna om knapparna genom att klicka på upp- eller nedpilarna.

d. Om du vill ange att en viss alternativknapp ska vara markerad när sidan öppnas i en webbläsare anger du samma värde som alternativknappen har i rutan Välj ett värde som är lika med.

Ange ett statiskt eller dynamiskt värde genom att klicka på blixtikonen bredvid rutan och välja en postmängd som innehåller möjliga markeringsvärden. I båda fallen måste det värde du anger motsvara markeringsvärdet för en av alternativknapparna i gruppen. Du kan undersöka alternativknapparnas markeringsvärden genom att markera dem och öppna egenskapskontrollen för varje knapp (Fönster > Egenskaper).

e. Välj det format som du vill att Dreamweaver ska använda för att utforma knapparna. Ordna knapparna med hjälp av radbrytningar eller en tabell. Om du väljer att använda en tabell skapar Dreamweaver en tabell med en kolumn och placerar alternativknapparna till vänster och etiketterna till höger.

Du kan även ange egenskaperna i egenskapskontrollen eller direkt i kodläge.

Infogar en grupp kryssrutor

Placera infogningspunkten inuti formulärstrukturen.

Välj Infoga > Formulär > Grupp med kryssrutor.

Fyll i dialogrutan och klicka på OK.

a. Ange ett namn för gruppen med kryssrutor i rutan Namn.

Om du anger att kryssrutorna ska skicka tillbaka parametrar till servern, kopplas de till namnet. Om du tilldelar gruppen namnet minGrupp och anger formulärmetoden GET (vilket innebär att URL-parametrar skickas i stället för formulärparametrar när användaren klickar på knappen Skicka) skickas uttrycket minGrupp=”CheckedValue” i URL:en för servern.

b. Klicka på plusknappen (+) om du vill lägga till en kryssruta i gruppen. Ange en etikett och ett markeringsvärde för den nya kryssrutan.

c. Ordna om kryssrutorna genom att klicka på upp- eller nedpilarna.

d. Om du vill ange att en viss kryssruta ska vara markerad när sidan öppnas i en webbläsare anger du samma värde som kryssrutan har i rutan Välj ett värde som är lika med.

Ange ett statiskt eller dynamiskt värde genom att klicka på blixtikonen bredvid rutan och välja en postmängd som innehåller möjliga markeringsvärden. I båda fallen måste det värde du anger motsvara markeringsvärdet för en av kryssrutorna i gruppen. Du kan undersöka kryssrutornas markeringsvärden genom att markera dem och öppna egenskapskontrollen för varje kryssruta (Fönster > Egenskaper).

e. Välj vilket format du vill att Dreamweaver ska visa kryssrutorna i.

Ordna rutorna med hjälp av radbrytningar eller en tabell. Om du väljer att använda en tabell skapar Dreamweaver en tabell med en kolumn och placerar kryssrutorna till vänster och etiketterna till höger.

Du kan även ange egenskaperna i egenskapskontrollen eller direkt i kodläge.

Om dynamiska formulärobjekt

Ett dynamiskt formulärobjekt är ett formulärobjekt vars ursprungliga tillstånd bestäms av servern när sidan begärs från servern, inte av formulärdesignern vid designtillfället. När en användare till exempel begär en PHP-sida som innehåller ett formulär med en meny fyller ett PHP-skript på sidan automatiskt i menyn med värden som lagras i en databas.Servern skickar sedan den färdiga sidan till användarens webbläsare.

Det kan bli enklare att administrera webbplatsen genom att göra formulärobjekt dynamiska. Många platser använder till exempel menyer för att presentera en uppsättning alternativ för användarna. Om menyn är dynamisk kan du lägga till, ta bort eller ändra menyalternativ på en enda plats – databastabellen där alternativen lagras – för att uppdatera alla instanser av samma meny på webbplatsen.

Infoga eller ändra en dynamisk HTML-formulärmeny

Du kan dynamiskt fylla i en HTML-formulärmeny eller en listmeny med poster från en databas. För de flesta sidor kan du använda ett HTML-menyobjekt.

Innan du börjar måste du infoga ett HTML-formulär på en ColdFusion-, PHP- eller ASP-sida, och du måste definiera en postuppsättning eller annan källa för dynamiskt innehåll för menyn.

Infoga ett HTML-list/menyformulärobjekt på sidan:

a. Klicka inuti HTML-formuläret på sidan (Infoga > Formulär > Formulär).

b. Välj Infoga > Formulär > Lista/meny för att infoga formulärobjektet.

Gör något av följande:

Välj det nya eller ett befintligt HTML-list/menyformulärobjekt, och klicka sedan på Dynamiskt i egenskapskontrollen.
Välj Infoga > Dataobjekt > Dynamiska data > Dynamisk listruta.

Fyll i dialogrutan Dynamisk lista/meny och klicka på OK.

a. Välj den postmängd du vill använda som innehållskälla på snabbmenyn Alternativ från postmängd. Den här menyn använder du även om du vill redigera statiska eller dynamiska list/menyalternativ längre fram.

b. Ange listans eller menyns standardalternativ i området Statiska alternativ. Använd även det här alternativet om du vill ändra statiska alternativ i ett list/menyformulärobjekt efter att du har lagt till dynamiskt innehåll.

c. (Valfritt) Använd plusknappen (+) för att lägga till alternativ i listan eller minusknappen (-) för att ta bort alternativ från listan. Alternativen är listade i samma ordning som i dialogrutan Redigera listvärden. Det första alternativet på listan är markerat när sidan läses in av en webbläsare. Använd upp- och nedpilarna om du vill ordna om alternativen i listan.

d. Markera fältet som innehåller menyalternativens värde på snabbmenyn Värden.

e. Markera fältet som innehåller menyalternativens etiketter på snabbmenyn Etiketter.

f. (Valfritt) Om du vill ange att ett visst menyalternativ ska vara markerat när sidan öppnas i en webbläsare eller när en post visas i formuläret anger du samma värde som menyalternativet har i rutan Välj ett värde som är lika med.

Du kan ange ett statiskt eller dynamiskt värde genom att klicka på blixtikonen bredvid rutan och välja ett dynamiskt värde i listan med datakällor. I bägge fallen bör värdet som du anger motsvara värdet på ett av menyalternativen.

Göra befintliga HTML-formulärmenyer dynamiska

I designvyn väljer du list-/menyformulärobjektet.

Klicka på knappen Dynamisk i egenskapskontrollen.

Fyll i dialogrutan och klicka på OK.

Visa dynamiskt innehåll i HTML textfält

Du kan visa dynamiskt innehåll i HTML-textfält när formuläret visas i en webbläsare.

Innan du börjar måste du skapa formuläret på en ColdFusion-, PHP- eller ASP-sida, och du måste definiera en postuppsättning eller annan källa för dynamiskt innehåll för textfältet.

Välj textfältet i HTML-formuläret på din sida.

I Egenskapsinspektören klickar du på blixtikonen bredvid rutan Init Val för att visa dialogrutan Dynamisk data.

Välj postuppsättningskolumnen som ger ett värde till textfältet och klicka sedan på OK.

Ange alternativ för dialogrutan Dynamiskt textfält

Välj textfältet som ska göras dynamiskt från popup-menyn Textfält.

Klicka på blixtikonen bredvid rutan Ange värde till, välj en datakälla från listan över datakällor och klicka på OK.

Datakällan bör innehålla text. Om inga datakällor visas i listan, eller om de tillgängliga datakällorna inte uppfyller dina behov, klicka på plusknappen (+) för att definiera en ny datakälla.

Förvälj en HTML-kryssruta dynamiskt

Du kan låta servern avgöra om en kryssruta ska väljas när formuläret visas i en webbläsare.

Innan du börjar måste du skapa formuläret på en ColdFusion-, PHP- eller ASP-sida, och du måste definiera en postmängd eller annan källa för dynamiskt innehåll för kryssrutorna.Helst bör innehållskällan innehålla booleska data, såsom Ja/Nej eller sant/falskt.

Markera en kryssruta på sidan.

Klicka på knappen Dynamisk i egenskapskontrollen.

Fyll i dialogrutan Dynamisk kryssruta och klicka på OK:

Klicka på blixtikonen bredvid rutan Markera om och välj fältet i listan med datakällor.

Datakällan måste innehålla booleska data, till exempel Ja och Nej eller sant och falskt. Om det inte finns några datakällor i listan eller om de tillgängliga datakällorna inte uppfyller dina behov klickar du på plusknappen (+) och definierar en ny datakälla.
Ange värdet som fältet måste ha för att kryssrutan ska markeras i rutan Lika med.

Om du till exempel vill att kryssrutan ska markeras när ett visst fält i en post har värdet Ja anger du Ja i rutan Lika med.

Obs!

Värdet returneras till servern om användaren klickar på Skicka.

Förvälj en HTML-radioknapp dynamiskt

Förvälj en HTML-radioknapp dynamiskt när en post visas i HTML-formuläret i en webbläsare.

Innan du börjar måste du skapa formuläret på en ColdFusion-, PHP- eller ASP-sida och infoga minst en grupp HTML-radioknappar (Infoga > Formulär > Radioknappgrupp).Du måste också definiera en postuppsättning eller annan källa för dynamiskt innehåll för radioknapparna. Helst bör innehållskällan innehålla booleska data, såsom Ja/Nej eller sant/falskt.

I designvyn väljer du en radioknapp i radiogruppen.

Klicka på knappen Dynamisk i egenskapskontrollen.

Fyll i dialogrutan Dynamisk radioknappgrupp och klicka på OK.

Ange alternativ för dialogrutan Dynamisk radioknappgrupp

I popup-menyn Radioknappgrupp väljer du ett formulär och en radioknappgrupp på sidan.

Rutan Radioknappsvärde visar värdena för alla radioknappar i gruppen.

Välj ett värde för att dynamiskt förvälja från listan med värden. Värdet visas i rutan Värde.

Klicka på blixtsymbolen bredvid rutan Välj Värde Lika med och välj en postuppsättning som innehåller möjliga markerade värden för radioknapparna i gruppen.

Postuppsättningen du väljer innehåller värden som matchar radioknappernas markerade värden. För att visa de markerade värdena för radioknapparna, välj varje radioknapp och öppna dess egenskapsinspektör (Fönster > Egenskaper).

Klicka på OK.

Ställ in alternativen för dialogrutan Dynamisk radiogrupp (ColdFusion)

Välj en radiogrupp och ett formulär från popup-menyn Radiogrupp.

Klicka på blixtsymbolen bredvid rutan Välj Värde lika med.

Fyll i dialogrutan Dynamiska data och klicka på OK.

a. Välj en datakälla i listan med datakällor.

b. (Valfritt) Välj ett dataformat för texten.

c. (Valfritt) Ändra den kod som Dreamweaver infogar på sidan för att visa den dynamiska texten.

Klicka på OK för att stänga dialogrutan Dynamisk radiogrupp och infoga platshållaren för dynamiskt innehåll i radiogruppen.

Verifiera data i HTML-formulär

Dreamweaver kan lägga till JavaScript-kod som kontrollerar innehållet i angivna textfält för att säkerställa att användaren har angett rätt typ av data.

Du kan använda Spry-formulärwidgetar för att bygga dina formulär och validera innehållet i angivna formulärelement.För mer information, läs Spry-ämnena som listas nedan.

Du kan också bygga ColdFusion-formulär i Dreamweaver som validerar innehållet i angivna fält.För mer information, läs ColdFusion-kapitlet som listas nedan.

skapa ett HTML-formulär som innehåller minst ett textfält och en Skicka-knapp.

Se till att varje textfält som du vill validera har ett unikt namn.

Välj Skicka-knappen.

I panelen Beteenden (Fönster > Beteenden), klicka på plus-knappen (+) och välj beteendet Validera formulär från listan.

Ställ in valideringsreglerna för varje textfält och klicka på OK.

Du kan till exempel ange att ett textfält för en persons ålder endast accepterar siffror.

Obs!

Beteendet Validera formulär är endast tillgängligt om ett textfält har infogats i dokumentet.

Fäst JavaScript-beteenden till HTML-formulärobjekt

Du kan fästa JavaScript-beteenden som lagras i Dreamweaver till HTML-formulärobjekt som knappar.

Markera HTML-formulärobjektet.

I panelen Beteenden (Fönster > Beteenden) klickar du på plusknappen (+) och väljer ett beteende från listan.

Fäst anpassade skript till HTML-formulärknappar

Vissa formulär använder JavaScript eller VBScript för att utföra formulärbearbetning eller någon annan åtgärd på klienten i stället för att skicka formulärdata till servern för bearbetning.Du kan använda Dreamweaver för att konfigurera en formulärknapp så att den kör ett specifikt skript på klientsidan när användaren klickar på knappen.

Välj knappen Skicka i ett formulär.

I Behaviors panel (Fönster > Behaviors), klicka på Plus (+)-knappen och välj Call JavaScript från listan.

I rutan Call JavaScript anger du namnet på JavaScript funktionen som ska köras när användaren klickar på knappen och klickar på OK.

Du kan till exempel ange namnet på en funktion som inte finns än, som processMyForm().

Om din JavaScript-funktion inte finns i head-sektionen av dokumentet ännu, lägg till den nu.

Du kan till exempel definiera följande JavaScript funktion i head-sektionen av dokumentet för att visa ett meddelande när användaren klickar på Submit-knappen:

function processMyForm(){

alert('Tack för din beställning!');

}

Skapa tillgängliga HTML-formulär

När du infogar ett HTML-formulärobjekt kan du göra formulärobjektet tillgängligt och ändra tillgänglighetsattributen senare.

Lägga till ett tillgängligt formulärobjekt

Första gången du lägger till tillgängliga formulärobjekt aktiverar du dialogrutan Tillgänglighet för formulärobjekt (se Optimera Workspace för visuell utveckling).

Det behöver du bara göra en gång.

Placera insättningspunkten där du vill att formulärobjektet ska visas i dokumentet.

Välj Infoga > Formulär och välj ett formulärobjekt som ska infogas.

Dialogrutan Hjälpattribut för inmatningskod visas.

Fyll i dialogrutan och klicka på OK. Här finns en ofullständig lista med alternativ:

Obs!

Skärmläsaren läser namnet du anger som etikett attribut för objektet.

Tilldelar formulärfältet ett ID. Det här värdet kan användas för att referera till fältet från JavaScript. Det används också som värde för for-attributet om du markerar alternativet Koppla etikettkod med attributet 'for' under alternativen för format.

Radbryt med etikettagg

Gör att en label-tagg infogas runt formulärobjektet på följande sätt:

<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

Koppla etikettagg med attributet 'for'

Använder for-attributet för att infoga en label-tagg runt formulärobjektet på följande sätt:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Det här valet gör att webbläsaren utformar texten som hör till en kryssruta och en alternativknapp med en fokusrektangel och ger användaren möjlighet att markera kryssrutan och alternativknappen genom att klicka var som helst inom texten i stället för bara på kryssrutan eller alternativknappen.

Obs: Det här är det rekommenderade alternativet för tillgänglighet, men funktionaliteten kan variera beroende på webbläsare.

Ingen etikettkod

Innebär att ingen label-tagg används:

<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

Snabbtangent

Använder en tangentbordsgenväg (en bokstav) och Alt-tangenten (Windows) eller Control-tangenten (Macintosh) för att välja formulärobjektet i webbläsaren. Om du till exempel anger B som åtkomsttangent kan användare med en Macintosh-webbläsare trycka på Control+B för att välja formulärobjektet.

Tabbindex

Anger en tabbordning för formulärobjekten. Om du ställer in tabbordning för ett objekt måste du ställa in tabbordning för alla objekt.

Att ställa in en tabbordning är användbart när du har andra länkar och formulärobjekt på sidan och behöver att användaren tabbar igenom dem i en specifik ordning.

Infoga en formulärtagg genom att klicka på Ja.

Formulärobjektet visas i dokumenten.

Obs!

Om du trycker på Avbryt visas formulärobjektet i dokumentet, men Dreamweaver associerar inte tillgänglighetstaggar eller attribut med det.

Redigera tillgänglighetsvärden för ett formulärobjekt

Markera objektet i dokumentfönstret.

Gör något av följande:

Redigera lämpliga attribut i kodvyn.
Högerklicka (Windows) eller Ctrl-klicka (Macintosh) och välj sedan Redigera tagg.

Liknande innehåll

Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.

Öppna appen

Öppna programmet

Föregående

Skapa och aktivera ColdFusion-formulär i Dreamweaver

Nästa

Förbättrat HTML5-stöd för formulärelement

Läs mer

Lär dig med detaljerade videohandledningar och praktiska råd direkt i appen.

Användarforum

Delta i diskussioner, hitta svar, lär dig av experter och dela med dig av dina kunskaper.

Adobe-startsidan

Få tillgång till dina Creative Cloud-favoritprogram, tjänster, filhantering med mera.