Det finns många gånger när du skapar webbsidor där du måste bearbeta inmatning som lämnats in av användaren, t.ex. en inloggningssida, ny kontoupprättning eller att skicka in frågor eller kommentarer. Användarinmatning samlas in och skickas till webbservern med hjälp av en HTML-blankett. Blanketter är lätta att lägga till med KompoZer inbyggda verktyg. Alla formfälttyper som HTML 4.0 stödjer kan läggas till och redigeras med KompoZer, men för denna handledning kommer vi att arbeta med texten, textområdet, skicka in och återställa knappar.
Skapa en ny formulär
KompoZer har rika formverktyg som du kan använda för att lägga till formulär på dina webbsidor. Du öppnar formulärverktygen genom att klicka på Form-knappen eller den medföljande listrutan på verktygsfältet. Observera att om du inte skriver dina egna formulärhanteringsskript behöver du få information om detta steg från dokumentation eller från programmeraren som skrev manuset. Du kan också använda mailto formulär men de arbetar inte alltid.
- Placera markören på den plats som du önskar att din blankett ska visas på sidan.
- Klicka på Form knappen på verktygsfältet. Dialogrutan Formegenskaper öppnas.
- Lägg till ett namn på formuläret. Namnet används i den automatiskt genererade HTML-koden för att identifiera formuläret och krävs. Du måste också spara sidan innan du kan lägga till ett formulär. Om du arbetar med en ny, obehandlad sida frågar KompoZer dig att spara.
- Lägg till webbadressen till skriptet som behandlar formulärdata i fältet Åtgärd-URL. Formhanterare är vanligtvis skript som skrivs i PHP eller liknande språk på serverns sida. Utan denna information kommer din webbsida inte att kunna göra någonting med de data som användaren angett. KompoZer uppmanar dig att ange URL-adressen för formulärhanteraren om du inte anger den.
- Välj Metod brukade skicka formulärdata till servern. De två valen är GET och POST. Du måste veta vilken metod manuset kräver.
- Klick ok och formuläret läggs till på din sida.
Lägg till ett textfält i en blankett
När du har lagt till ett formulär på en sida med KompoZer, kommer formuläret att beskrivas på sidan i en ljusblå streckad linje. Du lägger till dina formulärfält inom detta område. Du kan också skriva in text eller lägga till bilder, precis som du skulle på någon annan del av sidan. Text är användbart för att lägga till prompter eller etiketter för att skapa fält för att styra användaren.
- Välj vart du vill att textfältet ska gå i det skisserade formulärområdet. Om du vill lägga till en etikett kanske du vill skriva in texten först.
- Klicka på nedåtpil intill Form knappen på verktygsfältet och välj Form fält i rullgardinsmenyn.
- Fönstret Form Field Properties öppnas. Om du vill lägga till ett textfält väljer du Text från rullgardinsmenyn märkt Fälttyp.
- Ange ett namn på textfältet. Namnet används för att identifiera fältet i HTML-koden och formulärhanteringsskriptet behöver namnet för att bearbeta data. Ett antal andra valfria attribut kan ändras i denna dialog genom att växla Fler egenskaper / färre egenskaper knappen eller genom att trycka på knappen Avancerad redigering, men för nu kommer vi bara att skriva in fältnamnet.
- Klick ok och textfältet visas på sidan.
Lägg till ett textområde i en blankett
Ibland måste mycket text skrivas in på en blankett, t.ex. ett meddelande eller ett frågor / kommentarfält. I det här fallet är ett textfält inte bara lämpligt. Du kan lägga till ett textområde formulärfält med formverktygen.
- Placera markören i formuläret där du vill att ditt textområde ska vara. Om du vill skriva in en etikett är det ofta en bra idé att skriva etiketttexten, tryck på Enter för att flytta till en ny rad och lägg sedan till formulärfältet, eftersom storleken på textområdet på sidan gör det besvärligt för etiketten till vänster eller höger.
- Klicka på nedåtpil intill Form knappen på verktygsfältet och välj Text Område från rullgardinsmenyn. Fönstret Textområde Egenskaper öppnas.
- Ange ett namn för textfältet. Namnet identifierar fältet i HTML-koden och används av formulärhanteringsskriptet för att behandla den information som användaren lämnat.
- Ange antalet rader och kolumner som du vill att textområdet ska visas på. Dessa dimensioner bestämmer storleken på fältet på sidan och hur mycket text som kan matas in i fältet innan rullning måste ske.
- Fler avancerade alternativ kan anges med de andra kontrollerna i det här fönstret, men för närvarande är fältnamnet och dimensionerna tillräckliga.
- Klick ok och textområdet visas på formuläret.
Lägg till en Skicka och återställ knapp till en blankett
När användaren har fyllt i formuläret på din sida måste det finnas något sätt för att informationen ska skickas till servern. Dessutom, om användaren vill börja om eller gör ett misstag, är det till hjälp att inkludera en kontroll som återställer alla formvärden till standardvärdet. Särskilda formulär kontroller hanterar dessa funktioner, kallas respektive Submit respektive Reset.
- Placera markören i det skisserade formulärområdet där du önskar att inlämnings- eller återställningsknappen ska vara. Oftast kommer dessa att ligga under resten av fälten på ett formulär.
- Klicka på nedåtpil intill Form knappen på verktygsfältet och välj Definiera knapp från rullgardinsmenyn. Fönstret Knappegenskaper visas.
- Välj typ av knapp i rullgardinsmenyn märkt Typ. Dina val är Skicka, Återställ och Knapp. I det här fallet väljer vi Lämna typ.
- Ange ett namn på knappen, som kommer att användas i HTML och formulärhanteringskoden för att behandla formulärförfrågan. Webutvecklare kallar vanligen detta fält "Skicka".
- I rutan märkt Värde, ange texten som ska visas på knappen. Texten ska vara kort men beskrivande av vad som händer när knappen trycks ned. Något som "Skicka", "Skicka formulär" eller "Skicka" är bra exempel.
- Klicka på OK och knappen visas på formuläret.
De Återställa knappen kan läggas till formuläret med samma process, men väljer Återställa från Typ fält istället för Lämna.
Redigera en blankett med KompoZer
Att redigera ett formulär eller formulärfält i KompoZer är väldigt enkelt. Dubbelklicka på det fält som du vill redigera, och den lämpliga dialogrutan visas där du kan ändra fältegenskaper som passar dina behov. Diagrammet ovan visar en enkel form med hjälp av de komponenter som omfattas av denna handledning.
