Der er mange gange, når du opretter websider, hvor du skal behandle input indsendt af brugeren, såsom en login side, oprettelse af nye konti, eller for at indsende spørgsmål eller kommentarer. Brugerindtastning indsamles og sendes til webserveren ved hjælp af en HTML-formular. Formen er nemme at tilføje med KompoZer's indbyggede værktøjer. Alle formularfelttyper, som HTML 4.0 understøtter, kan tilføjes og redigeres med KompoZer, men for denne øvelse vil vi arbejde med teksten, tekstområdet, indsende og nulstille knapper.
Opret en ny formular
KompoZer har rige formværktøjer, som du kan bruge til at tilføje formularer til dine websider. Du får adgang til formularværktøjerne ved at klikke på Form-knappen eller den tilhørende rullemenu på værktøjslinjen. Bemærk, at hvis du ikke skriver dine egne formularhåndteringsskrifter, skal du få nogle oplysninger for dette trin fra dokumentation eller fra programmøren, der skrev scriptet. Du kan også bruge mailto formularer, men de arbejder ikke altid.
- Placer cursoren på det sted, du ønsker, at din formular skal vises på siden.
- Klik på knappen Form knappen på værktøjslinjen. Dialogboksen Formularegenskaber åbnes.
- Tilføj et navn til formularen. Navnet bruges i den automatisk genererede HTML kode til at identificere formularen og er påkrævet. Du skal også gemme din side, før du kan tilføje en formular. Hvis du arbejder med en ny, ikke-gemt side, vil KompoZer bede dig om at gemme.
- Tilføj webadressen til scriptet, der vil behandle formulardataene i feltet Handlingsadresse. Formhåndteringsprogrammer er normalt script skrevet i PHP eller lignende server-side sprog. Uden disse oplysninger vil din webside ikke kunne gøre noget med de data, som brugeren indtaster. KompoZer vil bede dig om at indtaste URL-adressen til formularhåndtereren, hvis du ikke indtaster den.
- Vælg Metode bruges til at indsende formular data til serveren. De to valg er GET og POST. Du skal vide, hvilken metode scriptet kræver.
- Klik Okay og formularen tilføjes til din side.
Tilføj et tekstfelt til en formular
Når du har tilføjet en formular til en side med KompoZer, vil formularen blive skitseret på siden i en lyseblå prikket linje. Du føjer dine formularfelter inde i dette område. Du kan også indtaste tekst eller tilføje billeder, ligesom du ville på nogen anden del af siden. Tekst er nyttigt at tilføje prompter eller etiketter til at danne felter til at guide brugeren.
- Vælg, hvor du vil, at tekstfeltet skal gå i det skitserede formområde. Hvis du vil tilføje en etiket, kan du indtaste teksten først.
- Klik på knappen pil ned ved siden af Form knappen på værktøjslinjen og vælg Formularfelt i rullemenuen.
- Vinduet Formularfeltegenskaber åbnes. For at tilføje et tekstfelt skal du vælge Tekst fra rullemenuen, der er mærket Feltype.
- Giv et navn til tekstfeltet. Navnet bruges til at identificere feltet i HTML-koden, og formhåndteringsskriptet har brug for navnet til at behandle dataene. En række andre valgfrie attributter kan ændres på denne dialog ved at skifte Flere Egenskaber / Færre Egenskaber knappen eller ved at trykke på knappen Avanceret redigering, men for nu vil vi bare indtaste feltnavnet.
- Klik Okay og tekstfeltet vises på siden.
Tilføj et tekstområde til et formular
Nogle gange skal en masse tekst indtastes på en formular, som f.eks. En besked eller et spørgsmål / kommentarfelt. I dette tilfælde er et tekstfelt ikke bare hensigtsmæssigt. Du kan tilføje et tekstområde formularfelt ved hjælp af formularværktøjerne.
- Placer cursoren i formularoversigten, hvor du vil have dit tekstområde. Hvis du vil indtaste en etiket, er det ofte en god idé at skrive etiketteksten, trykke Enter for at flytte til en ny linje, og derefter tilføje formularfeltet, da størrelsen på tekstområdet på siden gør det akavet for den mærke til venstre eller højre.
- Klik på knappen pil ned ved siden af Form knappen på værktøjslinjen og vælg Tekst Areal fra rullemenuen. Vinduet Tekstområde Egenskaber åbnes.
- Indtast et navn for tekstfeltet. Navnet identificerer feltet i HTML-koden og bruges af formularhåndteringsskriptet til at behandle de brugerindgivne oplysninger.
- Indtast antallet af rækker og kolonner, som du vil have, at tekstområdet skal vises. Disse dimensioner bestemmer størrelsen af feltet på siden, og hvor meget tekst der kan indtastes i feltet, før scrolling skal ske.
- Flere avancerede valgmuligheder kan angives med de andre kontroller i dette vindue, men nu er feltnavn og dimensioner tilstrækkelige.
- Klik Okay og tekstområdet vises på blanketten.
Tilføj en Send og Nulstil-knap til et formular
Når brugeren har udfyldt formularen på din side, skal der være en måde, hvorpå oplysningerne skal sendes til serveren. Hvis brugeren ønsker at starte over eller begå en fejl, er det også nyttigt at medtage en kontrol, som vil nulstille alle formularværdierne til standardværdien. Specielle formkontroller håndterer disse funktioner, kaldet henholdsvis Submit og Reset-knapperne.
- Placer markøren inden for det skitserede formområde, hvor du ønsker at sende eller nulstille knappen. Oftest vil disse være placeret under resten af felterne på en formular.
- Klik på knappen pil ned ved siden af Form knappen på værktøjslinjen og vælg Definer knap fra rullemenuen. Vinduet Egenskaber for knapper vises.
- Vælg den type knap i rullemenuen, der er mærket Type. Dine valg er Submit, Reset og Button. I dette tilfælde vælger vi Indsend type.
- Giv et navn til knappen, som vil blive brugt i HTML og formhåndteringskoden for at behandle formularanmodningen. Webudviklere nævner typisk dette felt "submit."
- I boksen mærket Værdi, skriv den tekst, der skal vises på knappen. Teksten skal være kort, men beskrivende for, hvad der vil ske, når knappen trykkes. Noget som "Send", "Send form" eller "Send" er gode eksempler.
- Klik på OK, og knappen vises på blanketten.
Det Nulstil knappen kan tilføjes til formularen ved hjælp af samme proces, men vælger Nulstil fra Type felt i stedet for Indsend.
Redigering af en formular med KompoZer
At redigere et formular eller formularfelt i KompoZer er meget nemt. Dobbeltklik på det felt, du ønsker at redigere, og den relevante dialogboks vises, hvor du kan ændre feltegenskaber, der passer til dine behov. Diagrammet ovenfor viser en simpel form ved hjælp af de komponenter, der er omfattet af denne vejledning.