Hvordan bygge mitt eget nettsted med Form Fill

May 14

Nettsteder har vært i stand til å presentere innspill skjemaer til brukere siden spesifikasjon av HTML 2.0 i 1995. Siden da har mange verktøy dukket opp, for det meste på serversiden, for å manipulere informasjonen samlet med et nettsted form. I tillegg har noen plug-in-basert innhold, som Flash, har fått muligheten til å vise og samle inn data gjennom svært visuelt tilpass former. Den gamle HTML-standarden inneholder imidlertid fortsatt den enkleste måten å komme i gang å lage et nettsted med former.

Bruksanvisning

1 Opprett en ny HTML-dokument i et tekstredigeringsprogram som Notisblokk.

2 Skriv en typisk HTML-dokument wrapper, for eksempel "<HTML> <HEAD> <TITLE> En First Form </ TITLE> </ HEAD> <BODY> </ BODY> </ HTML>".

3 Sett <FORM> </ FORM> mellom <BODY> koder. Disse kodene erklære din form, og du vil legge til attributter senere for å hjelpe behandle data som samles inn gjennom skjemaet.

4 Lag flere elementer i skjemaet ved å sette inn <input> kodene mellom <form> tags. Den "type" egenskap av hvert <INPUT> tag bestemmer hva slags element du oppretter. Du kan bruke følgende typer: tekst, passord, boksen, radio, sende bilde, tilbakestille, knapp, skjult og fil. "Text" skaper en typisk tekstfeltet, som de du bruker til å skrive inn søkeord i en søkemotor. "Passord" er det samme som "tekst", men den teksten du skriver inn i den vil bli maskert, som ofte er tilfelle i former du bruker til å logge på et nettsted. "Boksen" skaper en firkantet boks som kan enten være merket eller umerket. "Radio" skaper en runde indikator som i en gruppe med andre spesifiserte radioknapper, vil kun merkes hvis resten av gruppen er umerket. Dette gir en måte å invitere et utvalg fra brukeren blant gjensidig utelukkende alternativer. "Send" skaper en trykknapp som skal brukes for å indikere at skjemaet er fylt ut og sette i gang tiltak for å samle data som skrives. "Image" er det samme som å sende inn, men vil vise et bilde til å bli klikket i stedet for den vanlige send-knappen. "Reset" skaper en trykknapp som sletter dataene som er angitt fra alle skjemaets elementer. "Button" skaper en trykknapp som du kan bruke med klientsiden kode som Javascript. "Skjult" ikke skaper et synlig element, men kan brukes til å lagre notater eller annen informasjon som skal inkluderes med hver innlevering. "File" skaper et element som gjør det mulig for en bruker å indikere en fil som er lagret på datamaskinen.

5 Inkluder en <SELECT> </ SELECT> par koder i skjemaet for å opprette en pop-up menyen. Sett <alternativ> kodene mellom <Velg> koder for å fylle meny med valg brukeren kan velge fra.

6 Vis HTML-dokumentet med en nettleser for å se hva skjemaet ser ut. Se i HTML-spesifikasjonen for å lære mer om hva hver type skjema element gjør, og eksperimentere med ulike kombinasjoner av elementer for å samle inn data du ønsker fra brukere av nettstedet.

7 Last ned og installer en server-side script, som en CGI script, til webserveren til å behandle dataene fra skjemaet. En vanlig script er en som sender dataene fra skjemaet til deg i en e-post.

8 Skriv "action" og "metode" attributter i den opprinnelige <FORM> -taggen for å lede data når brukeren trykker på "Send" -knappen. Velg attributtene for denne koden basert på hva slags server-side script du bruker.

9 Kopier HTML-dokument til webserveren.

10 Teste funksjonaliteten til den nylig publiserte skjemaet nettsiden i nettleseren din.

Hint

Undersøk kode fra andre nettsteder med skjemaer for å inspirere dine egne implementeringer.
Skriv Javascript-kode for å samhandle med brukeren uten data nødvendigvis å samle inn fra henne. For eksempel å endre HTML-dokument basert på brukerens input.