Undervisningsmaterial Webbdesignövning

Formulär i GoLive

Vad är ett formulär?

Formulär används på webbsidan för att besökaren skall kunna skriva in text och skicka iväg information, t.ex till den som äger sajten.

Övningen består av två delar. Den första delen innebär att du får lära dig bygga formuläret. I den andra delen, som finns på en särskild sida, får du lära dig hur formuläret skickas.

Känner du dig osäker på koden eller vill veta mer, kan du med fördel läsa mer om det på min Html-sida om formulär: Läs mer >

Första uppgiften: Skapa ett formulär

I objektpaletten hittar du en särskild flik för formulär.

Börja med att dra in objektet Form i ett nytt, tomt dokument.

Html-elementet för formulär heter FORM. Tittar du i koden ser du att detta element lagts till. Formuläret skall ligga innanför FORM och /FORM.

I layoutläget syns formuläret som en tom ruta.

Bilden till höger visar hur den ser ut.

Dra in ett layotrutnät i FORM-rutan. Detta gör vi för att vi skall kunna placera formulärets olika objekt på ett bra sätt. Det går också bra att använda en tabell.

Obs!
När man arbetar med formulär vill man ju ha en snygg design. Man använder då enklast en tabell eller layoutrutnät (som GoLive omvandlar till en tabell).

I GoLive fungerar dock inte formulär och tabeller särskilt bra ihop. Framförallt märker man detta då man skall försöka få formuläret att skicka den data man vill. Man måste därför ha tålamod och noga kontrollera att avslutningen, </FORM>, placeras rätt. I tidigare versioner hittade man det på de mest underliga ställen i dokumentet när man använde tabeller...

Andra uppgiften: Lägg in radioknappar

Du skall nu lägga in två radioknappar bredvid varandra.

Lägg också in två textrutor med texten Kvinna respektive Man.

Bilden visar hur det ser ut.

Klicka på den första radioknappen för att markera den.

Knappen skall ha följande värden:

Grupp: kön
Värde: Kvinna

Du ställer in detta i Inspector (kontextpaletten).

Tips!
Radioknappar är till för att endast tillåta ett alternativ. Har man flera olika grupper av sådana knappar måste man därför gruppera dem. Webbläsaren vet då vilka som hör ihop.

Under rubriken Focus i Inspector (kontextpaletten) finns möjligheter att ställa in värden för Html-standarden.

Obs!
Eftersom HTML 4.0 fungerar ganska dåligt i webbläsarna - åtminstone när det gäller formulär - tycker jag att man kan hoppa över inställningarna i Tab, Key och Disabled. Däremot kan man fylla i om knappen skall vara ifylld från början. Då markerar man Selected.

Tredje uppgiften: Lägg in kryssrutor

Lägg in en textruta med texten Intressen.

Lägg in valfritt antal kryssrutor (check box). Använd textrutor för att ge dem etiketter.

Bilden visar hur jag gjorde.

Tips!
Får du inte plats kan du alltid öka rutnätets storlek.

Markera den första kryssrutan. Eftersom det står Musik vid min ruta, skriver jag samma namn och värde i kontextpaletten, dvs:

Namn: Musik
Värde: Musik

Tips!
Namnet och värdet är den information kryssrutan lämnar ifrån sig då formuläret skickas, så det gäller att välja bra och vettiga etiketter.

Fjärde uppgiften: Popup- och listboxar

I GoLive finns två slags objekt, som båda använder elementet SELECT. Det är popup- och listboxar.

Det som skiljer dem åt är att popup-boxen bara låter besökaren välja en enda post i en meny, medan man kan välja flera i listboxen. Här skall jag använda mig av en popup-box.

Det finns många olika inställningar man kan göra i kontextpaletten.

Bilden till höger visar de värden jag valde.

Först skrev jag in uppgifter om vad rullningslisten skall kallas.

Sedan fyllde jag i hur många rader jag vill visa i menyn samtidigt på skärmen.

GoLive startar alltid med tre tomma poster i listan. De har dels en etikett (label) och dels ett värde (value).

Besökaren kommer att se det man skriver in som etikett, medan det som skickas är det som står som värde. Därför kan man skriva samma sak på bägge ställen.

Man kryssar också för det alternativ som skall visas i listan. Här vill jag att Sverige skall synas, eftersom jag tror att de flesta som skall skicka formuläret kommer från Sverige.

Femte uppgiften: Textruta och textfält

Det finns två varianter av textrutor, som jag kommer att kalla textrutor och textfält.

De skapas med olika element: INPUT respektive TEXTAREA

Bilden visar hur de ser ut på skärmen.

Textrutor ger en enradig ruta, medan textfält ger en flerradig ruta.

Textrutor används för att besökaren skall kunna skriva in sitt namn eller sin e-postadress. Textfält är bra då besökaren skall kunna skriva in en längre text.

Placera en textruta i ditt formulär. Tilldela den lämpliga värden, t.ex "E-post" som namn och värde.

Alternativet Visible i kontextpaletten anger hur många tecken bred rutan skall vara på skärmen. Max anger hur många tecken besökaren maximalt får fylla i. Lämpliga värden här är 25 respektive 50.

Lägg även in en flerradig textruta. Ge den ett lämpligt namn. Du styr dess storlek på skärmen genom att skriva in lämpliga värden för Rader och Kolumner.

Femte uppgiften: Skicka-knapp

Slutligen skall vi skapa en knapp som gör att formuläret går att skicka. Koden för en sådan ser ut så här:

<INPUT type="submit" value="Skicka">

...och så här ser det ut på skärmen:

Det man skriver in som värde är alltså det som står på knappen.

Börja med att lägga in rätt objekt för en skicka-knapp i ditt formulär. Fyll i namn och kryssa i Label (etikett) för att kunna välja den text som skall stå på knappen.

Tips!
Förr användes ofta en knapp för att radera formulärets innehåll om man inte ville skicka det. Reset kallas en sådan knapp. Det finns också ett sådant objekt i GoLive. Numera används denna funktion sällan och jag tycker man kan strunta i att lägga in en sådan knapp.

Titta på hur hela formuläret ser ut: Öppna formovning.html >

Tips!
Alla objekt i paletten för formulär, som finns i GoLive, går att förstå och använda för den som behärskar Html. På min sida om formulär förklarar jag alla - utom "Key Generator", som är ett obskyrt element som bara användes i Netscapes version 3. Läs mer om formulär>

Skicka formuläret >